LeoHsiao's Notes

# 简介

# 前端语言

早期的 Web 网页只有单纯的 HTML 文件，功能简单。后来发明了 CSS、JavaScript 等技术，丰富了网页的功能。这三种技术是前端开发的基础。

  • HTML ：负责控制网页的内容。
    • 只要有 HTML 文件，就能让 Web 浏览器显示出网页。
  • CSS ：负责控制网页的显示样式、排版。
  • JavaScript ：负责控制网页的行为。

# 前端开发框架

  • Bootstrap ：一个 CSS/HTML 开发框架，由 Twitter 推出。
  • jQuery ：一个 JS 库。
  • AngularJS ：一个 JS 开发框架，由 Google 推出。
  • ReactJS ：一个 JS 开发框架，由 Facebook 推出。
  • Vue.js ：一个 JS 开发框架。

# 前端渲染

  • 前端渲染（Render）是指生成 HTML 文件的过程，渲染之后就可以在 Web 浏览器中显示。
  • 通常有两种渲染策略：
    • 服务器端渲染（Server Side Rendering ，SSR）
      • ：服务器直接生成 HTML 文件，发送给浏览器。
    • 客户端渲染（Client Side Rendering ，CSR）
      • ：服务器发送 JS 文件等内容，由浏览器执行 JS 代码，生成最终的 HTML 文件。
      • 优点：减少服务器的通信量，有利于针对客户端进行个性化显示。
      • 缺点：需要浏览器消耗一定时间和性能进行渲染。
  • 根据浏览器显示的 HTML 文件的内容能否变化对网页进行分类：
    • 静态网页
    • 动态网页：通过客户端渲染改变 HTML 内容。

# 设计模式

# MPA

：多页面应用（Multiple Page Application）。网站的每个页面分别用一个 HTML 文件描述。

  • 优点：结构简单。
  • 缺点：浏览器每跳转一个页面时都要请求一个相应的 HTML 文件，速度较慢。

# SPA

：单页面应用（Single Page Application）。用一个 HTML 文件显示多个网页，通过 JS 切换页面。

  • 优点：
    • 浏览器跳转页面的速度较快，因为不需要请求新的 html 文件。
  • 缺点：
    • 加载第一个页面的速度较慢。
    • 不利于 SEO ，因为搜索引擎不能获取到 JS 动态生成的内容。

# RWD

：响应式网页设计（Responsive Web Design）。根据客户端的屏幕尺寸自动调整网页布局。

  • 原理：
    • 通过 CSS3 中的 Media Query（媒体查询），可以获得终端的宽、高、分辨率、画面比例、横竖方向等信息，来决定布局方式。
    • 设置元素的尺寸时，可以用百分比为单位，使它在不同尺寸的终端上的显示比例差不多。
    • 当终端尺寸过小时，可以隐藏一些元素。
  • 优点：能兼顾电脑、手机等不同终端的用户体验。
  • 缺点：需要设计多种布局，成本较大。

# PWA

  • 2015 年，Chrome 工程师提出了一种新的 Web 网页设计风格，称为 PWA（Progressive Web Application，渐进式 Web 应用）。
    • PWA 是指，利用浏览器的一系列新功能，使得用户浏览网页时，更加沉浸式，像客户端原生应用（比如桌面端应用、移动端应用）。

# 相关概念

  • .svg 文件 ：可伸缩矢量图形，用 XML 文本描述图像。
  • .swf 文件 ：用于保存 flash 动画。
  • PV ：页面浏览量（Page Views），一般是统计网站的所有页面被访问的总次数，用户每刷新一次页面就加一次浏览量。
  • UV ：独立访客数（Unique Visitors），一般是统计访问网站的 IP 地址数。
  • DAU ：每日活跃用户数（Daily Active User），一般是统计每天的 UV 。
  • 埋点 ：网站每次被用户访问时，让前端或后端记录下当前的上下文信息，便于运营人员进行大数据分析。比如用户 ID 、用户地址、操作事件、跳转的源网页和目标网页、驻留时长。
  • I18N ：国际化（Internationalization），通常指软件不需要修改，就能在不同国家、地区通用。
  • L10N ：本地化（Localization），通常指软件专门为某个国家、地区做出修改，比如显示本地语言、本地时间。

# CDN

：内容分发网络（Content Delivery Network），将网站的一些资源文件拷贝到各个地理位置的缓存服务器中，方便客户端下载。

  • 工作流程：
    1. 用户购买使用某个平台的 CDN 服务，给源域名 test.com 创建加速域名 cdn.test.com 。
    2. 用户在域名注册平台修改配置，给源域名 test.com 添加一个 CNAME ，指向 cdn.test.com 。
    3. 让客户端访问源域名。DNS 解析时发现存在 CNAME ，就将请求转发到加速域名。
    4. CDN 服务器收到 HTTP 请求，将加速域名解析到距离客户端地理位置最近的缓存服务器。
    5. 缓存服务器收到 HTTP 请求，将资源文件返回给客户端。如果没有缓存该资源文件，则从源域名下载该文件并缓存。
  • 优点：
    • 提高了客户端下载前端文件的速度。
    • 减轻了源站的流量压力。
    • 隐藏了源站的 IP ，避免被 DDOS 攻击。
  • Cloudflare (opens new window) 是一个 2010 年成立的公司，提供了免费的 CDN 服务。
  • Censys (opens new window) 是一个 2017 年成立的公司，会扫描所有公网 IP 的所有端口，比如发现某个 IP 监听了 SSH 端口、发现某个 IP 监听了 TLS 端口且 TLS 证书绑定到某个域名。
    • 如果用户想通过套 CDN 隐藏源站的 IP ，避免被 DDOS 攻击。但使用 Censys ，可查询出任意域名对应的源 IP 。防御措施：
      • 修改源站的 Nginx 的 default_server 配置。如果客户端访问的域名无效，则拒绝 SSL 握手，这样能避免被扫描 IP 发现真实域名。
        server {
    listen  443 ssl http2 default_server;
    ssl_reject_handshake on;
}
      • 在源站添加 iptables 规则，只允许被 CDN IP 访问。

# WebAssembly

：简称为 wasm ，是一种在浏览器沙盒中运行二进制程序的技术。

  • 特点：
    • 是独立的二进制程序，直接调用浏览器的 API ，不依赖 JS 。
    • 执行速度接近原生代码。
  • 于 2015 年发布，前身是 asm.js 。
    • asm.js ：JS 语言的子集，可以将 C 语言代码翻译成 asm.js 代码之后，在浏览器中执行。
  • 提供了 Emscripten 编译器，基于 LLVM 编译器，支持将 C、C++、C#、Go、Kotlin 等语言的代码编译成 wasm 模块。
    • 例：用 Emscripten 编译 C 语言源文件
      emcc test.c -s WASM=1 -o test.html
      这会生成以下文件：
      test.wasm   # 二进制的 wasm 模块
test.html   # 一个示例 HTML 文件，可以调用 wasm 模块
test.js     # 一个起辅助作用的 JS 文件