2019前端面試知識點彙總

来源:https://www.cnblogs.com/7Ezreal/archive/2019/12/04/11981103.html
-Advertisement-
Play Games

前言：最近在找工作，自己整理了一些前端面試知識點，在此與大家分享一下！ 1.前端需要註意哪些 SEO： 合理的 title、description、keywords：搜索對著三項的權重逐個減小，title 值強調重點即可，重要關鍵詞出現不要超過 2 次，而且要靠前，不同頁面 title 要有所不同； ...


前言：最近在找工作，自己整理了一些前端面試知識點，在此與大家分享一下！

1.前端需要註意哪些 SEO：
合理的 title、description、keywords：搜索對著三項的權重逐個減小，title 值強調重點即可，重要關鍵詞出現不要超過 2 次，而且要靠前，不同頁面 title 要有所不同；description 把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面 description 有所不同；keywords 列舉出重要關鍵詞即可
語義化的 HTML 代碼，符合 W3C 規範：語義化代碼讓搜索引擎容易理解網頁
重要內容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取
重要內容不要用 js 輸出：爬蟲不會執行 js 獲取內容
少用 iframe：搜索引擎不會抓取 iframe 中的內容
非裝飾性圖片必須加 alt
提高網站速度：網站速度是搜索引擎排序的一個重要指標

2.<img>的title和alt有什麼區別：
title是global attributes之一，通常當滑鼠滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片無法載入時顯示，搜索引擎會重點分析。

3.什麼是 web 語義化,有什麼好處：
web 語義化是指通過 HTML 標記表示頁麵包含的信息，包含了 HTML 標簽的語義化和 css 命名的語義化。 HTML 標簽的語義化是指：通過使用包含語義的標簽（如 h1-h6）恰當地表示文檔結構 css 命名的語義化是指：為 html 標簽添加有意義的 class，id 補充未表達的語義：
去掉樣式後頁面呈現清晰的結構
盲人使用讀屏器更好地閱讀
搜索引擎更好地理解頁面，有利於收錄
便團隊項目的可持續運作及維護

4.HTTP method
一臺伺服器要與 HTTP1.1 相容，只要為資源實現GET和HEAD方法即可
GET是最常用的方法，通常用於請求伺服器發送某個資源。
HEAD與 GET 類似，但伺服器在響應中值返迴首部，不返回實體的主體部分
PUT讓伺服器用請求的主體部分來創建一個由所請求的 URL 命名的新文檔，或者，如果那個 URL 已經存在的話，就用乾這個主體替代它
POST起初是用來向伺服器輸入數據的。實際上，通常會用它來支持 HTML 的表單。表單中填好的數據通常會被送給伺服器，然後由伺服器將其發送到要去的地方。
TRACE會在目的伺服器端發起一個環回診斷，最後一站的伺服器會彈回一個 TRACE 響應併在響應主體中攜帶它收到的原始請求報文。TRACE 方法主要用於診斷，用於驗證請求是否如願穿過了請求/響應鏈。
OPTIONS方法請求 web 伺服器告知其支持的各種功能。可以查詢伺服器支持哪些方法或者對某些特殊資源支持哪些方法。
DELETE請求伺服器刪除請求 URL 指定的資源

5.從瀏覽器地址欄輸入 url 到顯示頁面的步驟(以 HTTP 為例)
在瀏覽器地址欄輸入 URL
瀏覽器查看緩存，如果請求資源在緩存中並且新鮮，跳轉到轉碼步驟
如果資源未緩存，發起新請求
如果已緩存，檢驗是否足夠新鮮，足夠新鮮直接提供給客戶端，否則與伺服器進行驗證。
檢驗新鮮通常有兩個 HTTP 頭進行控制Expires和Cache-Control：
HTTP1.0 提供 Expires，值為一個絕對時間表示緩存新鮮日期
HTTP1.1 增加了 Cache-Control: max-age=,值為以秒為單位的最大新鮮時間
瀏覽器解析 URL獲取協議，主機，埠，path
瀏覽器組裝一個 HTTP（GET）請求報文
瀏覽器獲取主機 ip 地址
打開一個 socket 與目標 IP 地址，埠建立 TCP 鏈接，三次握手如下：

客戶端發送一個 TCP 的SYN=1，Seq=X的包到伺服器埠
伺服器發回SYN=1， ACK=X+1， Seq=Y的響應包
客戶端發送ACK=Y+1， Seq=Z

TCP 鏈接建立後發送 HTTP 請求
伺服器接受請求並解析，將請求轉發到服務程式，如虛擬主機使用 HTTP Host 頭部判斷請求的服務程式
伺服器檢查HTTP 請求頭是否包含緩存驗證信息如果驗證緩存新鮮，返回304等對應狀態碼
處理程式讀取完整請求並準備 HTTP 響應，可能需要查詢資料庫等操作
伺服器將響應報文通過 TCP 連接發送回瀏覽器
瀏覽器接收 HTTP 響應，然後根據情況選擇關閉 TCP 連接或者保留重用，關閉 TCP 連接的四次握手如下：

主動方發送Fin=1， Ack=Z， Seq= X報文
被動方發送ACK=X+1， Seq=Z報文
被動方發送Fin=1， ACK=X， Seq=Y報文
主動方發送ACK=Y， Seq=X報文

瀏覽器檢查響應狀態嗎：是否為 1XX，3XX， 4XX， 5XX，這些情況處理與 2XX 不同
如果資源可緩存，進行緩存
對響應進行解碼（例如 gzip 壓縮）
根據資源類型決定如何處理（假設資源為 HTML 文檔）
解析 HTML 文檔，構件 DOM 樹，下載資源，構造 CSSOM 樹，執行 js 腳本，這些操作沒有嚴格的先後順序，以下分別解釋
構建 DOM 樹：

解析過程中遇到圖片、樣式表、js 文件，啟動下載
構建CSSOM 樹：

根據 DOM 樹和 CSSOM 樹構建渲染樹:

從 DOM 樹的根節點遍歷所有可見節點，不可見節點包括：1）script,meta這樣本身不可見的標簽。2)被 css 隱藏的節點，如display: none
對每一個可見節點，找到恰當的 CSSOM 規則並應用
發佈可視節點的內容和計算樣式

js 解析如下：

瀏覽器創建 Document 對象並解析 HTML，將解析到的元素和文本節點添加到文檔中，此時document.readystate 為 loading
HTML 解析器遇到沒有 async 和 defer 的 script 時，將他們添加到文檔中，然後執行行內或外部腳本。這些腳本會同步執行，並且在腳本下載和執行時解析器會暫停。這樣就可以用 document.write()把文本插入到輸入流中。同步腳本經常簡單定義函數和註冊事件處理程式，他們可以遍歷和操作 script 和他們之前的文檔內容
當解析器遇到設置了async屬性的 script 時，開始下載腳本並繼續解析文檔。腳本會在它下載完成後儘快執行，但是解析器不會停下來等它下載。非同步腳本禁止使用 document.write()，它們可以訪問自己 script 和之前的文檔元素
當文檔完成解析，document.readState 變成 interactive
所有defer腳本會按照在文檔出現的順序執行，延遲腳本能訪問完整文檔樹，禁止使用 document.write()
瀏覽器在 Document 對象上觸發 DOMContentLoaded 事件
此時文檔完全解析完成，瀏覽器可能還在等待如圖片等內容載入，等這些內容完成載入並且所有非同步腳本完成載入和執行，document.readState 變為 complete,window 觸發 load 事件

顯示頁面（HTML 解析過程中會逐步顯示頁面）

6.HTTP request 報文結構是怎樣的
首行是Request-Line包括：請求方法，請求 URI，協議版本，CRLF（回車換行）
首行之後是若幹行請求頭，包括general-header，request-header或者entity-header，每個一行以 CRLF 結束
請求頭和消息實體之間有一個CRLF 分隔
根據實際請求需要可能包含一個消息實體

7.HTTP response 報文結構是怎樣的
首行是狀態行包括：HTTP 版本，狀態碼，狀態描述，後面跟一個 CRLF
首行之後是若幹行響應頭，包括：通用頭部，響應頭部，實體頭部
響應頭部和響應實體之間用一個 CRLF 空行分隔
最後是一個可能的消息實體

8.如何進行網站性能優化
content 方面
減少 HTTP 請求：合併文件、CSS 精靈、inline Image
減少 DNS 查詢：DNS 查詢完成之前瀏覽器不能從這個主機下載任何任何文件。方法：DNS 緩存、將資源分佈到恰當數量的主機名，平衡並行下載和 DNS 查詢
避免重定向：多餘的中間訪問
使 Ajax 可緩存
非必須組件延遲載入
未來所需組件預載入
減少 DOM 元素數量
將資源放到不同的域下：瀏覽器同時從一個域下載資源的數目有限，增加域可以提高並行下載量
減少 iframe 數量
不要 404

Server 方面
使用 CDN
添加 Expires 或者 Cache-Control 響應頭
對組件使用 Gzip 壓縮
配置 ETag
Flush Buffer Early
Ajax 使用 GET 進行請求
避免空 src 的 img 標簽

Cookie 方面
減小 cookie 大小
引入資源的功能變數名稱不要包含 cookie

css 方面
將樣式表放到頁面頂部
不使用 CSS 表達式
使用不使用@import
不使用 IE 的 Filter

Javascript 方面
將腳本放到頁面底部
將 javascript 和 css 從外部引入
壓縮 javascript 和 css
刪除不需要的腳本
減少 DOM 訪問
合理設計事件監聽器

圖片方面
優化圖片：根據實際顏色需要選擇色深、壓縮
優化 css 精靈
不要在 HTML 中拉伸圖片
保證 favicon.ico 小並且可緩存

移動方面
保證組件小於 25k
Pack Components into a Multipart Document

9.什麼是漸進增強
漸進增強是指在 web 設計時強調可訪問性、語義化 HTML 標簽、外部樣式表和腳本。保證所有人都能訪問頁面的基本內容和功能同時為高級瀏覽器和高帶寬用戶提供更好的用戶體驗。核心原則如下:

所有瀏覽器都必須能訪問基本內容
所有瀏覽器都必須能使用基本功能
所有內容都包含在語義化標簽中
通過外部 CSS 提供增強的佈局
通過非侵入式、外部 javascript 提供增強功能

10.web開發中會話跟蹤的方法有哪些
cookie
session
url重寫
隱藏input
ip地址

11.doctype是什麼,舉例常見doctype及特點
<!doctype>聲明必須處於HTML文檔的頭部，在<html>標簽之前，HTML5中不區分大小寫
<!doctype>聲明不是一個HTML標簽，是一個用於告訴瀏覽器當前HTMl版本的指令
現代瀏覽器的html佈局引擎通過檢查doctype決定使用相容模式還是標準模式對文檔進行渲染，一些瀏覽器有一個接近標準模型。
在HTML4.01中<!doctype>聲明指向一個DTD，由於HTML4.01基於SGML，所以DTD指定了標記規則以保證瀏覽器正確渲染內容
HTML5不基於SGML，所以不用指定DTD

12.如何進行網站性能優化
content方面：
減少HTTP請求：合併文件、CSS精靈、inline Image
減少DNS查詢：DNS查詢完成之前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分佈到恰當數量的主機名，平衡並行下載和DNS查詢
避免重定向：多餘的中間訪問
使Ajax可緩存
非必須組件延遲載入
未來所需組件預載入
減少DOM元素數量
將資源放到不同的域下：瀏覽器同時從一個域下載資源的數目有限，增加域可以提高並行下載量
減少iframe數量
不要404

Server方面：
使用CDN
添加Expires或者Cache-Control響應頭
對組件使用Gzip壓縮
配置ETag
Flush Buffer Early
Ajax使用GET進行請求
避免空src的img標簽

Cookie方面：
減小cookie大小
引入資源的功能變數名稱不要包含cookie

css方面：
將樣式表放到頁面頂部
不使用CSS表達式
不使用@import
不使用IE的Filter

Javascript方面：
將腳本放到頁面底部
將javascript和css從外部引入
壓縮javascript和css
刪除不需要的腳本
減少DOM訪問
合理設計事件監聽器

圖片方面：
優化圖片：根據實際顏色需要選擇色深、壓縮
優化css精靈
不要在HTML中拉伸圖片
保證favicon.ico小並且可緩存

移動方面：
保證組件小於25k
Pack Components into a Multipart Documentary

13.HTTP狀態碼及其含義
1XX：信息狀態碼
2XX：成功狀態碼
200 OK：請求成功，請求所希望的響應頭或數據體將隨此響應返回
3XX：重定向
4XX：客戶端錯誤
400 Bad Request:
401 Unauthorized:
402 Payment Required:
403 Forbidden:
404 Not Found:
5XX: 伺服器錯誤
500 Internal Server Error:

14.css sprite是什麼,有什麼優缺點
概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調節需要顯示的背景圖案。
優點：
減少HTTP請求數，極大地提高頁面載入速度
增加圖片信息重覆度，提高壓縮比，減少圖片大小
更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現
缺點：
圖片合併麻煩
維護麻煩，修改一個圖片可能需要從新佈局整個圖片，樣式

15.display: none;與visibility: hidden;的區別
聯繫：它們都能讓元素不可見
區別：
display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見
display: none;是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式
修改常規流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪。
讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

16.css hack原理及常用hack
原理：利用不同瀏覽器對CSS的支持和解析結果不一樣編寫針對特定瀏覽器樣式。常見的hack有1）屬性hack。2）選擇器hack。3）IE條件註釋

17.link與@import的區別
link是HTML方式， @import是CSS方式
link最大限度支持並行下載，@import過多嵌套導致串列下載，出現FOUC
link可以通過rel="alternate stylesheet"指定候選樣式
瀏覽器對link支持早於@import，可以使用@import對老瀏覽器隱藏樣式
@import必須在樣式規則之前，可以在css文件中引用其他文件
總體來說：link優於@important

18.PNG,GIF,JPG的區別及如何選擇正確的圖片格式
GIF:
8位像素，256色
無損壓縮
支持簡單動畫
支持boolean透明
適合簡單動畫
JPEG：
顏色限於256
有損壓縮
可控制壓縮質量
不支持透明
適合照片
PNG：
有PNG8和truecolor PNG
PNG8類似GIF顏色上限為256，文件小，支持alpha透明度，無動畫
適合圖標、背景、按鈕

19.什麼是FOUC?如何避免
Flash Of Unstyled Content：用戶定義樣式表載入之前瀏覽器使用預設樣式顯示文檔，用戶樣式載入渲染之後再從新顯示文檔，造成頁面閃爍。解決方法：把樣式表放到文檔的head

20.sessionStorage,localStorage,cookie區別
都會在瀏覽器端保存，有大小限制，同源限制
cookie會在請求時發送到伺服器，作為會話標識，伺服器可修改cookie；web storage不會發送到伺服器
cookie有path概念，子路徑可以訪問父路徑cookie，父路徑不能訪問子路徑cookie
有效期：cookie在設置的有效期內有效，預設為瀏覽器關閉；sessionStorage在視窗關閉前有效，localStorage長期有效，直到用戶刪除
共用：sessionStorage不能共用，localStorage在同源文檔之間共用，cookie在同源且符合path規則的文檔之間共用
localStorage的修改會促發其他文檔視窗的update事件
cookie有secure屬性要求HTTPS傳輸
瀏覽器不能保存超過300個cookie，單個伺服器不能超過20個，每個cookie不能超過4k。web storage大小支持能達到5M

20.javascript跨域通信
同源：兩個文檔同源需滿足
協議相同
功能變數名稱相同
埠相同
跨域通信：js進行DOM操作、通信時如果目標與當前視窗不滿足同源條件，瀏覽器為了安全會阻止跨域操作。跨域通信通常有以下方法
如果是log之類的簡單單項通信，新建<img>,<script>,<link>,<iframe>元素，通過src，href屬性設置為目標url。實現跨域請求
如果請求json數據，使用<script>進行jsonp請求
現代瀏覽器中多視窗通信使用HTML5規範的targetWindow.postMessage(data, origin);其中data是需要發送的對象，origin是目標視窗的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage發送來的數據，event.origin是發送視窗的origin，event.source是發送消息的視窗引用
內部伺服器代理請求跨域url，然後返回數據
跨域請求數據，現代瀏覽器可使用HTML5規範的CORS功能，只要目標伺服器返回HTTP頭部Access-Control-Allow-Origin: *即可像普通ajax一樣訪問跨域資源

21.javascript有哪幾種數據類型
六種基本數據類型

undefined
null
string
boolean
number
symbol(ES6)
一種引用類型

Object

22.什麼閉包,閉包有什麼用
閉包是在某個作用域內定義的函數，它可以訪問這個作用域內的所有變數。閉包作用域鏈通常包括三個部分：

函數本身作用域。
閉包定義時的作用域。
全局作用域。
閉包常見用途：

創建特權方法用於訪問控制
事件處理程式及回調


 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 好好理解一下JavaScript中的原型
    目錄 Table of Contents generated with "DocToc" "目錄" "一、參考書籍和數據" "二、原型，[[prototype]]和.prototype以及constructor" "三、原型鏈" "for...in和in操作符" "四、屬性設置和屏蔽" "五、Jav ...
  • 一些實用的Django+HTML設置
    一、關於引入變數 1.變數引入方法： {% block 塊名稱 %} <p>{{變數名}}<p> {% endblock %} 2.引入變數的值中標簽是否轉義： 不轉義： {% autoescape off %} ...HTML代碼... {% endautoescape %} 轉義： {% aut ...
  • CSS學習筆記-過渡模塊
    過渡模塊： 1、過渡三要素 1.1必須要有屬性發生變化 1.2必須告訴系統哪個屬性需要執行過渡效果 1.3必須告訴系統過渡效果持續時長 2、格式： div{ width:100px; height:100px; background-color:red; transition-property:wi ...
  • js-函數的三種創建方式
    1.聲明式 function fn() { //do something } 2.函數表達式 let fn = function () { //do something } 3.構造函數 function Person(name,age){ this.name=name this.age=age } ...
  • 禁止瀏覽器選中內容
    body{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select:none; -moz-user-select: none; -ms-user-select: none; user-select:none... ...
  • Web API---DOM---點擊操作---20個案例
    點擊操作: >事件: 就是一件事, 有觸發和響應, 事件源 按鈕被點擊,彈出對話框 按鈕 >事件源 點擊 >事件名字 被點了 >觸發了 彈框了 >響應 案例1：點擊按鈕彈出對話框 以下全部是理解，html和js代碼分離： <!DOCTYPE html> <html lang="en"> <head> ...
  • Web API---體驗DOM操作
    體驗DOM操作 1. <!--html代碼--> <input type="button" value="彈框" onclick="alert('哈哈，我又變漂亮了')" /> 2. <input type="button" value="顯示效果" id="btn" /> <script> doc ...
  • 本地存儲常用方式 localStorage, sessionStorage，cookie 的區別 和 伺服器存儲session
    本地存儲：把一些信息存儲到客戶端本地（主要目的有很多，其中有一個就是實現多頁面之間的信息共用） 1. 離線緩存(xxx.manifest) H5處理離線緩存還是存在一些硬傷的，所以真實項目中一般還是傳統的NATIVE APP來完成這件事情 2. localStorage / sessionStora ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類