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 渲染完便可執行,此時圖片和視頻可能§§還沒加載完
})