前言
我們經常使用dom渲染的時間和整個頁面的load時間來衡量一個頁面打開的快不快，下面主要總結一下最近使用的一些可以打開頁面優化速度的方式。
優化方法
傻瓜式優化
優化的操作都很簡單就可以取得比較明顯的效果，是進行頁面優化切入的首選方式。
1.DNS預讀取
使用DNS預讀取的方式在後代並行地進行DNS的解析，可以防止瀏覽器耗費時間去解析DNS從而影響頁面DOM的渲染，一個稍微複雜的頁面通常要進行多個域名的加載，省去解析DNS的時間是很有效果的。
<link rel="dns-prefetch" href="https://www.google.com">
<link rel="dns-prefetch" href="https://www.baidu.com">
2.圖片的壓縮
那些殺千刀的設計和產品經理經常會忘記給圖片做壓縮，即使這個頁面是官網的首頁也經常會忘記壓縮，有些不需要這麼高質量的圖片也做成幾百KB，這對整個頁面的load時間是極爲不利的，也是在數據上優化效果最明顯的，根據設計和產品經理的需求對圖片做壓縮。
另外，相對於普通的baseline jpeg，progressive jpeg可以更快的打開，且瀏覽器的掃描方式會變成從模糊到清晰，體驗上會更好，我試過用magick這個軟件去轉化，當時photoshop也可以，但是生成的圖片有時候要比原始jpeg大很多。
3.HTML優化
在高效前端上看到如果把一個頁面html的行前縮進全部去掉，頁面的體積可以減少1/3。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
4.gzip
跟後端商量一下，在服務器端配置某些資源文件使用gzip進行壓縮，會達到非常大的效果，一般一個幾十KB的js文件會被壓縮到只有幾KB，還是很明顯的。
5.優化css和js資源引入的位置
所有放在head標籤裏的CSS和JS都會堵塞渲染！！！
所以一定要慎重的使用這類資源文件的引入，script儘量放到body中加載，css考慮優化，減少base64的使用，開啓gzip。
還有一些較爲複雜的進階優化放到下次再記錄吧，其實目前只搞了這些，哈哈哈。