一、網頁加載流程圖
二、白屏與首屏
2.1 白屏時間
白屏時間：頁面開始展示的時間點 - 開始請求的時間點
- 開始請求的時間點：performance.timing.navigationStart或者標籤開始執行的時間
- 頁面開始展示的時間點：標籤末尾執行的時間
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
//測試時間起點
var StartTime = +new Date();
</script>
<title>白屏時間</title>
<link ref="" href="">
<link ref="" href="">
<script>
//測試時間終點
var endTime = +new Date();
</script>
</head>
<body>
<h1>白屏時間</h1>
</body>
</html>
原理：按照文檔流從上到下解析，邊解析邊顯示
最終得到
白屏時間：endTime - performance.timing.navigationStart/startTime（不支持performance時）
2.2 首屏時間
首屏時間：首屏加載完成的時間點 - 頁面開始請求時間點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>白屏時間</title>
<script type="text/javascript">
//開始時間
window.pageStartTime = Date.now();
</script>
</head>
<body>
<!-- 首屏可見模塊1、2 -->
<div class="module1"></div>
<div class="module2"></div>
<script type="text/javascript">
//首屏時間
window.firstScreenTime = Date.now();
</script>
<!-- 首屏不可見模塊3、4 -->
<div class="module3"></div>
<div class="module4"></div>
</body>
</html>
最終得到
首屏時間：firstScreenTime - performance.timing.navigationStart/pageStartTime（不支持performance時）
三、優化方向
3.1 減少請求文件數
每次網絡請求比較耗時的過程：
- DNS解析和尋址、
- 服務器建立連接、
- 發送數據、
- 等待服務端響應、
- 接受數據
- …
以上過程比較耗時，請求數量變多的時候，頁面加載變慢，服務器壓力變大。爲了避免，儘量減少請求數量，常見的做法有
- 小圖片合併成雪碧圖或者iconfont
- js、css文件合併
3.2 減少資源體積
減少資源體積從以下角度入手
- 精簡代碼
- 壓縮js、css、圖片
- 開啓Gzip
其中壓縮js、css、圖片有2大類方法
- 在線壓縮工具
- 工具包clean-css、UglifyJS、imagemin
3.3 提高網絡傳輸
-
使用瀏覽器緩存
![在這裏插入圖片描述]()
-
使用CDN
