前端基礎百篇----面試重點 (注:我只是總結一下,大部分答案來源第三方,另一下過於基礎的不列) 持續更新ing

注: 原本不想寫答案的,畢竟大部分是複製的,想一想仍是寫吧.另外會分享部分我收藏的網站.

一 : 從瀏覽器地址欄輸⼊url到顯示⻚⾯的步驟

www.jianshu.com/p/b7207077f…

能夠看看這位大佬的文章.

主要了解 TCP三次握手 四次揮手,DNS查詢 瀏覽器渲染機制.

二 : HTTP狀態碼及其含義

1XX ：信息狀態碼
複製代碼

100 Continue 繼續，⼀般在發送 post 請求時，已發送了 http header 以後服務端 將返回此信息，表示確認，以後發送具體參數信息

2XX ：成功狀態碼

200 OK 正常返回信息

201 Created 請求成功而且服務器建立了新的資源

202 Accepted 服務器已接受請求，但還沒有處理

3XX ：重定向

301 Moved Permanently 請求的⽹⻚已永久移動到新位置。

302 Found 臨時性重定向。

303 See Other 臨時性重定向，且老是使⽤ GET 請求新的 URI 。

304 Not Modified ⾃從上次請求後，請求的⽹⻚未修改過。

4XX ：客戶端錯誤

400 Bad Request 服務器⽆法理解請求的格式，客戶端不該當嘗試再次使⽤相同的內 容發起請求。

401 Unauthorized 請求未受權。

403 Forbidden 禁⽌訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。

5XX: 服務器錯誤

500 Internal Server Error 最常⻅的服務器端錯誤。

503 Service Unavailable 服務器端暫時⽆法處理請求（多是過載或維護）。

三 語義化的理解

⽤正確的標籤作正確的事情！

HTML 語義化就是讓⻚⾯的內容結構化，便於對瀏覽器、搜索引擎解析； 在沒有樣式 CSS

狀況下也以⼀種⽂檔格式顯示，而且是容易閱讀的。 搜索引擎的爬⾍依賴於標記來肯定上下⽂和各個關鍵字的權重，利於 SEO 。

使閱讀源代碼的⼈對⽹站更容易將⽹站分塊，便於閱讀維護理解

四 請描述⼀下 cookies ， sessionStorage 和 localStorage 的區別？

cookie 是⽹站爲了標示⽤戶身份⽽儲存在⽤戶本地終端（Client Side）上的數據（一般 通過加密）

cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回 傳遞

sessionStorage 和 localStorage 不會⾃動把數據發給服務器，僅在本地保存 存儲⼤⼩：

cookie 數據⼤⼩不能超過4k

sessionStorage 和 localStorage 雖然也有存儲⼤⼩的限制，但⽐ cookie ⼤得 多，能夠達到5M或更⼤

有期時間：

localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除⾮主動刪除數據

sessionStorage 數據在當前瀏覽器窗⼝關閉後⾃動刪除

cookie 設置的 cookie 過時時間以前⼀直有效，即便窗⼝或瀏覽器關閉

能夠說下cookie的缺點 :

不安全,大小4k可能被禁用和刪除

能夠說下indexDB .

五 div+css的佈局較table佈局有什麼優勢？

改版的時候更⽅便 只要改 css ⽂件。 ⻚⾯加載速度更快、結構化清晰、⻚⾯顯示簡潔。 表現與結構相分離。 易於優化（ seo ）搜索引擎更友好，排名更容易靠前。

六 你能描述⼀下漸進加強和優雅降級之間的不一樣嗎

漸進加強：針對低版本瀏覽器進⾏構建⻚⾯，保證最基本的功能，而後再針對⾼級瀏覽器

進⾏效果、交互等改進和追加功能達到更好的⽤戶體驗。

優雅降級：⼀開始就構建完整的功能，而後再針對低版本瀏覽器進⾏兼容。

七 css sprite是什麼,有什麼優缺點

概念：將多個⼩圖⽚拼接到⼀個圖⽚中。經過 background-position 和元素尺⼨調節需 要顯示的背景圖案。

優勢：減小 HTTP 請求數，極⼤地提⾼⻚⾯加載速度 增長圖⽚信息重複度，提⾼壓縮⽐，減小圖⽚⼤⼩

更換⻛格⽅便，只需在⼀張或⼏張圖⽚上修改顏⾊或樣式便可實現 缺點：圖⽚合併麻煩 維護麻煩，修改⼀個圖⽚可能須要重新佈局整個圖⽚，樣式

八 display: none; 與 visibility: hidden; 的區別 / vue v-if v-show 相似

我用本身的語言答一下吧

兩個都3不可見 主要區別 display: none; dom被移除了 , visiblity 你能夠理解爲隱身了.另外能夠繼承.而後你能夠扯上回流和重繪又能夠巴拉巴拉吹水了.

九 link 與 @import 的區別

1. link 是 HTML ⽅式， @import 是CSS⽅式
2. link 最⼤限度⽀持並⾏下載， @import 過多嵌套致使串⾏下載，出現 FOUC (⽂檔樣式 短暫失效)
3. 3. link 能夠經過 rel="alternate stylesheet" 指定候選樣式
4. 4. 瀏覽器對 link ⽀持早於 @import ，可使⽤ @import 對⽼瀏覽器隱藏樣式
5. 5. @import 必須在樣式規則以前，能夠在css⽂件中引⽤其餘⽂件
6. 6. 整體來講： link 優於 @import
7. 2和3必定要說到.另外利用@import對老瀏覽器的不支持能夠把一些樣式寫在@import 實現漸進加強.另外若是我沒記錯,mport引用的CSS會等到頁面所有被下載完再加載.

十 清除浮動的⼏種⽅式，各⾃的優缺點

⽗級 div 定義 height

結尾處加空 div 標籤 clear:both

⽗級 div 定義僞類 :after 和 zoom

⽗級 div 定義 overflow:hidden

⽗級 div 也浮動，須要定義寬度 結尾處加 br 標籤 clear:both

十一 display有哪些值？說明他們的做⽤

block 轉換成塊狀元素。

inline 轉換成⾏內元素。

none 設置元素不可⻅。

inline-block 象⾏內元素⼀樣顯示，但其內容象塊類型元素⼀樣顯示。

list-item 象塊類型元素⼀樣顯示，並添加樣式列表標記

table 此元素會做爲塊級表格來顯示

inherit 規定應該從⽗元素繼承 display 屬性的值

十二 PNG\GIF\JPG的區別及如何選

GIF

8 位像素， 256 ⾊

⽆損壓縮 ⽀持簡單動畫 ⽀持 boolean 透明 適合簡單動畫

JPEG

顏⾊限於 256

有損壓縮 可控制壓縮質量 不⽀持透明 適合照⽚

PNG

有 PNG8 和 truecolor PNG

PNG8 相似 GIF 顏⾊上限爲 256 ，⽂件⼩，⽀持 alpha 透明度，⽆動畫 適合圖標、背景、按鈕

通常做爲性能優化的一個點說...

十三 動畫

主要說下animation和transition的區別,另外你能說出window.requestAnimationFrame那麼你很棒,既然說出了這個,你又能夠說他能夠解決一下渲染10萬個dom元素不卡頓能夠用他

十四 垂直水平居中子元素

啪啦啪啦你應該說出至少四種

彈性啊,表格啊,絕對定位兩種啊

文字能夠text aline center ,line-height 啊

十五 重繪和迴流（重排）是什麼，如何避免？

DOM的變化影響到了元素的⼏何屬性（寬⾼）,瀏覽器從新計算元素的⼏何屬性，其餘元素 的⼏何 屬性和位置也會受到影響，瀏覽器須要從新構造渲染樹，這個過程稱爲重排，瀏覽器將受 到影響的部分 從新繪製到屏幕上的過程稱爲重繪。 引發重排的緣由有

添加或者刪除可⻅的DOM元素， 元素位置、尺⼨、內容改變， 瀏覽器⻚⾯初始化

瀏覽器窗⼝尺⼨改變，重排⼀定重繪，重繪不⼀定重排，

減小重繪和重排的⽅法：

不在佈局信息改變時作 DOM 查詢

使⽤ cssText 或者 className ⼀次性改變屬性

對於屢次重排的元素，如動畫，使⽤絕對定位脫離⽂檔流，讓他的改變不影響到其餘元素

十六 閉包

用個人話來講就是函數中的函數,孩子拿着父親的變量出來溜達溜達

好處避免全局污染,可以實現封裝和緩存

壞處,消耗內存,可能會形成內存泄露

十七 JavaScript原型，原型鏈 ?

每一個函數都有一個Protype屬性,這個屬性是一個對象,叫作原型對象.原型對象上又有一個construction屬性,construction屬性又指向原型對象的調用者.

當訪問一個對象時,訪問自身的__proto__,若是沒找到,則訪問父級的__proto__,直到OBject.prototype.__proto__爲null爲止..

十八 請解釋什麼是事件代理

主要談到事件冒泡.還有e.target,節約內存,減小事件註冊.

十九 Javascript如何實現繼承？

能夠去看 juejin.im/post/5dac5d…

二十 new操做符具體⼲了什麼呢?

1.建立一個空對象

2. 綁定原型關係
3. 執行函數並綁定this
4. 隱式返回一個對象,若是return的不是一個對象則返回建立的對象,若是return 對象則返回的是return的對象

二十一 如何解決跨域問題

經過jsonp跨域

document.domain + iframe跨域

nodejs中間件代理跨域

vue proxy

還有不少 詳情百度

二十二 異步加載JS的⽅式有哪些？

瞭解async 和defer的區別

二十二 常⻅web安全及防禦原理

sql 注⼊原理 就是經過把 SQL 命令插⼊到 Web 表單遞交或輸⼊域名或⻚⾯請求的查詢字符串，最終 達到欺騙服務器執⾏惡意的SQL命令 總的來講有如下⼏點 永遠不要信任⽤戶的輸⼊，要對⽤戶的輸⼊進⾏校驗，能夠經過正則表達式，或限制⻓ 度，對單引號和雙 "-" 進⾏轉換等 永遠不要使⽤動態拼裝SQL，可使⽤參數化的 SQL 或者直接使⽤存儲過程進⾏數據查 詢存取 永遠不要使⽤管理員權限的數據庫鏈接，爲每一個應⽤使⽤單獨的權限有限的數據庫鏈接 不要把機密信息明⽂存放，請加密或者 hash 掉密碼和敏感的信息 XSS原理及防範 Xss(cross-site scripting) 攻擊指的是攻擊者往 Web ⻚⾯⾥插⼊惡意 html 標籤或 者 javascript 代碼。⽐如：攻擊者在論壇中放⼀個看似安全的連接，騙取⽤戶點擊後， 竊取 cookie 中的⽤戶私密信息；或者攻擊者在論壇中加⼀個惡意表單，當⽤戶提交表單 的時候，卻把信息傳送到攻擊者的服務器中，⽽不是⽤戶本來覺得的信任站點 XSS防範⽅法 ⾸先代碼⾥對⽤戶輸⼊的地⽅和變量都須要仔細檢查⻓度和對 」<」,」>」,」;」,」’」 等字符 作過濾；其次任何內容寫到⻚⾯以前都必須加以encode，避免不⼩⼼把 html tag 弄出 來。這⼀個層⾯作好，⾄少能夠堵住超過⼀半的XSS 攻擊 XSS與CSRF有什麼區別嗎？ XSS 是獲取信息，不須要提早知道其餘⽤戶⻚⾯的代碼和數據包。 CSRF 是代替⽤戶完成 指定的動做，須要知道其餘⽤戶⻚⾯的代碼和數據包。要完成⼀次 CSRF 攻擊，受害者必 須依次完成兩個步驟 登陸受信任⽹站 A ，並在本地⽣成 Cookie 在不登出 A 的狀況下，訪問危險⽹站 B CSRF的防護

服務端的 CSRF ⽅式⽅法不少樣，但總的思想都是⼀致的，就是在客戶端⻚⾯增長僞隨機 數 經過驗證碼的⽅法

emmmm 這玩意建議本身寫個代碼感覺一下,沒有代碼徹底不知道在說什麼..

二十三 ⽤過哪些設計模式？

www.cnblogs.com/imwtr/p/945…

二十四 說說你對promise的瞭解

沒什麼好說的,本身寫一下promise源碼 .就算寫不出來,講的時候也能夠重源碼哪裏扯點犢子.通常不是大公司也不會叫你寫.

有機會的話專門寫一篇文章寫一下。

二十五 談⼀談箭頭函數與普通函數的區別？

函數體內的 this 對象，就是定義時所在的對象，⽽不是使⽤時所在的對象 不能夠看成構造函數，也就是說，不可使⽤ new 命令，不然會拋出⼀個錯誤

不可使⽤ arguments 對象，該對象在函數體內不存在。

若是要⽤，能夠⽤ Rest 參數 代替不可使⽤ yield 命令，

所以箭頭函數不能⽤做 Generator 函數

匿名函數,沒有this,使用父級this,不能夠改變this

二十六 談⼀談函數中this的指向

emmm 就正常來.就好了

其實我想說的是,你能夠說一下es6的雙冒號語法改變this .

二十七 數組去重

本身百度四種以上吧

二十八 防抖和節流

不會的百度一下代碼 .性能優化的時候也能夠扯一下,就10幾行代碼

二十九 說說 event loop

這個詳情本身百度吧 ,必定要掌握啊

總結一下就是執行一個宏任務執行全部微任務 再執行一個宏任務,再執行全部微任務.

三十 說⼀下瀏覽器的緩存機制

瀏覽器緩存機制有兩種，⼀種爲強緩存，⼀種爲協商緩存 對於強緩存，瀏覽器在第⼀次請求的時候，會直接下載資源，而後緩存在本地，第⼆次請 求的時候，直接使⽤緩存。

對於協商緩存，第⼀次請求緩存且保存緩存標識與時間，重複請求向服務器發送緩存標識 和最後緩存時間，服務端進⾏校驗，若是失效則使⽤緩存 協商緩存相關設置

Exprires ：服務端的響應頭，第⼀次請求的時候，告訴客戶端，該資源何時會過 期。 Exprires 的缺陷是必須保證服務端時間和客戶端時間嚴格同步。

Cache-control：max-age ：表示該資源多少時間後過時，解決了客戶端和服務端時間必 須同步的問題， If-None-Match/ETag ：緩存標識，對⽐緩存時使⽤它來標識⼀個緩存，第⼀次請求的時 候，服務端會返回該標識給客戶端，客戶端在第⼆次請求的時候會帶上該標識與服務端進 ⾏對⽐並返回 If-None-Match 標識是否表示匹配。

Last-modified/If-Modified-Since ：第⼀次請求的時候服務端返回 Last-modified

代表請求的資源上次的修改時間，第⼆次請求的時候客戶端帶上請求頭 If-ModifiedSince ，表示資源上次的修改時間，服務端拿到這兩個字段進⾏對⽐