现代前端技术解析：Web 前端技术基础

如何提高开发效率

1. 对 DOM 操作进行封装
           DOM 文档对象模型：指 HTML 内容通过浏览器解析后建立的具有节点父子关系的树形对象
2. 模块化 & 组件化
3. 异步加载 保证尽快展示页面
4. webp 格式的图片 更高压缩比
5. 浏览器缓存文件
           304 状态码：客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容并没有改变，则服务器返回 304 状态码。
6. 移动端页面应尽量简洁

Koa 框架：一个基于 node.js 的 web 框架，使 JS 在服务器端也能高效的开发

从输入网址到页面展示，浏览器和服务端都发生了什么？

1. 浏览器开启一个线程处理这个请求，解析 URL 地址，如果是 HTTP 协议就按照 HTTP 方式处理
2. 调用浏览器引擎中对应的方法，如 WebView 中的 loadUrl 方法，分析并加载这个 URL 地址
3. 通过 DNS 解析获取 URL 地址对应的 IP 地址，并向该 IP 发送 GET 请求（包含浏览器的 cookie、userAgent 等信息）
4. 进行 HTTP 协议会话，浏览器客户端向 Web 服务器发送报文
5.  进入网站后台 Web 服务器处理请求
6. 进入部署好的后端应用，找到对应的请求处理逻辑
7. 服务器处理请求并返回相应
           有缓存，返回 304
           无缓存，返回 200 以及对应内容
8. 304，从本地缓存读取文件内容
   200，浏览器开始下载 HTML 文档
9. 浏览器根据下载接收到的 HTML 文件解析结构建立 DOM 文档树，并根据 HTML 中的标记请求下载指定的 MIME 文件（CSS、JS 脚本等），同事设置缓存等内容
10. 页面开始渲染 DOM，CSS 根据规则解析并结合 DOM 文档树进行网页内容布局和绘制渲染，JS 根据 DOM API 操作 DOM，并读取浏览器缓存、执行事件绑定等

浏览器的主要结构

• 用户界面
• 浏览器引擎
          在用户界面和渲染引擎直接传送指令，在客户端本地缓存中读写数据
• 渲染引擎
          解析 DOM 文档和 CSS 规则并将内容排版到浏览器中显示有样式的界面
• 网络功能模块
          浏览器开启线程或下载资源文件的模块
• JavaScript 解释器
          解释和执行 JS 脚本
• UI 后端
          绘制基本的浏览器窗口内控件
• 数据持久化存储技术
          cookie、localStorage 等

渲染引擎的主要工作流程

1. 解析 HTML 构建 DOM 树
2. 构建渲染树（根据 CSS 文件）
3. 渲染树布局阶段（固定节点在页面中的位置）
4. 绘制渲染树（使元素的样式信息生效）

Webkit 内核渲染时 HTML 与 CSS 解析可并行，Gecko 内核先解析 HTML 生成 Sink 后再解析 CSS

浏览器缓存机制

• HTTP 文件缓存
• localStorage
• sessionStorage
• Cookie
          Session cookie & 持久型 cookie
• WebSQL
• IndexDB
• Application Cache
          通过 manifest 配置文件选择性存储
• cacheStorage
• Flash 缓存