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
更多相關文章
  • 目錄 Table of Contents generated with "DocToc" "目錄" "一、參考書籍和數據" "二、原型,[[prototype]]和.prototype以及constructor" "三、原型鏈" "for...in和in操作符" "四、屬性設置和屏蔽" "五、Jav ...
  • 一、關於引入變數 1.變數引入方法: {% block 塊名稱 %} <p>{{變數名}}<p> {% endblock %} 2.引入變數的值中標簽是否轉義: 不轉義: {% autoescape off %} ...HTML代碼... {% endautoescape %} 轉義: {% aut ...
  • 過渡模塊: 1、過渡三要素 1.1必須要有屬性發生變化 1.2必須告訴系統哪個屬性需要執行過渡效果 1.3必須告訴系統過渡效果持續時長 2、格式: div{ width:100px; height:100px; background-color:red; transition-property:wi ...
  • 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... ...
  • 點擊操作: >事件: 就是一件事, 有觸發和響應, 事件源 按鈕被點擊,彈出對話框 按鈕 >事件源 點擊 >事件名字 被點了 >觸發了 彈框了 >響應 案例1:點擊按鈕彈出對話框 以下全部是理解,html和js代碼分離: <!DOCTYPE html> <html lang="en"> <head> ...
  • 體驗DOM操作 1. <!--html代碼--> <input type="button" value="彈框" onclick="alert('哈哈,我又變漂亮了')" /> 2. <input type="button" value="顯示效果" id="btn" /> <script> doc ...
  • 本地存儲:把一些信息存儲到客戶端本地(主要目的有很多,其中有一個就是實現多頁面之間的信息共用) 1. 離線緩存(xxx.manifest) H5處理離線緩存還是存在一些硬傷的,所以真實項目中一般還是傳統的NATIVE APP來完成這件事情 2. localStorage / sessionStora ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...