- content-visibility
content-visibility:auto
// 一般來(lái)說(shuō)堕伪，大多數(shù)Web應(yīng)用都有復(fù)雜的UI元素幕帆，它的擴(kuò)展范圍超出了用戶在瀏覽器視圖中看到的內(nèi)容。在這種情況下景埃，我們可以使用內(nèi)容可見(jiàn)性（ content-visibility ）來(lái)跳過(guò)屏幕外內(nèi)容的渲染计贰。如果你有大量的離屏內(nèi)容筷笨，這將大大減少頁(yè)面渲染時(shí)間拐袜。
// 這個(gè)功能是最新增加的功能之一，也是對(duì)提高渲染性能影響最大的功能之一谎亩。雖然 content-visibility 接受幾個(gè)值炒嘲，但我們可以在元素上使用 content-visibility: auto; 來(lái)獲得直接的性能提升。
// 性能可提升將近7倍
// 注意：如果你使用了該屬性匈庭，頁(yè)面無(wú)法正常滾動(dòng)那你不妨試試下面這個(gè)配套的屬性：
contain-intrinsic-size: 2000px // 它指定了一個(gè)元素的自然大小夫凸，因此，元素將以給定的高度而不是0px呈現(xiàn)阱持。
- will-change
// 在頁(yè)面上使用動(dòng)畫效果是一個(gè)前端必備的技能之一夭拌，同時(shí)要知道這些動(dòng)畫是和其他元素一起定期渲染的，今天就來(lái)說(shuō)說(shuō)這個(gè)主角 will-change 衷咽，他可以讓瀏覽器使用GPU來(lái)優(yōu)化其中的一些動(dòng)畫操作鸽扁，將識(shí)別 will-change 屬性并優(yōu)化未來(lái)與不透明度相關(guān)的變化
//直觀的屬性，會(huì)讓動(dòng)畫FPS從50 直接飆升到 120FPS兵罢。
// FPS是什么? 玩游戲的人會(huì)知道献烦，如果不知道麻煩自行百度
// 注意： 如果給非動(dòng)畫元素使用該屬性則會(huì)造成資源浪費(fèi)滓窍。
// css
.box{
will-change:opacity;
}
// html 父元素使用給屬性卖词，子元素來(lái)表示動(dòng)畫，
<div class="box">這里是一些動(dòng)畫元素</div>
- 減少渲染阻止時(shí)間
// 通常我們引入css的時(shí)候會(huì)這樣做吏夯；
<link rel="stylesheet" href="main.css">
// 如果項(xiàng)目不大此蜈，大可使用該引入方法，反之優(yōu)化的方法則需要通過(guò)分解方式來(lái)引入css樣式表噪生，詳情如下：
<link rel="stylesheet" href="sm.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="md.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="lg.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="ex.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />
// 根據(jù)樣式因素分解樣式表可以減少渲染阻止時(shí)間裆赵。
- 根據(jù)被引入的js文件來(lái)加快頁(yè)面的渲染
// 一般情況下我們?cè)陧?yè)面中引入文件是如下操作；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
// 目光聚焦到此處
<script src="./js/main.js"></script>
</body>
</html>
下面可以使用這兩種方法來(lái)加快頁(yè)面渲染
1. <script src="./js/main.js" async></script>
async: 字面意思就是 異步跺嗽，他將告訴瀏覽器战授，此js文件是異步加載的，也就意味著瀏覽器加載到此處時(shí)不會(huì)堵塞桨嫁，
會(huì)和其他元素節(jié)點(diǎn)同時(shí)進(jìn)行植兰；
注意：正因如此，攜帶async的script標(biāo)簽文件璃吧，要處理好引用關(guān)系楣导，
比如，b.js文件里面的函數(shù)值畜挨，要引用a.js文件里面的某個(gè)變量筒繁，那你最好將async去掉噩凹，以便達(dá)到按順序執(zhí)行文件。
2. <script src="./js/main.js" defer></script>
defer：字面意思是 推遲毡咏， 他規(guī)定瀏覽器是否對(duì)腳本執(zhí)行進(jìn)行延遲驮宴，直到頁(yè)面加載為止。
一旦頁(yè)面加載完畢就會(huì)立即執(zhí)行該文件血当；
- 老生常談的幾點(diǎn)幻赚；
1. 處理好循環(huán)操作，比如將循環(huán)的數(shù)組賦值一個(gè)變量臊旭，去循環(huán)其變量落恼；
2. 如果要向頁(yè)面追加數(shù)據(jù)，可使用:document.createDocumentFragment( ) 根據(jù)系統(tǒng)刷新不乏走离熏，最大程度避免丟幀現(xiàn)象佳谦；
3. 對(duì)源代碼進(jìn)行壓縮；
4. 懶加載滋戳；
5. 防抖： 輸入搜索時(shí)候钻蔑，可以用debounce等優(yōu)化方式，減少HTTP請(qǐng)求奸鸯；
6. 節(jié)流：簡(jiǎn)單解答：只允許一個(gè)函數(shù)在N秒內(nèi)執(zhí)行一次咪笑，從而減少HTTP請(qǐng)求；
7. 圖片編碼優(yōu)化娄涩，盡量使用svg和字體圖標(biāo)
- 服務(wù)器方面優(yōu)化補(bǔ)充
1. 利用CDN
2. 按需加載資源
3. 在使用 DOM 操作庫(kù)時(shí)用上 array-ids
4. 緩存優(yōu)化
5. 避免重定向
6. 啟用 HTTP/2
7. 應(yīng)用性能分析
8. 使用負(fù)載均衡方案
9. 使用索引加速數(shù)據(jù)庫(kù)查詢
10. 使用更快的轉(zhuǎn)譯方案
暫時(shí)就這么多……
