pc端考慮點(diǎn):
文件小
網(wǎng)速快
請(qǐng)求次數(shù)少
移動(dòng)端考慮點(diǎn)：
網(wǎng)速慢
耗電
流量貴
網(wǎng)絡(luò)不穩(wěn)定
js及css對(duì)網(wǎng)頁渲染的影響
js會(huì)阻塞渲染
//html結(jié)構(gòu)
<head>
<title>Document</title>
<script src="a.js"></script>
<link rel="stylesheet" href="style.css">
</head>
當(dāng)瀏覽器遇到<script src="a.js"></script>，瀏覽器會(huì)下載a.js然后執(zhí)行，執(zhí)行完畢后才會(huì)讀下面的內(nèi)容，js根本不往下看直接下載后執(zhí)行，執(zhí)行的時(shí)候回阻塞頁面后續(xù)的內(nèi)容（包括渲染，其他資源下載）因?yàn)閖s會(huì)改變文檔的內(nèi)容，js放上面一個(gè)body都看不到，假如寫10個(gè)js頁面一直白屏，js放下面，用戶可以先看到正常的頁面，后再去點(diǎn)擊頁面，此時(shí)js可能正好下載完。而且此時(shí)js可以訪問到上面所有的節(jié)點(diǎn)
css可能會(huì)阻塞渲染，但是不阻塞下載
<head>
<title>Document</title>
<script src="a.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
<link rel="stylesheet" href="style4.css">
</head>
<body>
<div>123</div>
</body>
此時(shí)css不會(huì)渲染下面的div，看到css文件會(huì)看看還有沒有其他css文件要下載，瀏覽器認(rèn)為css沒有下載完沒有必要渲染下面的div。如果css放在下面，先是沒有樣式的頁面后是有樣式的頁面，用戶體驗(yàn)會(huì)差很多
dns可以知道每個(gè)ip對(duì)應(yīng)的域名，是一個(gè)給它一個(gè)域名返回一個(gè)ip的服務(wù)
瀏覽器運(yùn)行原理
dns查詢
發(fā)起http請(qǐng)求
處理http響應(yīng)
下載內(nèi)容、解析內(nèi)容、繪制圖像
優(yōu)化方法：
1.減少http請(qǐng)求數(shù)，每發(fā)起一個(gè)域名請(qǐng)求就會(huì)重復(fù)上述操作
- 壓縮合并js文件
- 壓縮合并css文件
- 圖片壓縮（主要）
2.css放在head中 ，js放在body最后
3.圖片懶加載，數(shù)據(jù)懶加載（點(diǎn)擊查看更多），功能懶加載
4.使用CDN（Content Delivery Network）
簡單的靜態(tài)資源服務(wù)器
把文件放在離用戶更近的地方，一般會(huì)部署很多個(gè)地方，通過減少物理距離來加快下載速度，cdn都有單獨(dú)的域名，一般把不經(jīng)常變的內(nèi)容放在cdn
5.dom操作優(yōu)化
使用JavaScript訪問DOM元素比較慢，因此為了獲得更多的頁面應(yīng)做到以下幾點(diǎn)：
緩存已訪問過的有關(guān)元素
線下更新完后再將其添加到文檔樹中
避免使用JavaScript來修改頁面布局
6.若js中涉及大量的運(yùn)算，盡量少使用嵌套循環(huán)，優(yōu)化查找算法、排序算法
7.添加Cacher -control頭
響應(yīng)中可以添加這個(gè)Cacher -control:max-age=300，單位是秒,下次再請(qǐng)求完全一樣的url，不要再請(qǐng)求了，會(huì)返回上一次前請(qǐng)求過的內(nèi)容，此時(shí)是操作按回車，如果你按刷新就會(huì)重新請(qǐng)求
8.根據(jù)域名劃分頁面內(nèi)容，提高下載速度
9.減少dns查找次數(shù)
減少主機(jī)名的數(shù)量還可以減少頁面中并行下載的數(shù)量，減少dns查找次數(shù)可以節(jié)約響應(yīng)時(shí)間，但是減少并行下載卻會(huì)增加響應(yīng)時(shí)間，此時(shí)需要我們?cè)跍p少dns查找次數(shù)和保持較高程度并行下載兩者之間權(quán)衡了
10.不要在html中縮放圖像
不要為了在html中設(shè)置長寬而使用比實(shí)際需要大的圖片，如果需要
<img width="100" height="100" src="aaa.jpg">
就應(yīng)該使用100x100像素的圖片而不是500x500
11.避免使用濾鏡
12.使用iframe的數(shù)量最小
iframe元素可以在父文檔中插入新HTML文檔。
優(yōu)點(diǎn)：解決加載緩慢的第三方內(nèi)容，如圖標(biāo)廣告等加載問題；Security sanbox ；并行加載腳本
缺點(diǎn)：即使內(nèi)容為空加載也需要時(shí)間；也會(huì)阻塞頁面加載
13.不要出現(xiàn)404錯(cuò)誤，因?yàn)?04會(huì)導(dǎo)致頁面卡住一直等待沒有用處的響應(yīng)
