提升頁(yè)面性能的方法有哪些署隘？
1.資源壓縮合并祟辟，減少http請(qǐng)求
2.非核心代碼異步加載------->異步加載的方式-------->異步加載的區(qū)別
3.利用瀏覽器緩存-------->緩存的分類------->緩存的原理
4.CDN（網(wǎng)絡(luò)優(yōu)化）讓網(wǎng)絡(luò)快速到服務(wù)器下載資源
5.預(yù)解析DNS
非核心代碼異步加載
異步加載的方式:
1.動(dòng)態(tài)腳本加載（用JS動(dòng)態(tài)創(chuàng)建script節(jié)點(diǎn)）
2.defer ------- <script defer src=""></script>
3.async ------- <script async src=""></script>
異步加載的區(qū)別
1.defer是在html解析完成后才執(zhí)行，如果是多個(gè)舅桩，按照加載順序依次執(zhí)行
2.async是在加載完成之后立即執(zhí)行仪召，如果是多個(gè)寨蹋，執(zhí)行順序和加載順序無(wú)關(guān)
利用瀏覽器緩存
緩存的分類
1.強(qiáng)緩存（直接拿過(guò)來(lái)用）
Expires(過(guò)期時(shí)間) -----絕對(duì)時(shí)間 （服務(wù)器的時(shí)間可能和客戶端不一致）
Cache-Control-----------相對(duì)時(shí)間（Cache-Control:max-age=3600s秒）
2.協(xié)商緩存（瀏覽器發(fā)現(xiàn)本地有緩存松蒜，向服務(wù)器問(wèn)一下能不能用）
Last-Modified（上次修改的時(shí)間）--------If-Modified-Since
Etag （hash值）------------If-None-Match
CDN（網(wǎng)絡(luò)優(yōu)化）讓網(wǎng)絡(luò)快速到服務(wù)器下載資源
當(dāng)頁(yè)面第一次打開(kāi)的時(shí)候，瀏覽器緩存是起不了作用的已旧，使用CDN效果是非常明顯的秸苗；
預(yù)解析DNS
<meta http-equiv="x-dns-prefetch-control" content="on">打開(kāi)DNS預(yù)解析
<link rel="dns-prefetch" href="http://host_name_to_prefetch.com">
頁(yè)面中所有的a標(biāo)簽在一些高級(jí)瀏覽器中是默認(rèn)打開(kāi)DNS預(yù)解析的，若頁(yè)面時(shí)https评姨，DNS解析則大多默認(rèn)關(guān)閉难述，加上第一句是打開(kāi)DNS預(yù)解析
移動(dòng)端性能陷阱
- 減少對(duì)DOM元素操作
- 1.減少或者避免repaint,reflow
重繪repaint：顏色萤晴，字體發(fā)生變化 - 2.reflow：位置發(fā)生變化吐句，變化成本要比 repaint大
- 緩存
- PC時(shí)代：
http緩存，response header - html5時(shí)代提供很多緩存機(jī)制：
localStorage
sessionStorage
indexDB可以給字段做索引
- css3transform代替dom做些動(dòng)畫(huà)
性能會(huì)更好
不成文的注意點(diǎn)：
- 不要給非static定位元素增加css3動(dòng)畫(huà)
- 適當(dāng)?shù)氖褂糜布铀?
- canvas觸發(fā)硬件加速
