8-1 介紹
一裹粤、問(wèn)題
- 瀏覽器就可以通過(guò)訪問(wèn)鏈接來(lái)得到頁(yè)面的內(nèi)容
- 通過(guò)繪制和渲染拯坟，顯示出頁(yè)面最終的樣子
- 整個(gè)過(guò)程蚊逢，我們需要考慮什么問(wèn)題
二、知識(shí)點(diǎn)
- 頁(yè)面加載過(guò)程
- 性能優(yōu)化
- 安全性
8-2 頁(yè)面加載過(guò)程
題目
- 從輸入url得到html的詳細(xì)過(guò)程
- window.load 和 DOMContentLoaded 的區(qū)別
知識(shí)點(diǎn)
- 加載資源的形式
輸入url（或者跳轉(zhuǎn)頁(yè)面）加載html
http://coding.m.imooc.com
加載 html 中的靜態(tài)資源
<script src="/static/js/jquery.js"></script>
- 加載一個(gè)資源的過(guò)程
瀏覽器根據(jù)dns服務(wù)器得到域名的ip地址
向這個(gè)ip的機(jī)器發(fā)送http請(qǐng)求
瀏覽器收到果善、處理并返回http請(qǐng)求
瀏覽器得到返回內(nèi)容
- 瀏覽器渲染頁(yè)面的過(guò)程
跟進(jìn)html結(jié)構(gòu)生成dom tree
根據(jù)css 生成 cssom
將dom 和cssom 整合形成 RenderTree
根據(jù)RenderTree 開(kāi)始渲染和展示
遇到<script>時(shí)，會(huì)執(zhí)行并阻塞渲染
- windwo.onload 和 DOMContentLoaded
window.addEventListener('load', function(){
// 頁(yè)面的全部資源加載完才會(huì)執(zhí)行系谐，包括圖片巾陕、視頻等
})
windw.addEventListener('DOMContentLoaded', function(){
// DOM 渲染完成即可執(zhí)行，此時(shí)圖片蔚鸥、視頻還可能沒(méi)有加載完
})
8-3 性能優(yōu)化
原則
- 多使用內(nèi)存惜论、緩存或者其他方法
- 減少cpu計(jì)算，較少網(wǎng)絡(luò)
從哪里入手
1.加載頁(yè)面和靜態(tài)資源
- 靜態(tài)資源的壓縮合并
- 靜態(tài)資源緩存
- 使用cdn讓資源加載更快
- 使用ssr后端渲染止喷，數(shù)據(jù)直接輸出到html中
2. 頁(yè)面渲染
- css放前面馆类，js放后面
- 懶加載（圖片懶加載，下拉加載更多）
- 減少dom查詢弹谁，對(duì)dom查詢做緩存
- 減少dom操作乾巧，多個(gè)操作盡量合并在一起
- 事件節(jié)流
- 盡早執(zhí)行操作（如 DOMContentLoaded）
例子
1.資源合并
<script src="a.js"></sceript>
<script src="b.js"></sceript>
<script src="c.js"></sceript>
<script src="abc.js"></sceript>
2.緩存
// 通過(guò)鏈接名稱控制緩存
<script src="abc_1.js">
// 只有內(nèi)容改變的時(shí)候句喜，鏈接名稱才會(huì)改變
<script src="abc_2.js">
3.使用ssr后端渲染
現(xiàn)在vue react 提出這樣的概念
其實(shí)jsp php asp 都屬于后端渲染
好處是直接渲染數(shù)據(jù)，不用ajax 請(qǐng)求數(shù)據(jù)
4.懶加載
<img id = "img1" src="preview.png" data-realsrc="abc.png">
<script type="text/javascript">
var img1 = docuemnt.getElemntById('img1')
img1.src = img1.getAttribute('data-realsrc')
</script>
5.緩存dom查詢
// 未緩存 dom 查詢
var i
for(i=0; i< docuemnt.getElementsByTagName('p').length, i++){
// todo
}
// 緩存了dom查詢的
var plist = docuemnt.getElementsByTagName('p')
var i
for(i=0; i<plist.length; i++){
// todo
}
6.合并dom插入
//要插入的10個(gè)li標(biāo)簽
var frag = docuemnt.createDocumentFragment();
var x, li;
for(x=0; x<10; x++){
li = docuemnt.createElement("li")
li.innerHTML = "list item" + x;
frag.appendchild(li);
}
listNode.appendChild(frag);
7.事件節(jié)流
var textarea = docuemnt.getElementById('text')
var timeoutId
textarea.addEventLister('keyup', function(){
if(timeoutId){
clearTime(timeoutId)
}
timeoutId = setTimeout(function(){
// 觸發(fā)change事件
},100)
})
8.盡早操作
window.addEventListener('load', function(){
// 頁(yè)面的全部資源加載完才會(huì)執(zhí)行沟于，包括圖片咳胃、視頻等
})
windw.addEventListener('DOMContentLoaded', function(){
// DOM 渲染完成即可執(zhí)行，此時(shí)圖片旷太、視頻還可能沒(méi)有加載完
})
8-4 安全性
知識(shí)點(diǎn)
- xss 跨站請(qǐng)求攻擊
- xsrf 跨站請(qǐng)求偽造
xss
1.在新浪微博寫一篇文章展懈，同時(shí)偷偷插入一鍛<script>
2.攻擊代碼中，獲取cookie供璧，發(fā)送自己的服務(wù)器
3.發(fā)布博客存崖，有人查看博客內(nèi)容
4.會(huì)把查看者的cookie發(fā)送到攻擊者的服務(wù)器
解決
前端替換關(guān)鍵詞，例如替換 < 為 < >為 >
后端替換
xsrf
- 你已登錄一個(gè)購(gòu)物網(wǎng)站睡毒，正在瀏覽商品
- 該網(wǎng)站付費(fèi)接口為 xx.com/pay?id=100 但是沒(méi)有任何驗(yàn)證
- 然后呢收到一封郵件来惧，隱藏著<img src=xx.com/pay?id=100>
- 你查看郵件的時(shí)候，就已經(jīng)悄悄的付費(fèi)購(gòu)買了
解決
增加驗(yàn)證流程演顾，如輸入指紋供搀，密碼、短信驗(yàn)證碼
