谈谈前端页面优化

最近在看前端网页优化的文章， 来这里做个总结吧 ！

优化， 为什么要做前端网页优化尼 ！ 还不是因为网页打开慢吗 ？ 别人的都是秒开，就咱家的10秒开， 为啥 ？ 浏览器对咱有意见 。。。。。。

好了， 废话不多说了，直接上干货。

#### 首先我们来拆解下，页面加载到底慢在哪 ？

1. 白屏时间
2. 首屏时间
3. 页面加载时长

其次我们来看看 ，网页是如何展示到浏览器上的吧 。
1: WebView 初始化（一般耗时在400ms， 只有移动端的hybrid）
2：DNS 服务器解析域名（耗时在150ms）
3：建立TCP链接。（300ms）
4：服务器响应，获取获取数据 ）
5：解析获取到的html，生成DOM树，渲染到页面上

白屏时间一般指的就是 1 到 4的过程， 由于还在请求数据， 这个时间页面是空白的 。 那我们该如何优化尼 ：

1. WebView初始化优化， 我们是可以在打开app之后 ，做一个webview预加载的（后台运行，先初始化好），当要用到的时候，在直接拿出来用就可以了，一般可以节省200ms
2. DNS解析， 这里可以加一个dns预解析的 代码如下
3. 这里选用http2.0；多路复用的， 同域名下多个请求，建立一次tcp链接就可以了，
4. 这步很关键了，下载速度跟你的资源大小有很大的关系。所以静态资源越小越好；比如：nginx服务器走gzip压缩，vue打包文件做路由懒加载（包切割）， 或者离线包 cnd服务，缓存 等等哈。
5. 这步的话 ， 主要避免重排。因为重排 渲染器需要重新计算dom树， 非常耗性能。

嗨呀！ 写到这里 又词穷了， 那等我想想，明天再来写吧 ！