一、性能優(yōu)化的原則
- 多使用內存、緩存
- 減少CPU計算、減少網(wǎng)絡請求
二、 性能優(yōu)化入手點
2.1 頁面和靜態(tài)資源的加載
-
靜態(tài)資源的壓縮合并
<script src="a.js"></script>
<script src="b.js"></script>構建工具合并 ==> <script src="ab.js"></script> 靜態(tài)資源緩存
靜態(tài)資源由瀏覽加載一次后會有緩存，只要靜態(tài)資源名字不改變，則訪問瀏覽器的緩存。只有內容改變的時候，靜態(tài)資源名字才會改變。使用cdn讓資源加載更快
常用的cdn服務百度CDN庫、360的CDN服務、新浪公共CDN庫、BootCDN、又拍云CDN庫、CDNJS.CN和開放靜態(tài)文件CDN庫。使用ssr后端渲染
好處：數(shù)據(jù)直接輸出到html中進行渲染，而不需要使用ajax發(fā)送數(shù)據(jù)請求得到數(shù)據(jù)后再進行渲染。
2.2 頁面的渲染
css放在頭部，js放在底部，因為js會阻塞頁面渲染
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<script src="main.js"></script>
</body>
</html>-
懶加載（圖片懶加載、下拉加載更多）
實現(xiàn)原理：使用尺寸較小的圖片作為預覽圖，在img的自定義數(shù)據(jù)屬性data-realsrc里存儲圖片的真實src鏈接，當頁面渲染到圖片時再進行src的替換。
<script>
var img = document.getElementById('lazyImg')
img.src = img.getAttribute('data-realsrc')
</script> -
減少dom查詢，對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操作，多個操作盡量合并在一起執(zhí)行
var listNode = document.getElementById('list')
// 要插入10個li標簽
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é)流
實現(xiàn)原理：設置事件的延遲執(zhí)行，當用戶快速持續(xù)地觸發(fā)keyup事件時，只有最后一次觸發(fā)才會執(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() {
// 頁面的全部資源加載完才會執(zhí)行，包括圖片、視頻等，等待時間可能比較久
})window.addEventListener('DOMContentLoaded', function() { // 渲染完即可執(zhí)行，此時圖片、視頻可能還沒有加載完。大部分框架使用此方法 })
