# 简介

# 前端语言

早期的 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

:渐进式 Web 应用(Progressive Web Application)。使网页的浏览效果偏沉浸式,像客户端原生应用(比如桌面端应用、移动端应用)。

  • 需要基于 Service Worker 实现。

# 相关概念

  • .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 请求,将资源文件返回给客户端。如果没有缓存该资源文件,则从源域名下载该文件并缓存。
  • 优点:
    • 提高了客户端下载资源文件的速度。
    • 减轻了原网站的流量压力。

# 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 文件