JS基礎——淺談前端頁面渲染和性能優化

加載html中的靜態資源 

其中,加載靜態資源的過程,一般為瀏覽器根據DNS服務器得到域名的IP地址,然后向這個IP的機器發送http請求,服務器收到、處理並返回http請求,瀏覽器得到返回http請求.

瀏覽器渲染頁面的過程 

• 根據HTML 結構生成DOM Tree
• 根據CSS 生成 CSSOM
• 將DOM和CSSOM結合生成RenderTree
• 瀏覽器根據RenderTree開始渲染和展示
• 遇到<script> 時,會執行並阻塞渲染

window.onload // 頁面的全部資源全部渲染完
documnet.addEventListener('DOMContentLoaded',function(){
// dom 渲染完即可執行,此時圖片和視頻可能§§還沒加載完
})

性能優化　

原則

多使用內存、緩存或者其他方法

減少CPU計算、減少網絡請求

解決

加載資源優化

1. 靜態資源的壓縮合並(webpack 構建工具)
2. 靜態資源緩存(內容改變,鏈接名字才會改變)
3. 使用CDN讓資源加載更快(內容分發網絡)
4. 使用SSR后端渲染,數據直接輸出到html中(例如react 的renderToString)

渲染優化

CSS放前面,JS放后面

懶加載(圖片懶加載、下拉加載更多)

<img src="preview.png" date-realsrc="abc.png"> //date-realsrc 真正的圖片
<script type="text/javascript">
var img1=document.getElementsByTagName('img')[0];
img1.src=img1.getAttribute('date-realsrc')
</script>

減少dom查詢,對dom查詢做緩存

for 每次循環都需要dom查詢 document.getElementsByTagName('img')

如果var domList = document.getElementsByTagName('img');只要一次dom查詢

減少dom操作,多個操作盡量合並到一起

var frag = document.createDocumentFragment();不屬於主dom中,通常用於片段的處理

案例:

let ul = document.querySelector(`[data-uid="ul"]`),
    docfrag = document.createDocumentFragment();

const browserList = [
    "Internet Explorer", 
    "Mozilla Firefox", 
    "Safari", 
    "Chrome", 
    "Opera"
];

browserList.forEach((e) => {
    let li = document.createElement("li");
    li.textContent = e;
    docfrag.appendChild(li);
});
ul.appendChild(docfrag);

事件節流

var searchTimeout = null;
$('#input').on('keyup', function(event) {
    //每次keyup時直接取消上次計時器，只有當keyup超過100ms時才執行handler
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        handler();
    }, 100);
});

盡早執行操作(DOMContentLoaded) 

window.addEventListener('load',function(){
　　// 頁面的全部資源全部渲染完
　　............
}) 
documnet.addEventListener('DOMContentLoaded',function(){
　　.....
　　// dom 渲染完即可執行,此時圖片和視頻可能§§還沒加載完
})