Skip to main content

浏览器

浏览器的工作原理​

https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

加载页面和渲染过程​

加载页面​

例如在地址栏输入https://www.baidu.com，过程如下：

  1. 浏览器向 DNS 服务器请求域名的 IP 地址
  2. 浏览器向这个 IP 地址发送 HTTP 请求
  3. 服务器收到请求后，返回响应内容
  4. 浏览器收到响应内容，开始渲染页面

渲染过程​

  1. 根据 HTML 结构生成 DOM 树
  2. 根据 CSS 生成 CSSOM
  3. 将 DOM 和 CSSOM 进行合并，生成渲染树 RenderTree
  4. 根据 RenderTree 渲染页面
  5. 遇到 script 标签，浏览器会暂停渲染，等待脚本加载完成，再继续渲染

浏览器缓存机制​

浏览器中的 JavaScript 执行机制​

V8 工作原理​

页面渲染原理​

PWA​

渐进式网页应用

回流与重绘​

回流必定引发重绘，重绘不一定引发回流

回流(reflow)​

若改变了 DOM 元素的形状、大小或页面布局就会触发 reflow

触发条件：

  • 添加或删除可见的 DOM 元素
  • 元素位置发生变化
  • 元素尺寸发生变化（width height padding margin border）
  • 浏览器窗口尺寸变化
  • 内容变化（如文本变化）
  • 页面初始渲染（无法避免）

重绘(repaint)​

只是改变了样式，不影响周围元素或布局，如color或background-color，会引起浏览器的重绘。

触发重绘的行为：

  • 修改颜色
  • 修改文本方向
  • 修改阴影

减少回流的方式​

  • 动画设置position: fixed或 absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
  • 避免使用table布局，table中每个元素的大小以及内容的改动，都会导致整个table的重新计算
  • 使用 visibility: hidden 替换 display: none
  • 使用 requestAnimationFrame 作为动画帧。动画速度越快，回流次数越多

Chrome 历史版本下载​

https://www.chromedownloads.net/chrome64osx

chrome 80 版本下载地址，使用的时候关掉新版浏览器