前端性能优化

除了雅虎军规35条，这里再强调几条

1. 首屏加载

1. 首屏尽量使用服务端渲染

2. 首屏尽量使用懒加载

此懒加载并非图片的懒加载，而是指这个文档内容的懒加载。可以先服务端渲染用户可见的部分内容(实际要大于此，因为用户可能会滚动屏幕)，

剩余的部分用js去加载和渲染，这样可以尽快的显示首屏，又不影响用户的浏览。

2. DNS预读取

DNS预读取是一项使浏览器主动去执行域名解析的功能。DNS请求需要的带宽非常小，但是延迟却有点高。 下面是引用MDN的一句话：
在某些浏览器中这个预读取的行为将会与页面实际内容并行发生（而不是串行）。正因如此，某些高延迟的域名的解析过程才不会卡住资源的加载。 这样可以极大的加速（尤其是移动网络环境下）页面的加载。在某些图片较多的页面中，在发起图片加载请求之前预先把域名解析好将会有至少 5% 的图片加载速度提升。
具体做法： head标签里加上

<link rel="dns-prefetch" href="https://data.dadaabc.com/">

data.dadaabc.com为静态资源的域名，如还有其他链接的域名，都一起加进去。

3. 脚本预解析

在head中使用script的defer，能够使得浏览器提前解析脚本，但是有不会阻塞文档，并且会在文档加载完成后执行脚本。

<script defer src="script.js">

实际上，目前的浏览器在script阻塞浏览器加载的时候，会开启另一个线程来读取下面的html文档，继续对下面的资源进行解析和加载，
但是不修改DOM树。

4. 字体、图片预加载

link的preload可以预加载一些字体和资源文件，显示的时候可以加快速度

<link rel="preload" as="font" href="xxx.woff>

跨域资源预加载要添加crossorigin属性

<link rel="preload" crossorigin as="script" href="xxx.js">

preload 加载页面必需的资源如 CDN 上的字体文件， prefetch 预先加载下一屏数据

5. 多域名分发静态资源

同域下浏览器能并发的请求有限，为了增加并发，尤其是一些静态资源上，可以使用多个域名。但由于域名DNS解析本身也是耗时的，
所以也不是越多越好，chrome最大支持6路并发，所以一般设置2-4个域名较为合适。
具体的做法是：再增加cdn域名来下载静态资源。比如图片全部用img.dadaabc.com/域名,
css资源全部用css.dadaabc.com/域名，这些域名最终全部指向同样的cdn服务器。
静态资源域名加前缀可以用gulp-rev-replace来实现。

6. 优化关键渲染路径

优化关键渲染路径，可以减少白屏时间。关键渲染路径表示浏览器呈现页面的所有必须步骤。 我们想要找到最小的阻塞CSS集合，或者关键 CSS，以使页面显示给用户。
关键css指首屏视口内的css，非视口内的元素的css仍然为非关键css

1.内联嵌入关键 CSS 样式

内联可以加快解析渲染，缺点是不能缓存

2.预加载非关键 CSS

异步加载（或预加载preload）非关键css
<link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">

相关工具

webpack插件
html-critical-webpack-plugin

优化 Critical Rendering Path(关键渲染路径)，尽可能减少阻塞渲染的 JavaScript 和 CSS。
常见做法包括使用 async/defer 让浏览器下载 JavaScript 的同时不阻塞 HTML 解析，
内联页面关键部分的样式到 HTML 中等。