Javascript基礎知識體系化學習總結（十一）運行環境
一、頁面加載
1.運行環境這裏統稱爲瀏覽器。
2.頁面加載的內容：
（1）html代碼；
（2）媒體文件（如圖片、音頻等）；
（3）js、css
3.頁面加載的過程：
（1）DNS解析即域名解析成IP地址；
（2）發起TCP連接；
（3）發送http請求給服務器；
（4）服務器根據http請求返回報文，接收到這些報文後渲染整個頁面；
（5）結束連接
4.頁面渲染的過程：
（1）根據html代碼渲染成DOM樹；
（2）根據css代碼渲染出CSSOM樹；
（3）將兩棵樹整合成渲染樹Render樹；
（4）根據渲染樹渲染整個頁面；
（5）遇到script標籤則先執行js代碼再進行渲染；
（6）渲染完成
5.頁面加載和渲染舉例：
（1）css代碼應該放在head標籤裏面執行；
（2）js代碼應該放在body的最後；
（3）圖片加載不會阻塞頁面的加載和渲染；
（4）執行js代碼的時機最好選擇在DOMContentLoaded，此刻DOM渲染已經完成，沒有必要等到其它資源都加載完成再執行（即loaded）
二、性能優化
1.性能優化沒有正確的答案，一般是依據以空間換時間的原則儘可能的全面。大體上分爲加載的時候更快和渲染的時候更快兩方面入手。
2.加載更快：
（1）減少資源的體積：壓縮代碼，例如webpack進行代碼的打包壓縮再上線、雪碧圖；
（2）減少訪問次數：合併代碼、SSR服務端渲染、緩存；
（3）使用更快的網絡：CDN
3.渲染更快：
（1）css代碼寫在head，js代碼放在最後；
（2）儘早開始執行js代碼，用DOMContentLoaded觸發；
（3）圖片懶加載/預加載；
（4）對DOM查詢的結果進行緩存；
（5）頻繁的DOM操作，合併到一起一次性操作；
（6）防抖和節流
4.防抖和節流演示：
<!DOCTYPE html>
<html>
<head>
<title>防抖和節流</title>
</head>
<body>
<div>
<input type="text" id="input1">
</div>
<div id="div1" draggable = "true">
可拖拽
</div>
<script type="text/javascript">
function debounce(fn, delay = 500) { // 防抖函數，即在delay這個時間段沒有輸入內容我們纔會執行fn！
let timer = null // 定義在函數返回值外面，實現閉包，外面訪問不到timer，無法修改之，保證穩定執行
return function () {
if(timer) { // 已經有定時任務的時候就清除掉重新賦值
clearTimeout(timer)
}
timer = setTimeout(()=>{ // 重新賦值一個定時任務，並且指定延時的時間
fn.apply(this, arguments)
timer = null
},delay)
}
}
let input1 = document.getElementById('input1')
input1.addEventListener(
'keyup',
debounce(
function() {
console.log(input1.value)
},
400
)
)
function throttle(fn, delay = 500) { // 節流，就是在這個delay的時間段內有任務就繼續當前任務，後來者直接不管
let timer = null
return function () {
if(timer) {
return
}
timer = setTimeout(()=>{
fn.apply(this,arguments)
timer = null
},delay)
}
}
const div1 = document.getElementById('div1')
div1.addEventListener('drag',throttle(function(e){
console.log(e.offsetX, e.offsetY)
},1000))
</script>
</body>
</html>
三、安全
1.安全主要分爲兩個方面：XSS注入和XSRF跨域請求攻擊。
2.XSS注入就是在原本的代碼中插入一段<script>代碼，來執行一些惡意的操作，預防的方法就是<寫爲<,而>寫爲>，如此script代碼就會在頁面直接展示而不是執行了。
3.XSRF跨域請求攻擊，一般就是僞造請求，我們可以使用POST並且添加一些額外的驗證手段即可！
好了，這就是第11個模塊也是最後一個模塊了，js的基礎知識體系總結到這裏也就結束了，很高興有機會和大家一起分享自己的學習經歷，那麼我是O5，我們有緣的話，下次再見！