浏览器前端优化

 前端优化

• 从用户体验（UX）角度，咱们但愿前端网页能够快速加载
• 从开发体验（DX）角度，咱们但愿前端是快速，简洁，规范的

 

浏览器如何渲染网页

1. 使用 HTML 建立文档对象模型（DOM）
2. 使用 CSS 建立 CSS 对象模型（CSSOM）
3. 基于 DOM 和 CSSOM 执行脚本（Scripts）
4. 合并 DOM 和 CSSOM 造成渲染树（Render Tree）
5. 使用渲染树布局（Layout）全部元素
6. 渲染（Paint）全部元素

步骤一 — HTML

浏览器从上到下读取标签，把他们分解成节点，从而建立 DOM 。

HTML 加载优化策略

• 样式在顶部，脚本在底部

整体思路是尽量早的加载样式，尽量晚的加载脚本。缘由是脚本执行以前，须要 HTML 和 CSS 解析完成，所以，样式尽量的往顶部放，当底部脚本开始执行以前，样式有足够的时间完成计算。

进一步讲讲如何优化

• 最小化和压缩

方法可用于全部内容，包括 HTML，CSS，JavaScript，图片和其它资源。

最小化是移除全部多余的字符，包括空格，注释，多余的分号，等等。

压缩好比 GZip，大大压缩下载文件的大小

两种方法都用的状况下，资源加载量减小了 80% 到 90%。好比：bootstrap 节省了 87% 的流量。

• 无障碍

不会提高页面的下载速度，但会大大提高残障人士的满意度。给元素加上 aria 标签，图片提供 alt 文本，HTML 5 无障碍参见。

使用诸如 WAVE 的工具鉴别哪些地方能够提升可访问性。

步骤二 — CSS

当浏览器发现任何与节点相关的样式时，好比：外部，内部，或行内样式，当即中止渲染 DOM ，并利用这些节点建立 CSSOM。这就是 CSS “渲染阻塞“ 的由来。这里是不一样类型样式的优缺点。

//外部样式
<link rel="stylesheet" href="styles.css">
// 内部样式
<style>
  h1 {
    font-size: 18px;
  }
</style>
// 行内样式
<button style="background-color: blue;">Click me</button>

CSSOM 节点建立与 DOM 节点建立相似，随后，二者合并以下：

CSSOM 的构建会阻塞页面的渲染，所以咱们想尽早加载样式，

 

CSS 加载优化策略

• 使用 media 属性

media 属性指定加载样式的条件，好比：符合最大或最小分辨率？仍是面向屏幕阅读器？

• 延迟加载 CSS

有些样式，好比：首屏如下的，或者不那么重要的，能够等待首屏最有价值的内容渲染完成再加载，可使用脚本等待页面加载，而后再插入样式。

这有两个栗子：The future of loading CSS，Defer load CSS

• 只加载须要的样式

使用 uncss 相似的工具，尽可能移除不须要的样式。

步骤三 — JavaScript

浏览器不断构建 DOM / CSSOM 节点，直到发现外部或者行内的脚本。

因为脚本可能须要访问或操做以前的 HTML 或样式，咱们必须等待它们构建完成。

所以浏览器必须中止解析节点，完成构建 CSSOM，执行脚本，而后再继续。这就是 JavaScript 被称做“解析器阻塞”的缘由。

脚本只能等到先前的 CSS 节点构建完成。

JavaScript 加载优化策略

• 异步加载脚本

脚本添加 async 属性，能够通知浏览器不要阻塞其他页面的加载，下载脚本处于较低的优先级。一旦下载完成，就能够执行。

async 适用于不影响 DOM 或 CSSOM 的脚本，对一些跟咱们的代码无关的，不影响用户体验的外部脚本尤为适用，好比：分析统计脚本。

• 延迟加载脚本

defer 跟 async 很是类似，不会阻塞页面加载，但会等到 HTML 完成解析后再执行。

使用 defer 策略的 另外一个好选择，或者也可使用 addEventListener，了解更多，参加这里。

不幸的是 async 和 defer 对于行内的脚本不起做用，浏览器默认会编译执行它们。

• 操做以前克隆节点

屡次操做 DOM 时能够尝试，首先克隆整个 DOM 节点更加高效，操做克隆后的节点，而后替换先前的节点，避免了屡次重绘，下降了 CPU 和内存消耗，同时也避免了没必要要的页面闪烁。

须要注意，克隆的时候并无克隆事件监听。

• Preload/Prefetch/Prerender/Preconnect