1.從輸入url到得到HTML的詳細過程
2.window.onload和DOMContentLoaded的區別
3.性能優化的幾個示例
知識點#####
-
加載資源的形式
- 輸入url（或跳轉頁面）加載HTML
http://xxxxx.com - 加載HTML中的靜態資源
<script> <link> <img>等
- 輸入url（或跳轉頁面）加載HTML
-
加載一個資源的過程
- 瀏覽器根據DNS服務器得到域名的IP地址
- 向這個IP的機器發送http請求
- 服務器收到、處理并返回http請求
- 瀏覽器得到返回內容
-
瀏覽器渲染頁面的過程
- 根據HTML結構生成DOM Tree
- 根據CSS生成CSSOM
- 將DOM和CSSOM整合成RenderTree
- 根據RenderTree渲染和展示
- 遇到
<script>時，會執行并阻塞渲染，所以<script>放在<body>即將結束的位置因為js有權利改變dom結構，如果同時進行會發生沖突
-
性能優化
原則
多使用內存、緩存或其他方法減少CPU計算和網絡請求靜態資源的壓縮合并（如webpack的
plugins:[new webpack.optimize.UglifyJsPlugin()]）靜態資源緩存
使用CDN讓資源加載更快
使用SSR(server side rendering)后端渲染，數據直接輸出到HTML
渲染優化：
CSS放前面，JS放后面
懶加載（圖片懶加載、下拉加載更多）
減少DOM查詢，對DOM查詢做緩存
減少DOM操作，多個操作盡量合并在一起執行
事件節流
盡早執行操作（如DOMContentLoaded）
解題#####
1.從輸入url到得到HTML的詳細過程
- 瀏覽器根據DNS服務器得到域名的IP地址
- 向這個IP的機器發送http請求
- 服務器收到、處理并返回http請求
- 瀏覽器得到返回內容并渲染頁面
2.window.onload和DOMContentLoaded的區別
window.onload，頁面的全部資源加載完成才會執行，包括圖片視頻等
DOMContentLoaded，DOM渲染完即可執行，此時圖片視頻等可能還沒加載完
3.性能優化的幾個示例
- 合并js文件，減少請求次數
- 通過連接名稱控制緩存
<script src="abc_1.js"></script>只有內容改變時才更改名稱<script src="abc_2.js"></script> - 使用CDN
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> - 使用SSR后端渲染（Vue、React）
- 懶加載
<script type="text/javascript">
var img1=document.getElementById('img1')
img1.src=img1.setAttribute('data-realsrc')
</script>
- 緩存DOM查詢
var x=document.getElementBy...這樣可以避免多次執行DOM查詢 - 合并DOM插入
var listNode=document.getElementById('list')
//插入10個li標簽
var frag=document.createDocumentFragment();
var x,li
for(x=0;x<10;x++){
li=document.createElement('li')
li.innerHTML='List item'+x
frag.appendChild(li)
}
listNode.appendChild(frag)
- 事件節流
在快速操作時不執行事件，在停頓時執行，以減少計算次數
var textarea=document.getElementById('text')
var timeoutId
textarea.addEventListener('keyup',function(){
if(timeoutId){
clearTimeout(timeoutId)
}
timeoutId=setTimeout(function () {
//觸發change事件
}, 100);
})
- 盡早操作
window.addEventListener('load',function(){
//頁面的全部資源加載完成才會執行，包括圖片視頻等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完即可執行，此時圖片視頻等可能還沒加載完
})
