4.?SSR
5. 懶加載
6.?緩存DOM查詢
7.?盡早開始JS執(zhí)行
8. 防抖
9. 節(jié)流
三、安全
1.?XSS跨站請求攻擊
2.?XSRF跨站請求偽造
問題解答
1. 從輸入url到顯示出頁面的整個過程
2. Window.onload和DOMContentLoaded區(qū)別
3. 為何把css放在中
4. 為何把js放在最后
5. html中css寫在前js寫在后的優(yōu)點
6. 如何入手性能優(yōu)化
7. 防抖節(jié)流以及手寫代碼
8.?常見的Web前端攻擊方式有哪些
運行環(huán)境即瀏覽器（server端有nodejs）
下載頁面代碼，渲染出頁面，期間會執(zhí)行若干JS
要保證代碼在瀏覽器中：穩(wěn)定且高效
一、頁面加載過程
============
1. 資源的形式
（1）Html代碼
（2）媒體文件，如圖片，視頻等
（3）JavaScript css
2. 渲染過程
（1）根據(jù)HTML代碼生成DOM樹
（2）根據(jù)CSS代碼生成CSSOM（CSS對象模型）
（3）將DOM樹和CSSOM整合形成Render Tree（渲染樹）
（4）根據(jù)Render Tree渲染頁面
3. 頁面加載過程
（1）根據(jù)HTML代碼生成DOM樹
（2）根據(jù)CSS代碼生成CSSOM（CSS對象模型）
（3）將DOM樹和CSSOM整合形成Render Tree（渲染樹）
（4）根據(jù)Render Tree渲染頁面
（5）遇到
（6）直至把Render Tree渲染完成
4.?Window.onload和DOMContentLoaded
Window.addEventLiatener(‘load’, function() {
// 頁面的全部資源加載完才會執(zhí)行，包括圖片視頻等
})
Document.addEventListener(‘DONContentLoaded’, function() {
// DOM渲染完成即可執(zhí)行，此時圖片視頻可能還沒有加載完成
})
二、性能優(yōu)化
==========
是一個綜合問題，沒有標準答案，但是要求盡量全面
細節(jié)問題：手寫防抖、節(jié)流
1、性能優(yōu)化原則
（1）多使用內(nèi)存、緩存或者其他方法
（2）減少CPU計算量，減少網(wǎng)絡加載耗時（空間換時間）
2、如何入手性能優(yōu)化
加載更快
（1）減少資源體積：壓縮代碼
（2）減少訪問次數(shù)：合并代碼，SSR服務器端渲染，緩存
（3）使用更快的網(wǎng)絡：CDN
渲染更快/流暢
（1）CSS放在head，JS放在body最下面
（2）盡早開始執(zhí)行JS，用DOMContentLoaded觸發(fā)
（3）懶加載（圖片懶加載，上滑加更多）
（4）對DOM查詢進行緩存
（5）頻繁DOM操作，合并到一起插入DOM結(jié)構(gòu)
（6）節(jié)流throttle和防抖debounce
1.?資源合并
2.?緩存
靜態(tài)資源加載hash后綴，根據(jù)文件內(nèi)容計算hash
文件內(nèi)容不變，則hash不變，則url不變
Url和文件不變，則會自動觸發(fā)http緩存機制，返回304
3.?CDN
4.?SSR
服務器端渲染：將網(wǎng)頁和數(shù)據(jù)一起加載，一起渲染
非SSR（前后端分離）：先加載網(wǎng)頁，網(wǎng)頁Ajax加載數(shù)據(jù)，發(fā)送請求返回請求，返回之后再渲染數(shù)據(jù)
早期的JSP ASP PHP 現(xiàn)在的vue React SSR
5. 懶加載
場景：一個較長的新聞列表，有很多張圖片，不希望圖片一下子就加載完成，隨著滑動頁面圖片逐漸被加載出來。
實現(xiàn)方法：把圖片的路徑設(shè)置為preview.png預覽，而把真正的圖片地址放在data-realsrc里面。只有當瀏覽器判斷當圖片被滑動到露出屏幕時，再去加載圖片。
6.?緩存DOM查詢
7.?盡早開始JS執(zhí)行
8. 防抖
場景：監(jiān)聽一個輸入框，文字變化后觸發(fā)change事件。直接用keyup事件，則會頻繁觸發(fā)change事件
防抖：函數(shù)防抖（debounce）：當持續(xù)觸發(fā)事件時，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定的時間到來之前，又一次觸發(fā)了事件，就重新開始延時
用戶輸入結(jié)束或者暫停時，才會觸發(fā)change事件
//?防抖封裝
function?debounce(fn,?delay?=?500)?{
//?timer?是閉包中的
let?timer?=?null
//?返回一個函數(shù)
return?function?()?{
if?(timer)?{
clearTimeout(timer)
}
timer?=?setTimeout(()?=>?{
fn.apply(this,?arguments)
timer?=?null
},?delay)
}
}
input1.addEventListener(‘keyup’,?debounce(function?(e)?{
console.log(e.target)
console.log(input1.value)
},?600))
9. 節(jié)流
場景：拖拽一個元素時，要隨時拿到該元素被拖拽的位置
直接使用drag事件則會頻繁觸發(fā)，很容易導致卡頓
節(jié)流：函數(shù)節(jié)流（throttle）：當持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。
無論拖拽速度多快，都會每隔固定事件如100ms觸發(fā)一次
//?節(jié)流函數(shù)
function?throttle(fn,?delay?=?100)?{
let?timer?=?null
return?function?()?{
if?(timer)?{
return
}
timer?=?setTimeout(()?=>?{
fn.apply(this,?arguments)
timer?=?null
},?delay)
}
}
div1.addEventListener(‘drag’,?throttle(function?(e)?{
console.log(e.offsetX,?e.offsetY)
},?200))
自我介紹一下，小編13年上海交大畢業(yè)，曾經(jīng)在小公司待過，也去過華為、OPPO等大廠，18年進入阿里一直到現(xiàn)在。
深知大多數(shù)前端工程師，想要提升技能，往往是自己摸索成長或者是報班學習，但對于培訓機構(gòu)動則幾千的學費，著實壓力不小。自己不成體系的自學效果低效又漫長，而且極易碰到天花板技術(shù)停滯不前！
因此收集整理了一份《2024年Web前端開發(fā)全套學習資料》，初衷也很簡單，就是希望能夠幫助到想自學提升又不知道該從何學起的朋友，同時減輕大家的負擔。
既有適合小白學習的零基礎(chǔ)資料，也有適合3年以上經(jīng)驗的小伙伴深入學習提升的進階課程，基本涵蓋了95%以上前端開發(fā)知識點，真正體系化！
由于文件比較大，這里只是將部分目錄截圖出來，每個節(jié)點里面都包含大廠面經(jīng)、學習筆記、源碼講義、實戰(zhàn)項目、講解視頻，并且會持續(xù)更新！
如果你覺得這些內(nèi)容對你有幫助，可以掃碼獲取?。。▊渥ⅲ呵岸耍?/strong>
結(jié)尾
學習html5、css、javascript這些基礎(chǔ)知識，學習的渠道很多，就不多說了，例如，一些其他的優(yōu)秀博客。但是本人覺得看書也很必要，可以節(jié)省很多時間，常見的javascript的書，例如：javascript的高級程序設(shè)計，是每位前端工程師必不可少的一本書，邊看邊用，了解js的一些基本知識，基本上很全面了，如果有時間可以讀一些，js性能相關(guān)的書籍，以及設(shè)計者模式，在實踐中都會用的到。
資料領(lǐng)取方式：戳這里免費獲取文章來源：http://www.zghlxwxcb.cn/news/detail-850988.html
點，真正體系化！**
[外鏈圖片轉(zhuǎn)存中…(img-8kPRsFet-1712343130855)]
由于文件比較大，這里只是將部分目錄截圖出來，每個節(jié)點里面都包含大廠面經(jīng)、學習筆記、源碼講義、實戰(zhàn)項目、講解視頻，并且會持續(xù)更新！
如果你覺得這些內(nèi)容對你有幫助，可以掃碼獲?。。。▊渥ⅲ呵岸耍?/strong>
結(jié)尾
學習html5、css、javascript這些基礎(chǔ)知識，學習的渠道很多，就不多說了，例如，一些其他的優(yōu)秀博客。但是本人覺得看書也很必要，可以節(jié)省很多時間，常見的javascript的書，例如：javascript的高級程序設(shè)計，是每位前端工程師必不可少的一本書，邊看邊用，了解js的一些基本知識，基本上很全面了，如果有時間可以讀一些，js性能相關(guān)的書籍，以及設(shè)計者模式，在實踐中都會用的到。
資料領(lǐng)取方式：戳這里免費獲取
文章來源地址http://www.zghlxwxcb.cn/news/detail-850988.html
到了這里，關(guān)于快速搞定前端JS面試 -- 第十二章 運行環(huán)境 (頁面加載、性能優(yōu)化、安全)(1)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![C國演義 [第十二章]](https://imgs.yssmx.com/Uploads/2024/02/581669-1.png)
