一、性能優(yōu)化的原則
- 多使用內(nèi)存、緩存
- 減少CPU計(jì)算、減少網(wǎng)絡(luò)請(qǐng)求
二、 性能優(yōu)化入手點(diǎn)
2.1 頁(yè)面和靜態(tài)資源的加載
-
靜態(tài)資源的壓縮合并
<script src="a.js"></script>
<script src="b.js"></script>構(gòu)建工具合并 ==> <script src="ab.js"></script> 靜態(tài)資源緩存
靜態(tài)資源由瀏覽加載一次后會(huì)有緩存谐丢，只要靜態(tài)資源名字不改變，則訪問(wèn)瀏覽器的緩存蚓让。只有內(nèi)容改變的時(shí)候乾忱，靜態(tài)資源名字才會(huì)改變。使用cdn讓資源加載更快
常用的cdn服務(wù)百度CDN庫(kù)历极、360的CDN服務(wù)窄瘟、新浪公共CDN庫(kù)、BootCDN趟卸、又拍云CDN庫(kù)蹄葱、CDNJS.CN和開(kāi)放靜態(tài)文件CDN庫(kù)。使用ssr后端渲染
好處：數(shù)據(jù)直接輸出到html中進(jìn)行渲染锄列，而不需要使用ajax發(fā)送數(shù)據(jù)請(qǐng)求得到數(shù)據(jù)后再進(jìn)行渲染图云。
2.2 頁(yè)面的渲染
css放在頭部，js放在底部邻邮，因?yàn)閖s會(huì)阻塞頁(yè)面渲染
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<script src="main.js"></script>
</body>
</html>-
懶加載（圖片懶加載竣况、下拉加載更多）
實(shí)現(xiàn)原理：使用尺寸較小的圖片作為預(yù)覽圖，在img的自定義數(shù)據(jù)屬性data-realsrc里存儲(chǔ)圖片的真實(shí)src鏈接筒严，當(dāng)頁(yè)面渲染到圖片時(shí)再進(jìn)行src的替換丹泉。
<script>
var img = document.getElementById('lazyImg')
img.src = img.getAttribute('data-realsrc')
</script> -
減少dom查詢，對(duì)dom查詢做緩存
// 未優(yōu)化
for (var i = 0; i < document.getElementById('p').length; i ++) {
// something to do
}// 優(yōu)化后 var pList = document.getElementById('p') for (var i = 0; pList.length; i ++) { // something to do } 減少dom操作鸭蛙，多個(gè)操作盡量合并在一起執(zhí)行
var listNode = document.getElementById('list')
// 要插入10個(gè)li標(biāo)簽
var frag = document.createDocumentFragment()
for (var x = 0; x < 10; x++) {
li = document.createElement('li')
li.innerHTML = 'List item' + x
frag.appendChild(li)
}
listNode.appendChild(frag)事件節(jié)流
實(shí)現(xiàn)原理：設(shè)置事件的延遲執(zhí)行摹恨，當(dāng)用戶快速持續(xù)地觸發(fā)keyup事件時(shí)，只有最后一次觸發(fā)才會(huì)執(zhí)行娶视。
var input = document.getElementById('input')
var timer
input.addEventListener('keyup', function() {
if (timer) clearTimeout(timer)
timer = setTimeout(function() {
// 觸發(fā)事件
}, 100)
})-
盡早執(zhí)行操作
window.addEventListener('load', function() {
// 頁(yè)面的全部資源加載完才會(huì)執(zhí)行晒哄，包括圖片、視頻等，等待時(shí)間可能比較久
})window.addEventListener('DOMContentLoaded', function() { // 渲染完即可執(zhí)行揩晴，此時(shí)圖片勋陪、視頻可能還沒(méi)有加載完贪磺。大部分框架使用此方法 })
