谈谈前端页面优化

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

优化， 为何要作前端网页优化尼 ！ 还不是由于网页打开慢吗 ？ 别人的都是秒开，就咱家的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树， 很是耗性能。

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