- 從輸入url到得到html的詳細(xì)過程
- window.onload 和document.DOMContentLoaded的區(qū)別
頁面加載
加載資源的形式
輸入url加載html
加載html中的靜態(tài)資源
加載一個(gè)資源的過程
瀏覽器根據(jù)DNS服務(wù)器得到域名的IP地址
向這個(gè)IP的機(jī)器發(fā)送http請(qǐng)求
服務(wù)器收到,處理并返回http請(qǐng)求
瀏覽器得到返回內(nèi)容
瀏覽器渲染頁面的過程
根據(jù)HTML結(jié)構(gòu)生成DOM Tree
根據(jù)CSS生成CSSOM
將DOM和CSSOM整合形成RenderTree
根據(jù)RenderTree開始渲染和展示
遇到<script>時(shí),會(huì)執(zhí)行并阻塞渲染
window.onload & window.DOMContentLoaded
jquery,zepto等都是用的DOMContentLoaded這種方式
window.addEventListener('load',function(){
//頁面的全部資源加載完才會(huì)執(zhí)行,包括圖片視頻等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完即可執(zhí)行,此時(shí)圖片視頻還可能沒有加載完
})
性能優(yōu)化
- 多使用內(nèi)存,緩存或者其他方法
- 減少CPU計(jì)算,減少網(wǎng)絡(luò)
從哪里入手
加載頁面和靜態(tài)資源
頁面渲染
加載資源優(yōu)化
- 靜態(tài)資源的合并壓縮,減少請(qǐng)求數(shù).
- 靜態(tài)資源的緩存.
- 使用CDN讓資源加載更快
- 使用SSR后端渲染,數(shù)據(jù)直接輸出到HTML中
渲染優(yōu)化
- CSS放前面,JS放后面
- 懶加載(圖片懶加載,下拉加載更多)
- 減少DOM查詢,對(duì)DOM查詢做緩存
- 減少DOM操作,多個(gè)操作盡量合并在一起執(zhí)行,
- 事件節(jié)流
- 盡早執(zhí)行操作
Demo
合并
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="abc.js"></script>
緩存
//通過鏈接名稱控制緩存
<script type="text/javascript" src="abc_2.js"></script>
內(nèi)容改變,名稱改變
<script type="text/javascript" src="abc_2.js"></script>
懶加載
<script type="text/javascript">
var img1 = document.getElementById('img1')
img1.src = img1.getAttribute('data-realsrc')
</script>
減少DOM查詢及操作
這個(gè)就不寫了...
事件節(jié)流
var textarea = document.getElementById('text')
var timeoutId
textarea.addEventListener('keyup',function(){
if(timeoutId){
clearTimeout(timeoutId)
}
timeoutId = setTimeout(function(){
//觸發(fā)change事件
},100)
})
盡早操作
window.addEventListener('load',function(){
//頁面的全部資源加載完才會(huì)執(zhí)行,包括圖片視頻等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完即可執(zhí)行,此時(shí)圖片視頻還可能沒有加載完
})
