国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<rp id="jz5sp"></rp>

<sup id="jz5sp"><meter id="jz5sp"><span id="jz5sp"></span></meter></sup>

<tbody id="jz5sp"></tbody>

<rp id="jz5sp"></rp>

2023年最新前端面試題匯總大全（含答案超詳細(xì)，HTML,JS,CSS匯總篇）-- 持續(xù)更新

2年前作者：夜斗(dou)分類(lèi)：Toy博客閱讀(37)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了2023年最新前端面試題匯總大全（含答案超詳細(xì)，HTML,JS,CSS匯總篇）-- 持續(xù)更新。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

專(zhuān)項(xiàng)練習(xí)–持續(xù)更新

HTML篇
CSS篇
JS篇
Vue篇
TypeScript篇
React篇
微信小程序篇
前端面試題匯總大全二（含答案超詳細(xì)，Vue，TypeScript，React，微信小程序，Webpack 匯總篇）-- 持續(xù)更新

一、HTML 篇

1.xhtml和html有什么區(qū)別

功能上
主要是XHTML可兼容各大瀏覽器、手機(jī)以及PDA，并且瀏覽器也能快速正確地編譯網(wǎng)頁(yè)

書(shū)寫(xiě)習(xí)慣
XHTML 元素必須被正確地嵌套，閉合，區(qū)分大小寫(xiě)，文檔必須擁有根元素

2.行內(nèi)元素有哪些？塊級(jí)元素有哪些？空(void)元素有那些？行內(nèi)元素和塊級(jí)元素有什么區(qū)別

行內(nèi)元素有：a b span img input select strong
塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
空元素：br、 hr img input link meta
行內(nèi)元素不可以設(shè)置寬高，不獨(dú)占一行
塊級(jí)元素可以設(shè)置寬高，獨(dú)占一行

3. 簡(jiǎn)述一下你對(duì) HTML 語(yǔ)義化的理解？

語(yǔ)義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）

語(yǔ)義化的好處：

在沒(méi)有CSS的情況下，頁(yè)面也能呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)

語(yǔ)義化使代碼更具可讀性，便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)

語(yǔ)義化有利于用戶(hù)體驗(yàn)（例如 title，label，alt屬性的靈活運(yùn)用）

語(yǔ)義化有利于SEO（和搜索引擎建立良好的溝通，有助于爬蟲(chóng)爬取更多的有效信息。爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重）

4. 標(biāo)簽上 title 與 alt 屬性的區(qū)別是什么？

alt 是給搜索引擎識(shí)別，在圖像無(wú)法顯示時(shí)的替代文本；
title 是關(guān)于元素的注釋信息，主要是給用戶(hù)解讀。
當(dāng)鼠標(biāo)放到文字或是圖片上時(shí)有 title 文字顯示。（因?yàn)?IE 不標(biāo)準(zhǔn)）在 IE 瀏覽器中 alt 起到了 title 的作用，變成文字提示。
在定義 img 對(duì)象時(shí)，將 alt 和 title 屬性寫(xiě)全，可以保證在各種瀏覽器中都能正常使用。

5. iframe的優(yōu)缺點(diǎn)？

優(yōu)點(diǎn)：

解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問(wèn)題

Security sandbox

并行加載腳本

缺點(diǎn)：

iframe會(huì)阻塞主頁(yè)面的Onload事件

即時(shí)內(nèi)容為空，加載也需要時(shí)間

沒(méi)有語(yǔ)意

使用iframe作為子應(yīng)用問(wèn)題：1.沒(méi)有路有記錄 2.樣式隔離嚴(yán)重

6. href 與 src？

href是Hypertext Reference的縮寫(xiě)，表示超文本引用。用來(lái)建立當(dāng)前元素和文檔之間的鏈接。常用的有：link、a

src是source的縮寫(xiě)，src的內(nèi)容是頁(yè)面必不可少的一部分，是引入。src指向的內(nèi)容會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在的位置。常用的有：img、script、iframe

href與src的區(qū)別

1、請(qǐng)求資源類(lèi)型不同：href 指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的聯(lián)系。在請(qǐng)求 src 資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔中，比如 JavaScript 腳本，img 圖片；

2、作用結(jié)果不同： src用于替換當(dāng)前元素；href用于在當(dāng)前文檔和引用資源之間建立聯(lián)系

3、瀏覽器解析方式不同：當(dāng)瀏覽器解析到src ，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等也如此，類(lèi)似于將所指向資源應(yīng)用到當(dāng)前內(nèi)容。這也是為什么建議把 js 腳本放在底部而不是頭部的原因。

7.什么是優(yōu)雅降級(jí)漸進(jìn)增強(qiáng)？

漸進(jìn)增強(qiáng)（Progressive Enhancement）：一開(kāi)始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，完成基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互、追加功能達(dá)到更好的體驗(yàn)

優(yōu)雅降級(jí)（Graceful Degradation）：一開(kāi)始就構(gòu)建站點(diǎn)的完整功能，然后針對(duì)瀏覽器測(cè)試和修復(fù)。比如一開(kāi)始使用 CSS3 的特性構(gòu)建了一個(gè)應(yīng)用，然后逐步針對(duì)各大瀏覽器進(jìn)行 hack 使其可以在低版本瀏覽器上正常瀏覽。

8.HTTP的幾種請(qǐng)求方法用途？

GET方法
發(fā)送一個(gè)請(qǐng)求來(lái)取得服務(wù)器上的某一資源

POST方法
向URL指定的資源提交數(shù)據(jù)或附加新的數(shù)據(jù)

PUT方法
跟POST方法很像，也是想服務(wù)器提交數(shù)據(jù)。但是，它們之間有不同。PUT指定了資源在服務(wù)器上的位置，而POST沒(méi)有

HEAD方法
只請(qǐng)求頁(yè)面的首部

DELETE方法
刪除服務(wù)器上的某資源

OPTIONS方法
它用于獲取當(dāng)前URL所支持的方法。如果請(qǐng)求成功，會(huì)有一個(gè)Allow的頭包含類(lèi)似“GET,POST”這樣的信息

TRACE方法
TRACE方法被用于激發(fā)一個(gè)遠(yuǎn)程的，應(yīng)用層的請(qǐng)求消息回路

CONNECT方法
把請(qǐng)求連接轉(zhuǎn)換到透明的TCP/IP通道

9.HTTP狀態(tài)碼都有哪些？

一、臨時(shí)響應(yīng)

100——客戶(hù)必須繼續(xù)發(fā)出請(qǐng)求
101——客戶(hù)要求服務(wù)器根據(jù)請(qǐng)求轉(zhuǎn)換HTTP協(xié)議版本
二、成功

200——服務(wù)器成功返回網(wǎng)頁(yè)
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請(qǐng)求收到，但返回信息為空
205——服務(wù)器完成了請(qǐng)求，用戶(hù)代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過(guò)的文件
206——服務(wù)器已經(jīng)完成了部分用戶(hù)的GET請(qǐng)求
三、重定向

300——請(qǐng)求的資源可在多處得到
301——?jiǎng)h除請(qǐng)求數(shù)據(jù)
302——在其他地址發(fā)現(xiàn)了請(qǐng)求數(shù)據(jù)
303——建議客戶(hù)訪(fǎng)問(wèn)其他URL或訪(fǎng)問(wèn)方式
304——客戶(hù)端已經(jīng)執(zhí)行了GET，但文件未變化
305——請(qǐng)求的資源必須從服務(wù)器指定的地址得到
306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用
307——申明請(qǐng)求的資源臨時(shí)性刪除
四、請(qǐng)求錯(cuò)誤

400——錯(cuò)誤請(qǐng)求，如語(yǔ)法錯(cuò)誤
401——請(qǐng)求授權(quán)失敗
402——保留有效ChargeTo頭響應(yīng)
403——請(qǐng)求不允許
404——請(qǐng)求的網(wǎng)頁(yè)不存在
405——用戶(hù)在Request-Line字段定義的方法不允許
406——根據(jù)用戶(hù)發(fā)送的Accept拖，請(qǐng)求資源不可訪(fǎng)問(wèn)
407——類(lèi)似401，用戶(hù)必須首先在代理服務(wù)器上得到授權(quán)
408——客戶(hù)端沒(méi)有在用戶(hù)指定的餓時(shí)間內(nèi)完成請(qǐng)求
409——對(duì)當(dāng)前資源狀態(tài)，請(qǐng)求不能完成
410——服務(wù)器上不再有此資源且無(wú)進(jìn)一步的參考地址
411——服務(wù)器拒絕用戶(hù)定義的Content-Length屬性請(qǐng)求
412——一個(gè)或多個(gè)請(qǐng)求頭字段在當(dāng)前請(qǐng)求中錯(cuò)誤
413——請(qǐng)求的資源大于服務(wù)器允許的大小
414——請(qǐng)求的資源URL長(zhǎng)于服務(wù)器允許的長(zhǎng)度
415——請(qǐng)求資源不支持請(qǐng)求項(xiàng)目格式
416——請(qǐng)求中包含Range請(qǐng)求頭字段，在當(dāng)前請(qǐng)求資源范圍內(nèi)沒(méi)有range指示值，請(qǐng)求也不包含If-Range請(qǐng)求頭字段
417——服務(wù)器不滿(mǎn)足請(qǐng)求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級(jí)服務(wù)器不能滿(mǎn)足請(qǐng)求
五、服務(wù)器錯(cuò)誤
500——服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤
501——服務(wù)器不支持請(qǐng)求的函數(shù)
502——服務(wù)器暫時(shí)不可用，有時(shí)是為了防止發(fā)生系統(tǒng)過(guò)載
503——服務(wù)器超時(shí)過(guò)載或暫停維修
504——關(guān)口過(guò)載，服務(wù)器使用另一個(gè)關(guān)口或服務(wù)來(lái)響應(yīng)用戶(hù)，等待時(shí)間設(shè)定值較長(zhǎng)
505——服務(wù)器不支持或拒絕支請(qǐng)求頭中指定的HTTP版本

10.DOCTYPE (?檔類(lèi)型) 的作? ？

DOCTYPE是HTML5中一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類(lèi)型聲明，它的目的是告訴瀏覽器（解析器）應(yīng)該以什么樣（html或xhtml）的文檔類(lèi)型定義來(lái)解析文檔，不同的渲染模式會(huì)影響瀏覽器對(duì) CSS 代碼甚? JavaScript 腳本的解析。它必須聲明在HTML?檔的第??。

瀏覽器渲染頁(yè)面的兩種模式：

CSS1Compat：標(biāo)準(zhǔn)模式（Strick mode），默認(rèn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁(yè)面。在標(biāo)準(zhǔn)模式中，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁(yè)面。

BackCompat：怪異模式(混雜模式)(Quick mode) ，瀏覽器使用自己的怪異模式解析渲染頁(yè)面。在怪異模式中，頁(yè)面以一種比較寬松的向后兼容的方式顯示。

11.前端需要注意哪些SEO？

合理的title、description，keywords：搜索引擎對(duì)著這項(xiàng)的權(quán)重逐個(gè)減小，title值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞出現(xiàn)不要超過(guò)2次，而且要靠前，不同頁(yè)面title要有所不同；description把頁(yè)面內(nèi)容高度概括，長(zhǎng)度合適，不可過(guò)分堆砌關(guān)鍵詞，不同頁(yè)面description有所不同；keywords列舉出重要關(guān)鍵詞即可

語(yǔ)義化的HTML代碼，符合W3C規(guī)范：語(yǔ)義化代碼讓搜索引擎容易理解網(wǎng)頁(yè)

重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對(duì)抓取長(zhǎng)度有限制，保證重要內(nèi)容一定會(huì)被抓取

重要內(nèi)容不要用js輸出：爬蟲(chóng)不會(huì)執(zhí)行js獲取內(nèi)容

少用iframe：搜索引擎不會(huì)抓取iframe中的內(nèi)容

非裝飾性圖片必須加alt

提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

12.script標(biāo)簽中defer和async的區(qū)別？

注意：如果沒(méi)有defer或async屬性，瀏覽器會(huì)立即加載并執(zhí)行相應(yīng)的腳本。它不會(huì)等待后續(xù)加載的文檔元素，讀取到就會(huì)開(kāi)始加載和執(zhí)行，這樣就阻塞了后續(xù)文檔的加載。

區(qū)別：

執(zhí)行順序：多個(gè)帶async屬性的標(biāo)簽，不能保證加載的順序。多個(gè)帶有defer屬性的標(biāo)簽會(huì)按照加載順序執(zhí)行

腳本是否并行： async屬性，表示后續(xù)文檔的加載和執(zhí)行與js腳本的加載和執(zhí)行是并行進(jìn)行的即文檔加載與js加載同時(shí)進(jìn)行。defer屬性，js腳本需要等待文檔所有元素解析完成后執(zhí)行，DOMContentLoaded事件觸發(fā)執(zhí)行之前。

13.常用meta標(biāo)簽有哪些？

meta標(biāo)簽由name和content屬性定義，用來(lái)描述網(wǎng)頁(yè)文檔的屬性

常用的meta標(biāo)簽：

charset：用來(lái)描述HTML文檔的編碼類(lèi)型

keywords:頁(yè)面關(guān)鍵詞

description:頁(yè)面描述

refresh:頁(yè)面重定向和刷新

viewport:適配移動(dòng)端，可以控制視口大小和比例
content參數(shù)詳情：

width viewport:寬度(數(shù)值/device-width)

height viewport:高度(數(shù)值/device-height)

initial-scale：初始縮放比例

maximum-scale:最大縮放比例

minimum-scale:最小縮放比例

user-scalable：是否允許用戶(hù)縮放(yes/no)

14.一次完整的HTTP事務(wù)是怎么一個(gè)過(guò)程?

瀏覽器的地址欄輸入U(xiǎn)RL并按下回車(chē)。

瀏覽器查找當(dāng)前URL是否存在緩存，并比較緩存是否過(guò)期。

DNS解析URL對(duì)應(yīng)的IP。

根據(jù)IP建立TCP連接（三次握手）。

HTTP發(fā)起請(qǐng)求。

服務(wù)器處理請(qǐng)求，瀏覽器接收HTTP響應(yīng)。

渲染頁(yè)面，構(gòu)建DOM樹(shù)。

關(guān)閉TCP連接（四次揮手）。

15.HTTP和HTTPS區(qū)別？

http:超文本傳輸協(xié)議，是一個(gè)客戶(hù)端和服務(wù)器端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)(TCP),用于從www服務(wù)器傳輸超文本到本地瀏覽器的傳輸協(xié)議，它可以使瀏覽器更高效，是網(wǎng)絡(luò)傳輸減少

https：可以理解為http的安全版，在http下加入SSL層。https協(xié)議的主要作用是建立一個(gè)安全的信息通道，來(lái)確保數(shù)組的傳輸，確保網(wǎng)站的真實(shí)性。

區(qū)別：

Https 協(xié)議需要 ca 證書(shū)，費(fèi)用較高。

http 是超文本傳輸協(xié)議，信息是明文傳輸，https 則是具有安全性的 ssl 加密傳輸協(xié)議。

使用不同的連接方式，端口也不同，一般而言，http 協(xié)議的端口為 80，https 的端口為443

http 的連接很簡(jiǎn)單，是無(wú)狀態(tài)的；HTTPS 協(xié)議是由 SSL+HTTP 協(xié)議構(gòu)建的可進(jìn)行加密傳輸、
身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比 http 協(xié)議安全。

16.HTTPS是如何實(shí)現(xiàn)加密？

HTTPS在傳輸數(shù)據(jù)之前需要客戶(hù)端（瀏覽器）與服務(wù)端（網(wǎng)站）之間進(jìn)行一次握手，在握手過(guò)程中將確立雙方加密傳輸數(shù)據(jù)的密碼信息。TLS/SSL協(xié)議不僅僅是一套加密傳輸?shù)膮f(xié)議，更是一件經(jīng)過(guò)藝術(shù)家精心設(shè)計(jì)的藝術(shù)品，TLS/SSL中使用了非對(duì)稱(chēng)加密，對(duì)稱(chēng)加密以及HASH算法

17.img的srcset屬性作用？

響應(yīng)式頁(yè)面中經(jīng)常用到根據(jù)屏幕密度設(shè)置不同的圖片。這時(shí)就用到img標(biāo)簽的srcset屬性，srcset屬性用于設(shè)置不同屏幕密度下，img加載圖片不同

18.WEB標(biāo)準(zhǔn)以及W3C標(biāo)準(zhǔn)是什么?

標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、使用外鏈css和js、結(jié)構(gòu)行為表現(xiàn)的分離

19.HTML5的離線(xiàn)存儲(chǔ)怎么使用？工作原理？

離線(xiàn)存儲(chǔ)指的是:在用戶(hù)沒(méi)有與因特網(wǎng)連接時(shí)，可以正常訪(fǎng)問(wèn)站點(diǎn)或應(yīng)用，在用戶(hù)與因特網(wǎng)連接時(shí)，更新用戶(hù)機(jī)器上的緩存文件。

原理: HTML5的離線(xiàn)存儲(chǔ)是基于一個(gè)新建的
.appcache 文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過(guò)這個(gè)文件上的解析清單離線(xiàn)存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下
來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線(xiàn)狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線(xiàn)存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。

使用方法：

創(chuàng)建一個(gè)和 html 同名的 manifest 文件，然后在頁(yè)面頭部加入 manifest 屬性

在cache .manifest文件中編寫(xiě)需要離線(xiàn)存儲(chǔ)的資源

CACHE:表示需要離線(xiàn)存儲(chǔ)的資源列表，由于包含 manifest 文件的頁(yè)面將被自動(dòng)離線(xiàn)存儲(chǔ)，所以不需要把頁(yè)面自身也列出來(lái)。

NETWORK:表示在它下面列出來(lái)的資源只有在在線(xiàn)的情況下才能訪(fǎng)問(wèn)，他們不會(huì)被離線(xiàn)存儲(chǔ)，所以在離線(xiàn)情況下無(wú)法使用這些資源。不過(guò)，如果在 CACHE 和 NETWORK
中有一個(gè)相同的資源，那么這個(gè)資源還是會(huì)被離線(xiàn)存儲(chǔ)，也就是說(shuō) CACHE 的優(yōu)先級(jí)更高

FALLBACK:表示如果訪(fǎng)問(wèn)第一個(gè)資源失敗，那么就使用第二個(gè)資源來(lái)替換他，比如上面這個(gè)文件表示的就是如果訪(fǎng)根目錄下任何一個(gè)資源失敗了，那么就去訪(fǎng)問(wèn)
offline.html

在離線(xiàn)狀態(tài)時(shí)，操作
window.applicationCache
進(jìn)行離線(xiàn)緩存的操作。

20.瀏覽器是怎么對(duì)HTML5的離線(xiàn)儲(chǔ)存資源進(jìn)行管理和加載的呢?

在線(xiàn)的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪(fǎng)問(wèn)app，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線(xiàn)存儲(chǔ)。如果已經(jīng)訪(fǎng)問(wèn)過(guò)app并且資源已經(jīng)離線(xiàn)存儲(chǔ)了，那么瀏覽器就會(huì)使用離線(xiàn)的資源加載頁(yè)面，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒(méi)有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線(xiàn)存儲(chǔ)。

離線(xiàn)的情況下，瀏覽器就直接使用離線(xiàn)存儲(chǔ)的資源。

21.label的作用是什么？

label標(biāo)簽來(lái)定義表單控件的關(guān)系: 當(dāng)用戶(hù)選擇label標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和label標(biāo)簽相關(guān)的表單控件上

22.Canvas和SVG區(qū)別？

Canvas：畫(huà)布，通過(guò)Javascript來(lái)繪制2D圖形，是逐像索進(jìn)行染的。其位置發(fā)生改變，就會(huì)重新進(jìn)行繪制。

SVG：縮放矢量圖形Scalable ecor Grdhics) 是基于可擴(kuò)展標(biāo)記語(yǔ)言XML描的2D圖的語(yǔ)言。SVG基于XML就意著SG DOM中的元素都是可用的，可以為某個(gè)元
附加Javascript事件處理器。在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

區(qū)別：

svg繪制出來(lái)的每一個(gè)圖形的元素都是獨(dú)立的DOM節(jié)點(diǎn)，SVG基于XML就意味著SVG DOM中的每個(gè)元素都是可用的，可以為某個(gè)元素附加Javascript事件處理器，能夠方便的綁定事件或用來(lái)修改。canvas輸出的是一整幅畫(huà)布

svg輸出的圖形是矢量圖形，后期可以修改參數(shù)來(lái)自由放大縮小，不會(huì)是出現(xiàn)鋸齒。而canvas輸出標(biāo)量畫(huà)布，就像一張圖片一樣，放大會(huì)失真或者鋸齒

23.head 標(biāo)簽有什么作用，其中什么標(biāo)簽必不可少?

標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。中的元索可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等。下面這些標(biāo)簽可用在 head 部分: ,,,

24.嚴(yán)格模式與混雜模式如何區(qū)分? 它們有何意義?

嚴(yán)格模式:又稱(chēng)為標(biāo)準(zhǔn)模式，指瀏覽器按照 w3C 標(biāo)準(zhǔn)解析代碼;

混雜模式: 又稱(chēng)怪異模式、兼容模式，是指瀏覽器用自己的方式解析代碼?；祀s模式通常模擬老式瀏覽器的行為，以防止老站點(diǎn)無(wú)法工作;

區(qū)分：

如果文檔包含嚴(yán)格的 DOCTYPE，那么它一般以嚴(yán)格模式呈現(xiàn) (嚴(yán)格 DTD 一一嚴(yán)格模式)

包含過(guò)渡 DTD 和 URI 的 DOCTYPE ，也以嚴(yán)格模式呈現(xiàn)，但有過(guò)渡 DTD 而沒(méi)有 URI
(統(tǒng)一資源標(biāo)識(shí)符，就是聲明最后的地址) 會(huì)導(dǎo)致頁(yè)面以混雜模式呈現(xiàn) (有
URI 的過(guò)渡 DTD --嚴(yán)格模式;沒(méi)有 URI 的過(guò)渡 DTD --混雜模式)

DOCTYPE 不存在或形式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn) (DTD不存在或者格式不正確一一混雜模式);

HTML5 沒(méi)有 DTD，因此也就沒(méi)有嚴(yán)格模式與混雜模式的區(qū)別，已經(jīng)盡可能大的實(shí)現(xiàn)了向后兼容(HTML5 沒(méi)有嚴(yán)格和混雜之分)。

25.瀏覽器亂碼的原因是什么？如何解決？

產(chǎn)生亂碼的原因：

網(wǎng)頁(yè)源代碼是 gbk 的編碼，而內(nèi)容中的中文字是 utf-8 編碼的，這樣瀏覽器打開(kāi)即會(huì)出現(xiàn) html 亂碼，反之也會(huì)出現(xiàn)亂碼:

html 網(wǎng)頁(yè)編碼是 gbk ，而程序從數(shù)據(jù)庫(kù)中調(diào)出呈現(xiàn)是 utf-8 編碼的內(nèi)容也會(huì)造成編碼亂碼;

瀏覽器不能自動(dòng)檢測(cè)網(wǎng)頁(yè)編碼，造成網(wǎng)頁(yè)亂碼,

解決辦法：

使用軟件編輯HTML網(wǎng)頁(yè)內(nèi)容;

如果網(wǎng)頁(yè)設(shè)置編碼是 gbk ，而數(shù)據(jù)庫(kù)儲(chǔ)存數(shù)據(jù)編碼格式是 UTF-8 ，此時(shí)需要程序查詢(xún)數(shù)據(jù)庫(kù)數(shù)據(jù)顯示數(shù)據(jù)前進(jìn)程序轉(zhuǎn)碼:

如果瀏覽器瀏覽時(shí)候出現(xiàn)網(wǎng)頁(yè)亂碼，在瀏覽器中找到轉(zhuǎn)換編碼的菜單進(jìn)行轉(zhuǎn)換。

26. 瀏覽器存儲(chǔ)技術(shù) ?

Cookie：是客戶(hù)端與服務(wù)器進(jìn)行會(huì)話(huà)使用的一個(gè)能夠在瀏覽器本地存儲(chǔ)的技術(shù)，能存放4kb數(shù)據(jù)，目的是辨別用戶(hù)身份

LocalStorage ：在HTML5中新增用來(lái)作為本地存儲(chǔ)來(lái)使用的，解決了cookie存儲(chǔ)空間不足的問(wèn)題(cookie中每條cookie的存儲(chǔ)空間為4k)

SessionStorage ： sessionStorage與localStorage的唯一一點(diǎn)區(qū)別就是localStorage屬于永久性存儲(chǔ)，而sessionStorage屬于當(dāng)會(huì)話(huà)結(jié)束的時(shí)候，sessionStorage中的鍵值對(duì)就會(huì)被清空。

27.CSS定位方式？

static：元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。

relative：元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute：元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類(lèi)型的框。

fixed：元素框的表現(xiàn)類(lèi)似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。

28.盡可能多的寫(xiě)出瀏覽器兼容性問(wèn)題？解決

不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不同
在CSS文件開(kāi)頭，加*{margin: 0; padding: 0;}，把所有標(biāo)簽的margin和padding設(shè)置為0

塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大
可以將塊級(jí)元素display設(shè)置為inline

設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，實(shí)際的高度會(huì)超出設(shè)置的高度，這是因?yàn)闉g覽器給標(biāo)簽設(shè)置了一個(gè)默認(rèn)的最小高度
設(shè)置{overflow: hidden;}，或者設(shè)置line-height小于你設(shè)置的高度。

在某些瀏覽器中，圖片有默認(rèn)的間距(所有有文字屬性的標(biāo)簽都會(huì)有邊距，除非兩個(gè)標(biāo)簽連在一起沒(méi)有隔開(kāi))；
使用float為img布局，因?yàn)樗袠?biāo)簽設(shè)置float之后都會(huì)變成塊級(jí)元素，塊級(jí)元素浮動(dòng)時(shí)會(huì)緊挨在一起，沒(méi)有邊距

IE9以下瀏覽器不能使用opacity；
{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。

29.HTML全局屬性(global attribute)有哪些

class:為元素設(shè)置類(lèi)標(biāo)識(shí)

data-*: 為元素增加自定義屬性

draggable: 設(shè)置元素是否可拖拽

id: 元素id，文檔內(nèi)唯一

lang: 元素內(nèi)容的的語(yǔ)言

style: 行內(nèi)css樣式

title: 元素相關(guān)的建議信息

30.網(wǎng)頁(yè)驗(yàn)證碼是干嘛的，是為了解決什么安全問(wèn)題

區(qū)分用戶(hù)是計(jì)算機(jī)還是人的公共全自動(dòng)程序。可以防止惡意破解密碼、刷票、論壇灌水

有效防止黑客對(duì)某一個(gè)特定注冊(cè)用戶(hù)用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試

31.為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效？

CDN緩存更方便

突破瀏覽器并發(fā)限制

節(jié)約cookie帶寬

節(jié)約主域名的連接數(shù)，優(yōu)化頁(yè)面響應(yīng)速度

防止不必要的安全問(wèn)題

32.一個(gè)頁(yè)面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶(hù)更好的體驗(yàn)。

圖片懶加載，在頁(yè)面上的未可視區(qū)域可以添加一個(gè)滾動(dòng)事件，判斷圖片位置與瀏覽器頂端的距離與頁(yè)面的距離，如果前者小于后者，優(yōu)先加載。

如果為幻燈片、相冊(cè)等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。

如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術(shù)。

如果圖片過(guò)大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖，以提高用戶(hù)體驗(yàn)。

如果圖片展示區(qū)域小于圖片的真實(shí)大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后大小與展示一致。

33.web開(kāi)發(fā)中會(huì)話(huà)跟蹤的方法有哪些

cookie

session

url重寫(xiě)

隱藏input

ip地址

34.title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別

title屬性沒(méi)有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對(duì)頁(yè)面信息的抓取也有很大的影響

strong是標(biāo)明重點(diǎn)內(nèi)容，有語(yǔ)氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：會(huì)重讀，而是展示強(qiáng)調(diào)內(nèi)容

i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本

35.瀏覽器的內(nèi)核有哪些？分別有什么代表的瀏覽器？

IE: trident內(nèi)核

Firefox：gecko內(nèi)核

Safari:webkit內(nèi)核

Opera:以前是presto內(nèi)核，Opera現(xiàn)已改用Google - Chrome的Blink內(nèi)核

Chrome:Blink(基于webkit，Google與Opera Software共同開(kāi)發(fā))

36.瀏覽器是如何渲染頁(yè)面的？

1.解析文檔構(gòu)建DOM樹(shù)

HTML/XHTML/SVG：解析這三種文件后，會(huì)生成DOM樹(shù)（DOM Tree）

CSS：解析樣式表，生成CSS規(guī)則樹(shù)（CSS Rule Tree）

JavaScript：解析腳本，通過(guò)DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，與用戶(hù)進(jìn)行交互。

2.構(gòu)建渲染樹(shù)

解析文檔完成后，瀏覽器引擎會(huì)將 CSS Rule Tree 附著到DOM Tree 上，并根據(jù)DOM Tree 和 CSS Rule Tree構(gòu)造 Rendering Tree（渲染樹(shù)）

3.布局與繪制渲染樹(shù)

解析position, overflow, z-index等等屬性，計(jì)算每一個(gè)渲染樹(shù)節(jié)點(diǎn)的位置和大小，此過(guò)程被稱(chēng)為reflow。最后調(diào)用操作系統(tǒng)的Native GUI API完成繪制（repain）。

37.TCP為什么需要三次握手和四次揮手

三次握手是為了建立可靠的數(shù)據(jù)傳輸通道，四次揮手則是為了保證等數(shù)據(jù)完成的被接收完再關(guān)閉連接。

38.TCP三次握手

當(dāng)有客戶(hù)端需要建立連接的時(shí)候就會(huì)發(fā)送一個(gè)確定連接的報(bào)文，此報(bào)文是同步報(bào)文SYN = 1，并且會(huì)生成一個(gè)隨機(jī)的序號(hào) seq = x，這是第一次握手

當(dāng)服務(wù)端接收到請(qǐng)求連接報(bào)文的時(shí)候，會(huì)發(fā)送一個(gè)同步報(bào)文確認(rèn)報(bào)文，此報(bào)文 SYN = 1，并且 ACK = 1，同時(shí)服務(wù)端也會(huì)隨機(jī)生成一個(gè) seq = y，并將 ack 設(shè)置成 x + 1，回傳給客戶(hù)端，這是第二次握手

當(dāng)客戶(hù)端接收到服務(wù)端的 ACK 報(bào)文后，會(huì)回復(fù)一個(gè) ACK 確認(rèn)報(bào)文，用于確認(rèn)確認(rèn)報(bào)文已經(jīng)收到，此報(bào)文 ACK = 1，seq = x + 1, ack = y + 1，這是第三次握手；

這里有個(gè)點(diǎn)說(shuō)明一下：大寫(xiě)的 ACK 表示報(bào)文的類(lèi)型是確認(rèn)報(bào)文，小寫(xiě)的 ack 是報(bào)文里面的確認(rèn)號(hào)，這個(gè)確認(rèn)號(hào)是上一次握手對(duì)方的 seq 值加 1 得到

前端面試題pdf,前端,html,javascript,vue.js,react.js

39.TCP四次揮手

客戶(hù)端發(fā)起 FIN 斷開(kāi)連接的報(bào)文，攜帶隨機(jī)生成的 seq 值 u，發(fā)送給服務(wù)端，并且自己處于 FIN-WSIT 狀態(tài)，這是第一次揮手；

服務(wù)端接收到 FIN 報(bào)文后，回復(fù)一個(gè)確認(rèn)報(bào)文，其中 ACK = 1，隨機(jī)生成一個(gè) seq，以及 ack = u + 1，這是第二次揮手；

當(dāng)服務(wù)端數(shù)據(jù)發(fā)送完了過(guò)后，再發(fā)送一個(gè) FIN 報(bào)文給客戶(hù)端，通知客戶(hù)端，服務(wù)端準(zhǔn)備關(guān)閉連接了，此報(bào)文 FIN = 1，ACK = 1，ack = u + 1，seq = w，這是第三次揮手；

當(dāng)客戶(hù)端收到 FIN 確認(rèn)報(bào)文時(shí)再發(fā)送一個(gè)FIN 的確認(rèn)報(bào)文，其中 ACK = 1，seq = u + 1，ack = w + 1，并進(jìn)入 TIME-WAIT 狀態(tài)，當(dāng)?shù)却?2MSL 后關(guān)閉連接，這是第四次揮手。

前端面試題pdf,前端,html,javascript,vue.js,react.js

40.data-屬性的作用？

data-為H5新增的為前端開(kāi)發(fā)者提供自定義的屬性，
這些屬性集可以通過(guò)對(duì)象的 dataset 屬性獲取，
不支持該屬性的瀏覽器可以通過(guò) getAttribute 方法獲取 :
需要注意的是：data-之后的以連字符分割的多個(gè)單詞組成的屬性，獲取的時(shí)候使用駝峰風(fēng)格。所有主流瀏覽器都支持 data-* 屬性。
即：當(dāng)沒(méi)有合適的屬性和元素時(shí)，自定義的 data 屬性是能夠存儲(chǔ)頁(yè)面或 App 的私有的自定義數(shù)據(jù)

41.HTML5新特性？

1.語(yǔ)義化標(biāo)簽

header：定義文檔的頁(yè)眉（頭部）

nav: 定義導(dǎo)航鏈接的部分

footer: 定義文檔或節(jié)的頁(yè)腳 (底部)

article: 定義文章內(nèi)容

section: 定義文檔中的節(jié) (section、區(qū)段)

aside: 定義其所處內(nèi)容之外的內(nèi)容 (側(cè)邊)

2.媒體標(biāo)簽

audio：音頻
屬性：

src音頻鏈接

controls控制面板

autoplay自動(dòng)播放

loop='true’循環(huán)播放

video：視頻
屬性：

poster: 指定視頻還沒(méi)有完全下載完畢，或者用戶(hù)還沒(méi)有點(diǎn)擊播放前顯示的封面。默認(rèn)顯示當(dāng)前視頻文件的第一針畫(huà)面，當(dāng)然通過(guò)poster也可以自己指定

controls：控制面板

width，height

source標(biāo)簽：因?yàn)闉g覽器對(duì)視頻格式支持程度不一樣，為了能夠兼容不同的瀏覽器，可以通過(guò)source來(lái)指定視頻源。

3.表單

表單類(lèi)型:

email:能夠驗(yàn)證當(dāng)前輸入的郵箱地址是否合法

url :驗(yàn)證URL

number: 只能輸入數(shù)字，其他輸入不了，而且自帶上下增大減小箭頭,max屬性可以設(shè)置為最大值，min可以設(shè)置為最小值，value為默認(rèn)值。

search : 輸入框后面會(huì)給提供一個(gè)小叉，可以刪除輸入的內(nèi)容，更加人性化。

range : 可以提供給一個(gè)范圍，其中可以設(shè)置max和min以及value，其中
value屬性可以設(shè)置為默認(rèn)值

color : 提供了一個(gè)顏色拾取器

time : 時(shí)分秒

date : 日期選擇年月日

datatime: 時(shí)間和日期(目前只有Safari支持)

datatime-local: 日期時(shí)間控件

week : 周控件

month: 月控件

表單屬性：

placeholder: 提示信息

autofocus : 自動(dòng)獲取焦點(diǎn)

autocomplete=“on” 或者 autocomplete=“off”使用這個(gè)屬性需要有兩個(gè)前提:

表單必須提交過(guò)

必須有name屬性

required: 要求輸入框不能為空，必須有值才能夠提交

pattern=””里面寫(xiě)入想要的正則模式

multiple: 可以選擇多個(gè)文件或者多個(gè)郵箱

form=form表單的ID!

表單事件：

oninput 每當(dāng)input里的輸入框內(nèi)容發(fā)生變化都會(huì)觸發(fā)此事件。

oninvalid 當(dāng)驗(yàn)證不通過(guò)時(shí)觸發(fā)此事件。

4.進(jìn)度條，度量器

progress標(biāo)簽:用來(lái)表示任務(wù)的進(jìn)度 (IE、Safari不支持) ，max用來(lái)表示任務(wù)的進(jìn)度，value表示已完成多少

meter屬性: 用來(lái)顯示剩余容量或剩余庫(kù)存 (IE、Safari不支持)

high/low:規(guī)定被視作高/低的范圍

max/min: 規(guī)定最大/小值

value: 規(guī)定當(dāng)前度量值

5.DOM查詢(xún)操作

document.querySelector()

document.querySelectorAll()

6.Web存儲(chǔ)

localStorage和sessionStorage

7.其他

拖放：拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。設(shè)置元素可拖放

canvas和svg

websocket，webwork

地理定位

data-自定義屬性

42.web worker的理解？如何創(chuàng)建？

在 HTML 頁(yè)面中，如果在執(zhí)行腳本時(shí)，頁(yè)面的狀態(tài)是不可相應(yīng)的，直到腳本執(zhí)行完成后，頁(yè)面才變成可相應(yīng)。web worker 是運(yùn)行在后臺(tái)的 js，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能。并且通過(guò) postMessage 將結(jié)果回傳到主線(xiàn)程。這樣在進(jìn)行復(fù)雜操作的時(shí)候，就不會(huì)阻塞主線(xiàn)程了。

創(chuàng)建：

檢測(cè)瀏覽器對(duì)于 web worker 的支持性

創(chuàng)建 web worker 文件 (js，回傳函數(shù)等)

創(chuàng)建 web worker 對(duì)象

43.說(shuō)下HTML5 drag API

dragstart：事件主體是被拖放元素，在開(kāi)始拖放被拖放元素時(shí)觸發(fā)。
darg：事件主體是被拖放元素，在正在拖放被拖放元素時(shí)觸發(fā)。
dragenter：事件主體是目標(biāo)元素，在被拖放元素進(jìn)入某元素時(shí)觸發(fā)。
dragover：事件主體是目標(biāo)元素，在被拖放在某元素內(nèi)移動(dòng)時(shí)觸發(fā)。
dragleave：事件主體是目標(biāo)元素，在被拖放元素移出目標(biāo)元素是觸發(fā)。
drop：事件主體是目標(biāo)元素，在目標(biāo)元素完全接受被拖放元素時(shí)觸發(fā)。
dragend：事件主體是被拖放元素，在整個(gè)拖放操作結(jié)束時(shí)觸發(fā)。

44.Http 短輪詢(xún)、長(zhǎng)輪詢(xún)

輪詢(xún)：是由由客戶(hù)端每隔一段時(shí)間(如每隔5s) 向服務(wù)器發(fā)出HTTP請(qǐng)求，服務(wù)端接收到請(qǐng)求后向客戶(hù)端返回最新的數(shù)據(jù)。

客戶(hù)端輪循：短輪詢(xún)，長(zhǎng)輪詢(xún)

短輪詢(xún)：一般是由客戶(hù)端每隔一段時(shí)間(如每隔5s) 向服務(wù)器發(fā)起一次普通 HTTP 請(qǐng)求。服務(wù)端查詢(xún)當(dāng)前接口是否有數(shù)據(jù)更新，若有數(shù)據(jù)更新則向客戶(hù)端返回最新數(shù)據(jù)，若無(wú)則提示客戶(hù)端無(wú)數(shù)據(jù)更新

長(zhǎng)輪詢(xún)：一般是由客戶(hù)端向服務(wù)端發(fā)出一個(gè)設(shè)置較長(zhǎng)網(wǎng)絡(luò)超時(shí)時(shí)間的 HTTP 請(qǐng)求，并在Http連接超時(shí)前，不主動(dòng)斷開(kāi)連接；待客戶(hù)端超時(shí)或有數(shù)據(jù)返回后，再次建立一個(gè)同樣的Http請(qǐng)求，重復(fù)以上過(guò)程

45.canvas繪圖基礎(chǔ)(直線(xiàn)，三角形，矩形，圓形)

<canvas id=“myCanvas” width=200 height=100 ></canvas>
id 是canvas元素的標(biāo)識(shí)；

height,width規(guī)定畫(huà)布大小

直線(xiàn)：

beginPath()方法，指示開(kāi)始繪圖路徑： ctx.beginPath();
moveTo()方法將坐標(biāo)移至直線(xiàn)起點(diǎn)： ctx.moveTo(x,y);
lineTo()方法繪制直線(xiàn)： ctx.lineTo(x,y);
stroke()方法，繪制圖形的邊界輪廓： ctx.stroke();
closePath()方法，指示閉合繪圖路徑: ctx.closePath()
    var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(100,100);//移動(dòng)到繪制點(diǎn)
	ctx.lineTo(200,200);
	ctx.strokeStyle="#000000"; //指定描邊顏色
	ctx.stroke();
三角形：
	var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(100,200);
	ctx.lineTo(400,200);
	ctx.lineTo(250,400);
	ctx.closePath();//閉合繪圖
	ctx.strokeStyle="#000000";
	ctx.stroke();

矩形：

繪制矩形：rect(x,y,width,height)；

繪制矩形邊框：strokeRect(x, y, width, height);

繪制填充矩形：fillRect(x, y, width, height);

擦除指定矩形區(qū)域：clearRect(x, y, width, height);
	var mycanvas=document.getElementById("canvas");
	var ctx=mycanvas.getContext("2d");
 
	//rect()函數(shù)調(diào)用
	ctx.beginPath();
	ctx.rect(20,20,100,50);
	ctx.stroke();

圓形：arc(centerx,centery,radius,startAngle,endAngle,antiClockwise);

centerx,centery 圓弧中心點(diǎn)坐標(biāo)

Radius 半徑

startAngle 起始弧度

endAngle 終止弧度

antiClockwise 是否按逆時(shí)針?lè)较蚶L圖，是一個(gè)可選參數(shù)，默認(rèn)為false（即順時(shí)針?lè)较蚶L圖）
弧度 = 角度* ( Math.PI / 180 )
	var mycanvas=document.getElementById("canvas");
	var ctx=mycanvas.getContext("2d");
	//arc()函數(shù)調(diào)用
	ctx.beginPath();
	ctx.arc(100,150,70,0,90*Math.PI/180,true);
	ctx.stroke();

46.TCP和HTTP區(qū)別？

TCP對(duì)應(yīng)于傳輸層，HTTP對(duì)應(yīng)于應(yīng)用層，從本質(zhì)上來(lái)說(shuō)，二者沒(méi)有可比性。

Http協(xié)議是建立在TCP協(xié)議基礎(chǔ)之上的，當(dāng)瀏覽器需要從服務(wù)器獲取網(wǎng)頁(yè)數(shù)據(jù)的時(shí)候，會(huì)發(fā)出一次Http請(qǐng)求。Http會(huì)通過(guò)TCP建立起一個(gè)到服務(wù)器的連接通道，當(dāng)本次請(qǐng)求需要的數(shù)據(jù)完畢后，Http會(huì)立即將TCP連接斷開(kāi)，這個(gè)過(guò)程是很短的。所以Http連接是一種短連接，是一種無(wú)狀態(tài)的連接

TCP是底層協(xié)議，定義的是數(shù)據(jù)傳輸和連接方式的規(guī)范。

HTTP是應(yīng)用層協(xié)議，定義的是傳輸數(shù)據(jù)的內(nèi)容的規(guī)范。

HTTP協(xié)議中的數(shù)據(jù)是利用TCP協(xié)議傳輸?shù)?，所以支持HTTP就一定支持TCP

二、CSS 篇

1. 介紹一下 CSS 的盒子模型？

margin(外邊距)- 清除邊框外的區(qū)域，外邊距是透明的。
border(邊框)- 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
padding(內(nèi)邊距)- 清除內(nèi)容周?chē)膮^(qū)域，內(nèi)邊距是透明的。
content(內(nèi)容)- 盒子的內(nèi)容，顯示文本和圖像。

W3C的標(biāo)準(zhǔn)盒模型：在標(biāo)準(zhǔn)的盒子模型中，width指content部分的寬度

IE的盒模型：在IE盒子模型中，width表示content+padding+border這三個(gè)部分的寬度

如何開(kāi)啟不同盒子模型

box-sizing:content-box; 標(biāo)準(zhǔn)盒子模型

box-sizing:border-box; IE盒子模型

2.css選擇器？

id選擇器（#box），選擇id為box的元素

類(lèi)選擇器（.one），選擇類(lèi)名為one的所有元素

標(biāo)簽選擇器（div），選擇標(biāo)簽為div的所有元素

后代選擇器（#box div），選擇id為box元素內(nèi)部所有的div元素

子選擇器（.one>one_1），選擇父元素為.one的所有.one_1的元素

相鄰?fù)x擇器（.one+.two），選擇緊接在.one之后的所有.two元素

群組選擇器（div,p），選擇div、p的所有元素

偽類(lèi)選擇器

屬性選擇器

3. css 選擇器優(yōu)先級(jí)？

!important > 行內(nèi)樣式（比重1000）> ID 選擇器（比重100） > 類(lèi)選擇器（比重10） > 標(biāo)簽（比重1） > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性

4.css中可繼承屬性？

字體系列屬性

font-family:字體系列

font-weight：字體粗細(xì)

font-size：字體大小

font-style：字體風(fēng)格

文本系列屬性

text-indent：文本縮進(jìn)

text-align：文本水平對(duì)齊

line-height：行高

color：文字顏色

元素可見(jiàn)性：visibility

列表布局屬性：list-style

光標(biāo)屬性：cursor

5. 垂直居中幾種方式？

將顯示方式設(shè)置為表格，display:table-cell,同時(shí)設(shè)置vertial-align：middle

使用flex布局，設(shè)置為align-item：center

絕對(duì)定位中設(shè)置bottom:0,top:0,并設(shè)置margin:auto

絕對(duì)定位中固定高度時(shí)設(shè)置top:50%，margin-top值為高度一半的負(fù)值

文本垂直居中設(shè)置line-height為height值

6. 簡(jiǎn)明說(shuō)一下 CSS link 與 @import 的區(qū)別和用法？

link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;

頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;

import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題

7. rgba和opacity的透明效果有什么不同？

Rgba即可以指定元素顏色也可以指定透明度，opacity只能控制元素透明度不能設(shè)置顏色

Rgba透明度是基于實(shí)際顏色而opacity是針對(duì)元素本身透明度設(shè)置，在使用rgba是可以實(shí)現(xiàn)元素不同部位透明度不同，而opacity使元素透明度一致

支持rgba的瀏覽器比支持opacity的更普遍但是在低版本的ie中rgba不被支持而支持opacity

8.display的屬性值及作用

前端面試題pdf,前端,html,javascript,vue.js,react.js

9.display的block，inline和inline-block區(qū)別？

block: 會(huì)獨(dú)占一行，多個(gè)元素會(huì)另起一行，可以設(shè)置width、height、margin和padding屬性;

inline: 元素不會(huì)獨(dú)占一行，設(shè)置width、height屬性無(wú)效。但可以設(shè)置水平方向的margin和padding屬性，不能設(shè)置垂直方向的padding和margin;

inline-block: 將對(duì)象設(shè)置為inline對(duì)象，但對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)，之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。

10. display:none和visibility:hidden的區(qū)別？

display:none 隱藏對(duì)應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會(huì)合攏，就當(dāng)他從來(lái)不存在。
visibility:hidden 隱藏對(duì)應(yīng)的元素，但是在文檔布局中仍保留原來(lái)的空間。

11. position的值， relative和absolute分別是相對(duì)于誰(shuí)進(jìn)行定位的？

relative:相對(duì)定位，相對(duì)于自己本身在正常文檔流中的位置進(jìn)行定位。
absolute:生成絕對(duì)定位，相對(duì)于最近一級(jí)定位不為static的父元素進(jìn)行定位。最終找到body
fixed: （老版本IE不支持）生成絕對(duì)定位，相對(duì)于瀏覽器窗口或者frame進(jìn)行定位。
static:默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中。
sticky:生成粘性定位的元素，容器的位置根據(jù)正常文檔流計(jì)算得出。

12.隱藏元素的方法有哪些？

display: none: 渲染樹(shù)不會(huì)包含該染對(duì)象，因此該元素不會(huì)在頁(yè)面中占據(jù)位置，也不會(huì)響應(yīng)綁定的監(jiān)聽(tīng)事件。

visibility: hidden: 元素在頁(yè)面中仍占據(jù)空間，但是不會(huì)響應(yīng)綁定的監(jiān)聽(tīng)事件

opacity: 0: 將元素的透明度設(shè)置為 0，以此來(lái)實(shí)現(xiàn)元素的隱藏。元素在頁(yè)面中仍然占據(jù)空間，并且能夠響應(yīng)元素綁定的監(jiān)聽(tīng)事件

position: absolute: 通過(guò)使用絕對(duì)定位將元素移除可視區(qū)域內(nèi)，以此來(lái)實(shí)現(xiàn)元素的隱藏

z-index: 負(fù)值: 來(lái)使其他元素遍蓋住該元素，以此來(lái)實(shí)現(xiàn)隱藏

transform: scale(0,0): 將元索縮放為 0，來(lái)實(shí)現(xiàn)元素的隱藏。

13.transition和animation區(qū)別？

觸發(fā)方式不同：transition 通過(guò) CSS 屬性值的變化來(lái)觸發(fā)動(dòng)畫(huà)效果，而 animation 則需要通過(guò)設(shè)置關(guān)鍵幀（keyframes）來(lái)指定動(dòng)畫(huà)序列。

控制方式不同：transition 只能控制開(kāi)始和結(jié)束狀態(tài)之間的過(guò)渡動(dòng)畫(huà)，而 animation 可以指定多個(gè)關(guān)鍵幀，控制元素動(dòng)畫(huà)的每一個(gè)階段，包括動(dòng)畫(huà)開(kāi)始、中間和結(jié)束的時(shí)刻、變換狀態(tài)以及持續(xù)時(shí)間等。

耗費(fèi)資源不同：相對(duì)來(lái)說(shuō)，animation 消耗的瀏覽器資源更多，因?yàn)樗枰?jì)算多個(gè)關(guān)鍵幀之間的動(dòng)畫(huà)效果，而 transition 只需在兩種狀態(tài)之間進(jìn)行簡(jiǎn)單的計(jì)算即可。

兼容性不同：transition 相對(duì)來(lái)說(shuō)更加兼容不同的瀏覽器，而 animation 在某些舊版瀏覽器上可能無(wú)法正常工作。

14.偽元素和偽類(lèi)區(qū)別？

偽元素：是創(chuàng)造文檔樹(shù)之外的對(duì)象。例如文檔不能提供訪(fǎng)問(wèn)元素內(nèi)容第一字或者第一行的機(jī)制。偽元素還提供一些在源文檔中不存在的內(nèi)容分配樣式，例如:before和:after能夠訪(fǎng)問(wèn)產(chǎn)生的內(nèi)容。偽元素的內(nèi)容實(shí)際上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文檔中，所以叫偽元素。

前端面試題pdf,前端,html,javascript,vue.js,react.js

偽類(lèi)：是基于元素的特征而不是他們的id、class、屬性或者內(nèi)容。一般來(lái)說(shuō)，元素的特征是不可以從DOM樹(shù)上推斷得到的，而且其是動(dòng)態(tài)的，當(dāng)用戶(hù)和DOM進(jìn)行交互的時(shí)候，元素可以獲得或者失去一個(gè)偽類(lèi)。（這里有一個(gè)例外，就是:first-child和:lang是可以從DOM樹(shù)中推斷出來(lái)的。）

前端面試題pdf,前端,html,javascript,vue.js,react.js

兩者的異同

相同：

偽類(lèi)和偽元素都不出現(xiàn)在源文件和文檔樹(shù)中。也就是說(shuō)在html源文件中是看不到偽類(lèi)和偽元素的。

差異：

偽類(lèi)其實(shí)就是基于普通DOM元素而產(chǎn)生的不同狀態(tài)，他是DOM元素的某一特征。偽元素能夠創(chuàng)建在DOM樹(shù)中不存在的抽象對(duì)象，而且這些抽象對(duì)象是能夠訪(fǎng)問(wèn)到的。

15.對(duì)requestAnimationframe的理解

HTML5 提供一個(gè)專(zhuān)門(mén)用于請(qǐng)求動(dòng)畫(huà)的API

語(yǔ)法：

window.requestAnimationFrame(callback); 其中，callback是下一次重繪之前更新動(dòng)畫(huà)頓所調(diào)用的函數(shù)(即上面所說(shuō)的回調(diào)函數(shù))。該回調(diào)函數(shù)會(huì)被傳入DOMHighResTimeStamp參數(shù)，它表示requestAnimationFrame()開(kāi)始去執(zhí)行回調(diào)函數(shù)的時(shí)刻。該方法屬于宏任務(wù)，所以會(huì)在執(zhí)行完微任務(wù)之后再去執(zhí)行。

取消動(dòng)畫(huà)：

使用cancelAnimationFrame()來(lái)取消執(zhí)行動(dòng)畫(huà)，該方法接收-個(gè)參數(shù)–requestAnimationFrame默認(rèn)返回的id，只需要傳入這個(gè)id就可以取消動(dòng)畫(huà)了。

優(yōu)勢(shì)：

CPU節(jié)能

函數(shù)節(jié)流

減少DOM操作

16.li 與 li 之間有看不見(jiàn)的空白間隔是什么原因引起的? 如何解決?

瀏覽器會(huì)把inline內(nèi)聯(lián)元素間的空白字符(空格、換行、Tab等) 染成一個(gè)空格。為了美觀(guān)，通常是一個(gè)

放在一行，這導(dǎo)致

換行后產(chǎn)生換行字符，它變成一個(gè)空格，占用了一個(gè)字符的寬度。

解決：

為

設(shè)置float:left。不足: 有些容器是不能設(shè)置浮動(dòng)，如左右切換的焦點(diǎn)圖等.

將所有

寫(xiě)在同一行。不足: 代碼不美觀(guān)。

將內(nèi)的字符尺寸直接設(shè)為0，即font-size:0。不足:
中的其他字符尺寸也被設(shè)為0，需要額外重新設(shè)定其他字符尺寸，且在Safari瀏覽器依然會(huì)出現(xiàn)空白間隔。

消除

的字符間隔letter-spacing:-8px，不足: 這也設(shè)置了

內(nèi)的字符間隔，因此需要將

內(nèi)的字符間隔設(shè)為默認(rèn)letter-spacing:normal。

17.CSS3新特性

新增各種css選擇器(:not(.input):所有class不是’input’的節(jié)點(diǎn))：屬性選擇器，偽類(lèi)選擇器，偽元素選擇器，基本選擇器

三個(gè)邊框?qū)傩?

border-radius：創(chuàng)建圓角邊框

border-shadow：為元素添加陰影

border-image：使用圖片來(lái)繪制邊框

背景

background-clip：確定背景畫(huà)區(qū)

background-origin：設(shè)置是從border-box，padding-box，content-box那個(gè)盒子的左上角開(kāi)始對(duì)其

background-size：調(diào)整背景圖片大小

background-break：元素可以被分成幾個(gè)獨(dú)立的盒子

文字

word-wrap：normal|break-word 使用瀏覽器默認(rèn)的換行|允許在單詞內(nèi)換行

text-overflow：設(shè)置或檢索當(dāng)前行超過(guò)指定容器的邊界如何顯示，屬性由兩個(gè)值

clip：修剪文本

ellipsis：顯示省略符號(hào)來(lái)代表被修剪的文本

text-shadow：可向文本應(yīng)用陰影。能夠規(guī)定水平陰影，垂直陰影，模糊距離，以及陰影顏色

text-decoration：CSS3里面開(kāi)始支持對(duì)文字的更深層次的渲染，具體有三個(gè)屬性可以提供

text-fill-color：設(shè)置文字內(nèi)部填充顏色

text-stroke-color：設(shè)置文字邊界填充顏色

text-stroke-width：設(shè)置文字邊界寬度

顏色（新增顏色表示方式rgba與hsla）

rgba分為兩部分，rgb為顏色值，a為透明度

hsla分為四部分，h為色相，s為飽和度，l為亮度，a為透明度

transition過(guò)渡，transform轉(zhuǎn)換，animation動(dòng)畫(huà)

flex彈性布局，Grid柵格布局

媒體查詢(xún)

18.創(chuàng)建圖片格式(簡(jiǎn)述)

BMP:是無(wú)損的、既支持索引色也支持直接色的點(diǎn)陣圖

GIF:是無(wú)損的、采用索引色的點(diǎn)陣圖。采用LZW壓縮算法進(jìn)行編碼

JPEG:是有損的、采用直接色的點(diǎn)陣圖。JPEG的圖片的優(yōu)點(diǎn)是采用了直接色，得益于更豐富的色彩

PNG-8:是無(wú)損的、使用索引色的點(diǎn)陣圖。

PNG-24:是無(wú)損的、使用直接色的點(diǎn)陣圖。

SVG:是無(wú)損的矢量圖。SVG是矢量圖意味著SVG圖片由直線(xiàn)和曲線(xiàn)以及繪制它們的方法組成

WebP:是谷歌開(kāi)發(fā)的一種新圖片格式，WebP是同時(shí)支持有損和無(wú)損壓縮的、使用直接色的點(diǎn)陣圖。

19. 畫(huà)一條0.5px的直線(xiàn)？

考查的是css3的transform

height: 1px;
transform: scale(0.5);

20. calc, support, media各自的含義及用法？

@support 主要是用于檢測(cè)瀏覽器是否支持CSS的某個(gè)屬性，其實(shí)就是條件判斷，如果支持某個(gè)屬性，你可以寫(xiě)一套樣式，如果不支持某個(gè)屬性，你也可以提供另外一套樣式作為替補(bǔ)。

calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。 calc()函數(shù)支持 “+”, “-”, “*”, “/” 運(yùn)算；

@media 查詢(xún)，你可以針對(duì)不同的媒體類(lèi)型定義不同的樣式。

21.px和em,rem區(qū)別？

px:絕對(duì)長(zhǎng)度單位，像素px是相對(duì)于顯示器屏幕分辨率來(lái)說(shuō)的
em:相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的font-size，em的值并不是固定的，em會(huì)繼承父級(jí)元素的font-size（參考物是父元素的font-size）
rem:相對(duì)于html根元素的font-size

22. 1rem、1em、1vh、1px，vmin，vmax各自代表的含義？

rem
rem是全部的長(zhǎng)度都相對(duì)于根元素元素。通常做法是給html元素設(shè)置一個(gè)字體大小，然后其他元素的長(zhǎng)度單位就為rem。

em
子元素字體大小的em是相對(duì)于父元素字體大小
元素的width/height/padding/margin用em的話(huà)是相對(duì)于該元素的font-size

vw/vh
全稱(chēng)是 Viewport Width 和 Viewport Height，視窗的寬度和高度，相當(dāng)于屏幕寬度和高度的 1%，不過(guò)，處理寬度的時(shí)候%單位更合適，處理高度的話(huà) vh 單位更好。

px
px像素（Pixel）。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。
一般電腦的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕寬度總共有1920個(gè)像素,后者則是高度為1024個(gè)像素

vmin/vmax: 取視窗高度和寬度的最小值作為基準(zhǔn)/取視窗高度和寬度的最大值作為基準(zhǔn)。
如果窗口高度1080，寬度1920那么。 1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px。

23. CSS畫(huà)一個(gè)三角形？

這屬于簡(jiǎn)單的css考查，平時(shí)在用組件庫(kù)的同時(shí)，也別忘了原生的css

.a {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*順時(shí)針旋轉(zhuǎn)90°*/
}
<div class="a"></div>

24.元素水平垂直居中

利用定位+margin:auto

利用定位+margin:負(fù)值

利用定位+transform

table布局

flex布局

grid布局

25.響應(yīng)式布局原理

什么是響應(yīng)式：一種網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局，頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶(hù)行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)，屏幕尺寸，屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整

基本原理：通過(guò)媒體查詢(xún)檢測(cè)不同的設(shè)備屏幕尺寸做處理，為了處理移動(dòng)端，頁(yè)面頭部必須有meta聲明viewport.

實(shí)現(xiàn)方式

媒體查詢(xún)

百分比布局

vw/vh

rem

26.CSS定位方式？

static：元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。

relative：元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute：元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類(lèi)型的框。

fixed：元素框的表現(xiàn)類(lèi)似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。

27.css sprite（雪碧圖，精靈圖）是什么,有什么優(yōu)缺點(diǎn)？

CSSSprites(精靈圖)，將一個(gè)頁(yè)面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background-repeat，background-position屬性的組合進(jìn)行背景定位。

優(yōu)點(diǎn)：

減少HTTP請(qǐng)求，極大提高頁(yè)面加載速度

增加圖片信息重復(fù)度，提高壓縮比，減少圖片大小

更換風(fēng)格方便，只需要在一張或幾張圖片上修改顏色或樣式即可

缺點(diǎn)：

圖片合并麻煩

維護(hù)麻煩

28.設(shè)備像素、css像素、設(shè)備獨(dú)立像素、dpr、ppi 之間的區(qū)別？

設(shè)備像素：又稱(chēng)為物理像素，指設(shè)備能控制顯示的最小物理單位，不一定是一個(gè)小正方形區(qū)塊，也沒(méi)有標(biāo)準(zhǔn)的寬高，只是用于顯示豐富色彩的一個(gè)“點(diǎn)”而已

css像素：適用于web編程，在 CSS 中以 px 為后綴，是一個(gè)長(zhǎng)度單位。css中長(zhǎng)度分為兩類(lèi)：絕對(duì)單位和相對(duì)單位，px屬于相對(duì)單位

設(shè)備獨(dú)立像素：與設(shè)備無(wú)關(guān)的邏輯像素，代表可以通過(guò)程序控制使用的虛擬像素，是一個(gè)總體概念。我們常說(shuō)的分辨率，不嚴(yán)謹(jǐn)來(lái)講是指的設(shè)備獨(dú)立像素。在javascript中我們可以通過(guò) window.screen.width/ window.screen.height 來(lái)查看

dpr：設(shè)備像素比，代表設(shè)備獨(dú)立像素到設(shè)備像素的轉(zhuǎn)換關(guān)系

ppi：像素密度，表示每英寸所包含的像素點(diǎn)數(shù)目

29.margin 和 padding 的使用場(chǎng)景

需要在border外側(cè)添加空白，且空白處不需要背景 (色)時(shí)，使用 margin;

需要在border內(nèi)測(cè)添加空白，且空白處需要背景(色) 時(shí)，使用 padding。

30.對(duì)line-height的理解，賦值方式

概念：

line-height 屬性設(shè)置行間的距離（行高），說(shuō)的直白一點(diǎn)，就是設(shè)置兩段段文本之間的距離如果我們把一段文本的line-height設(shè)置為父容器的高度就可以實(shí)現(xiàn)文本垂直居中了。

原理：

我們可以理解為將div分為三份，分別為上邊距，內(nèi)容，下邊距。舉例：div高度100px，字體為16px，那么上下邊距計(jì)算為(100px-16px)/2

賦值方式：

帶單位：px 是固定值，而 em 會(huì)參考父元素 font-size 值計(jì)算自身的行高

純數(shù)字：會(huì)把比例傳遞給后代。例如，父級(jí)行高為 1.5，子元素字體為 18px，則子元素行高為 1.5 * 18 = 27px

百分比：將計(jì)算后的值傳遞給后代

31.談?wù)勀銓?duì)BFC的理解？觸發(fā)條件？應(yīng)用場(chǎng)景？

概念： BFC即塊級(jí)格式化上下文，它是頁(yè)面中的一塊渲染區(qū)域，并且有一套屬于自己的渲染規(guī)則。BFC目的是形成一個(gè)相對(duì)于外界完全獨(dú)立的空間，讓內(nèi)部的子元素不會(huì)影響到外部的元素

觸發(fā)條件：

根元素，即HTML元素

浮動(dòng)元素：float值為left、right

overflow值不為 visible，為 auto、scroll、hidden

display的值為inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

position的值為absolute或fixed

應(yīng)用場(chǎng)景：

防止margin重疊

清楚內(nèi)部浮動(dòng)

自適應(yīng)多欄布局

32.如何實(shí)現(xiàn)兩欄布局，右側(cè)自適應(yīng)？三欄布局中間自適應(yīng)？

兩欄布局：

使用float左浮動(dòng)左邊欄，右邊使用margin-left撐出左邊欄寬度大小，為父元素添加BFC通過(guò)overflow：hidden開(kāi)啟。

flex布局

三欄布局：

下面三個(gè)方法原理與兩欄布局第一個(gè)方法相同

兩邊使用 float，中間使用 margin

兩邊使用 absolute，中間使用 margin

兩邊使用 float 和負(fù) margin

flex布局

display: table 實(shí)現(xiàn)

通過(guò) display: table設(shè)置為表格，設(shè)置 table-layout: fixed`表示列寬自身寬度決定，而不是自動(dòng)計(jì)算。

內(nèi)層的左中右通過(guò) display: table-cell設(shè)置為表格單元。

左右設(shè)置固定寬度，中間設(shè)置 width: 100% 填充剩下的寬度

grid網(wǎng)格布局

33.說(shuō)說(shuō)flexbox（彈性盒布局模型）,以及適用場(chǎng)景？

理解：flex布局意為“彈性布局”，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。容器中默認(rèn)存在兩條軸，主軸和交叉軸，呈90度關(guān)系。項(xiàng)目默認(rèn)沿主軸排列，通過(guò)flex-direction來(lái)決定主軸的方向

屬性：

flex-direction 決定主軸的方向

flex-wrap 決定容器內(nèi)項(xiàng)目是否可換行
wrap，換行

justify-content 項(xiàng)目在主軸上的對(duì)齊方式

flex-start（默認(rèn)值）：左對(duì)齊

flex-end：右對(duì)齊

center：居中

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等

space-around：兩個(gè)項(xiàng)目?jī)蓚?cè)間隔相等

align-items 項(xiàng)目在交叉軸上如何對(duì)齊

flex-start：交叉軸的起點(diǎn)對(duì)齊

flex-end：交叉軸的終點(diǎn)對(duì)齊

center：交叉軸的中點(diǎn)對(duì)齊 垂直居中

baseline: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊

stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度

align-content

34.介紹一下grid網(wǎng)格布局

理解：Grid 布局即網(wǎng)格布局，是一個(gè)二維的布局方式，由縱橫相交的兩組網(wǎng)格線(xiàn)形成的框架性布局結(jié)構(gòu)，能夠同時(shí)處理行與列

容器屬性：

display：grid該容器是一個(gè)塊級(jí)元素/inline-grid該容器是一個(gè)行內(nèi)元素

grid-template-columns 屬性，grid-template-rows 屬性：
設(shè)置列寬，行高幾行幾列。如果重復(fù)寬高可通過(guò)repeat(3,200px)表示3行列，200px寬高

grid-row-gap 屬性， grid-column-gap 屬性， grid-gap 屬性
設(shè)置行列間距，grid-gap是兩者簡(jiǎn)寫(xiě)

grid-template-areas 屬性：用于定義區(qū)域

grid-auto-flow 屬性：劃分網(wǎng)格以后，容器的子元素會(huì)按照順序，順序就是由grid-auto-flow決定

項(xiàng)目屬性：

grid-column-start 屬性、grid-column-end 屬性、grid-row-start 屬性以及grid-row-end 屬性：指定網(wǎng)格項(xiàng)目所在的四個(gè)邊框，分別定位在哪根網(wǎng)格線(xiàn)，從而指定項(xiàng)目的位置

grid-area 屬性：屬性指定項(xiàng)目放在哪一個(gè)區(qū)域。由grid-template-areas 屬性劃分區(qū)域

justify-self 屬性、align-self 屬性以及 place-self 屬性

35.CSS3動(dòng)畫(huà)有哪些？

transition 實(shí)現(xiàn)漸變動(dòng)畫(huà) transition動(dòng)畫(huà)詳解

transform 轉(zhuǎn)變動(dòng)畫(huà) transform屬性詳解

animation 實(shí)現(xiàn)自定義動(dòng)畫(huà) animation詳解

36.怎么理解回流跟重繪？什么場(chǎng)景下會(huì)觸發(fā)？

回流：布局引擎會(huì)根據(jù)各種樣式計(jì)算每個(gè)盒子在頁(yè)面上的大小與位置

重繪：當(dāng)計(jì)算好盒模型的位置、大小及其他屬性后，瀏覽器根據(jù)每個(gè)盒子特性進(jìn)行繪制

觸發(fā)條件：

回流：

添加或刪除可見(jiàn)的DOM元素

元素的位置發(fā)生變化

元素的尺寸發(fā)生變化（包括外邊距、內(nèi)邊框、邊框大小、高度和寬度等）

內(nèi)容發(fā)生變化，比如文本變化或圖片被另一個(gè)不同尺寸的圖片所替代

頁(yè)面一開(kāi)始渲染的時(shí)候（這避免不了）

瀏覽器的窗口尺寸變化（因?yàn)榛亓魇歉鶕?jù)視口的大小來(lái)計(jì)算元素的位置和大小的）

重繪------ 觸發(fā)回流一定會(huì)觸發(fā)重繪

顏色的修改

文本方向的修改

陰影的修改

37.如果要做優(yōu)化，CSS提高性能的方法有哪些？

內(nèi)聯(lián)首屏關(guān)鍵CSS

避免使用css表達(dá)式

異步加載CSS

資源壓縮

合理使用選擇器

減少使用昂貴的屬性如 box-shadow/border-radius/filter/透明度/:nth-child 等

不要使用@import

38.如何實(shí)現(xiàn)單行／多行文本溢出的省略樣式？

單行文本溢出

white-space：設(shè)置文字在一行顯示，不能換行

overflow：文字長(zhǎng)度超出限定寬度，則隱藏超出的內(nèi)容

text-overflow：規(guī)定當(dāng)文本溢出時(shí)，顯示省略符號(hào)來(lái)代表被修剪的文本

clip：當(dāng)對(duì)象內(nèi)文本溢出部分裁切掉

ellipsis：當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…）

text-overflow只有在設(shè)置了overflow:hidden和white-space:nowrap才能夠生效的

多行文本溢出省略

基于高度截?cái)?– 偽元素 + 定位

position: relative：為偽元素絕對(duì)定位

overflow: hidden：文本溢出限定的寬度就隱藏內(nèi)容）

line-height: 20px：結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)

height: 40px：設(shè)定當(dāng)前元素高度

::after {} ：設(shè)置省略號(hào)樣式 – 設(shè)置偽元素

position: absolute：給省略號(hào)絕對(duì)定位

content：“…”

基于行數(shù)截?cái)?– 純css

-webkit-line-clamp: 2：用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù)，為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性）

display: -webkit-box：和-webkit-line-clamp結(jié)合使用，將對(duì)象作為彈性伸縮盒子模型顯示

-webkit-box-orient: vertical：和-webkit-line-clamp結(jié)合使用，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式

overflow: hidden：文本溢出限定的寬度就隱藏內(nèi)容

text-overflow: ellipsis：多行文本的情況下，用省略號(hào)“…”隱藏溢出范圍的文本

39.讓Chrome支持小于12px 的文字方式有哪些？區(qū)別？

Chrome 中文版瀏覽器會(huì)默認(rèn)設(shè)定頁(yè)面的最小字號(hào)是12px，英文版沒(méi)有限制。

解決方案：

zoom ： “變焦”，可以改變頁(yè)面上元素的尺寸，屬于真實(shí)尺寸

-webkit-transform:scale()：針對(duì)chrome瀏覽器,加webkit前綴，用transform:scale()這個(gè)屬性進(jìn)行放縮

-webkit-text-size-adjust:none：該屬性用來(lái)設(shè)定文字大小是否根據(jù)設(shè)備(瀏覽器)來(lái)自動(dòng)調(diào)整顯示大小

區(qū)別：

Zoom 非標(biāo)屬性，有兼容問(wèn)題，縮放會(huì)改變了元素占據(jù)的空間大小，觸發(fā)重排

-webkit-transform:scale() 大部分現(xiàn)代瀏覽器支持，并且對(duì)英文、數(shù)字、中文也能夠生效，縮放不會(huì)改變了元素占據(jù)的空間大小，頁(yè)面布局不會(huì)發(fā)生變化

-webkit-text-size-adjust對(duì)谷歌瀏覽器有版本要求，在27之后，就取消了該屬性的支持，并且只對(duì)英文、數(shù)字生效

40.說(shuō)說(shuō)對(duì)Css預(yù)編語(yǔ)言的理解？有哪些區(qū)別?

理解：擴(kuò)充了 Css 語(yǔ)言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 Css 更易維護(hù)、方便。本質(zhì)上，預(yù)處理是Css的超集。包含一套自定義的語(yǔ)法及一個(gè)解析器，根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則，這些規(guī)則最終會(huì)通過(guò)解析器，編譯生成對(duì)應(yīng)的 Css 文件

有哪些：sass,less,stylus

比較less和sass：

相同點(diǎn)：
首先sass和less都是css的預(yù)編譯處理語(yǔ)言，它們引入了mixins，參數(shù)，嵌套規(guī)則，運(yùn)算，顏色，名字空間，作用域，JavaScript賦值等加快了css開(kāi)發(fā)效率,當(dāng)然這兩者都可以配合gulp和grunt等前端構(gòu)建工具使用

區(qū)別：

less是基于JavaScript的在客戶(hù)端處理所以安裝的時(shí)候用npm

sass是基于ruby所以在服務(wù)器處理

less優(yōu)缺點(diǎn)

優(yōu)點(diǎn)： less 簡(jiǎn)單,易上手;屬于css的基礎(chǔ)拓展;less更適合靜態(tài)界面寫(xiě)樣式時(shí)

缺點(diǎn)： JavaScript引擎需要額外的時(shí)間來(lái)處理代碼然后輸出修改過(guò)的CSS到瀏覽器

sass優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：功能強(qiáng)大,更加豐富的拓展sass適合游戲或者其他做效果時(shí)需要邏輯來(lái)更換不同樣式

缺點(diǎn)：復(fù)雜對(duì)于新手比較不友好

41.什么是FOUC？如何避免？

FOUC：即無(wú)樣式內(nèi)容閃爍，也可以稱(chēng)為文檔樣式短暫失效，主要就是指HTML已加載而樣式表并未加載，此后樣式表再加載而產(chǎn)生的閃爍現(xiàn)象。

如何避免：

樣式表前置 ：根據(jù)瀏覽器渲染的順序，將CSS在中引入或者嵌入

盡量使用link避免使用@import、

42.清除浮動(dòng)的方式，各自?xún)?yōu)缺點(diǎn)？

額外標(biāo)簽法：給誰(shuí)清除浮動(dòng)，就在其后額外添加一個(gè)空白標(biāo)簽

優(yōu)點(diǎn)：通俗易懂，書(shū)寫(xiě)方便。（不推薦使用）

缺點(diǎn)：添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)化比較差。

父級(jí)添加overflow方法：可以通過(guò)觸發(fā)BFC的方式，實(shí)現(xiàn)清楚浮動(dòng)效果。

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好

缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素。不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。

使用after偽元素清除浮動(dòng)： :after方式為空元素的升級(jí)版，好處是不用單獨(dú)加標(biāo)簽了。

優(yōu)點(diǎn)：符合閉合浮動(dòng)思想，結(jié)構(gòu)語(yǔ)義化正確，不容易出現(xiàn)怪問(wèn)題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

缺點(diǎn)：由于IE6-7不支持

43.在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？

偶數(shù)字號(hào)相對(duì)更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系

44.如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿里）

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60*1000ms ＝ 16.7ms

45.base64的原理及優(yōu)缺點(diǎn)？

優(yōu)點(diǎn)可以加密，減少了HTTTP請(qǐng)求

缺點(diǎn)是需要消耗CPU進(jìn)行編解碼

46.流體布局，圣杯布局，雙飛翼布局？

圣杯布局和雙飛翼布局的區(qū)別：

相同點(diǎn)
兩者的功能相同，都是為了實(shí)現(xiàn)一個(gè)兩側(cè)寬度固定，中間寬度自適應(yīng)的三欄布局，并且中間部分在HTML代碼中要寫(xiě)在前邊，這樣它就會(huì)被優(yōu)先加載渲染。

不同點(diǎn)
主要的不同之處就是在解決中間部分被擋住的問(wèn)題時(shí)，采取的解決辦法不一樣。圣杯布局是在父元素上設(shè)置了padding-left和padding-right，在給左右兩邊的內(nèi)容設(shè)置position為relative，通過(guò)左移和右移來(lái)使得左右兩邊的內(nèi)容得以很好的展現(xiàn)，而雙飛翼布局則是在中間這個(gè)div的外層又套了一個(gè)div來(lái)放置內(nèi)容，在給這個(gè)中間的div設(shè)置margin-left和margin-right 。

47.postcss的作用

PostCSS是一個(gè)使用JS插件轉(zhuǎn)換CSS的工具。這些插件可以支持變量和混合、transpile未來(lái)CSS語(yǔ)法、內(nèi)聯(lián)圖像等。

作用：

支持未來(lái)的css: 使用cssnext書(shū)寫(xiě)未來(lái)的css(postcss-cssnext plugin)

編譯速度大大提升。PostCSS 聲稱(chēng)比預(yù)處理器快 3-30 倍。

豐富的插件系統(tǒng)，解放你的雙手。

css模塊化，將作用域限制于組件內(nèi)，避免了全局作用域的問(wèn)題，再也不用擔(dān)心樣式名重復(fù)了

Postcss屬于css后處理器，動(dòng)態(tài)編譯css，也就是說(shuō)，在運(yùn)行的時(shí)候進(jìn)行編譯。

48.css有個(gè)content屬性嗎？有什么作用？有什么應(yīng)用？

css的content屬性專(zhuān)門(mén)應(yīng)用在 before/after偽元素上，用于來(lái)插入生成內(nèi)容。最常見(jiàn)的應(yīng)用是利用偽類(lèi)清除浮動(dòng)。

49.水平居中方法

元素為行內(nèi)元素，設(shè)置父元素text-align:center

如果元素寬度固定，可以設(shè)置左右margin為auto;

絕對(duì)定位和移動(dòng): absolute + transform

使用flex-box布局，指定justify-content屬性為center

display設(shè)置為tabel-ceil

50.詳細(xì)說(shuō)一說(shuō)css3的animation，transition

animation

css3的animation是css3新增的動(dòng)畫(huà)屬性，這個(gè)css3動(dòng)畫(huà)的每一幀是通過(guò)@keyframes來(lái)聲明的，keyframes聲明了動(dòng)畫(huà)的名稱(chēng)，通過(guò)from、to或者是百分比來(lái)定義動(dòng)畫(huà)過(guò)程

每一幀動(dòng)畫(huà)元素的狀態(tài)，通過(guò)animation-name來(lái)引用這個(gè)動(dòng)畫(huà)，同時(shí)css3動(dòng)畫(huà)也可以定義動(dòng)畫(huà)運(yùn)行的時(shí)長(zhǎng)、動(dòng)畫(huà)開(kāi)始時(shí)間、動(dòng)畫(huà)播放方向、動(dòng)畫(huà)循環(huán)次數(shù)、動(dòng)畫(huà)播放的方式，

這些相關(guān)的動(dòng)畫(huà)子屬性有：

animation-name定義動(dòng)畫(huà)名

animation-duration定義動(dòng)畫(huà)播放的時(shí)長(zhǎng)

animation-delay定義動(dòng)畫(huà)延遲播放的時(shí)間

animation-direction定義動(dòng)畫(huà)的播放方向

animation-iteration-count定義播放次數(shù)

animation-fill-mode定義動(dòng)畫(huà)播放之后的狀態(tài)

animation-play-state定義播放狀態(tài)，如暫停運(yùn)行等

animation-timing-function定義播放的方式，如恒速播放、減速播放等。

transition

transition-property ：規(guī)定設(shè)置過(guò)渡效果的css屬性名稱(chēng)

transition-duration ：規(guī)定完成過(guò)渡效果需要多少秒或毫秒

transition-timing-function ：指定過(guò)渡函數(shù)，規(guī)定速度效果的速度曲線(xiàn)

transition-delay ：指定開(kāi)始出現(xiàn)的延遲時(shí)間

51.什么是css Hack？常見(jiàn)Hack

描述：是通過(guò)在CSS樣式中加入一些特殊的符號(hào)，讓不同的瀏覽器識(shí)別不同的符號(hào)（什么樣的瀏覽器識(shí)別什么樣的符號(hào)是有標(biāo)準(zhǔn)的，CSS hack就是讓你記住這個(gè)標(biāo)準(zhǔn)），以達(dá)到應(yīng)用不同的CSS樣式的目的。

常見(jiàn)hack：

屬性級(jí)Hack：比如IE6能識(shí)別下劃線(xiàn)“”和星號(hào)“*”，IE7能識(shí)別星號(hào)“*”，但不能識(shí)別下劃線(xiàn)””，而firefox兩個(gè)都不能認(rèn)識(shí)。

選擇符級(jí)Hack：比如IE6能識(shí)別html .class{}，IE7能識(shí)別+html .class{}或者*:first-child+html .class{}。

IE條件注釋Hack：IE條件注釋是微軟IE5開(kāi)始就提供的一種非標(biāo)準(zhǔn)邏輯語(yǔ)句。

52.瀏覽器是怎樣解析CSS選擇器的？

瀏覽器解析 CSS 選擇器的方式是從右到左

53.抽離樣式模塊怎么寫(xiě)，說(shuō)出思路

CSS可以拆分成2部分：公共CSS 和業(yè)務(wù)CSS：

網(wǎng)站的配色，字體，交互提取出為公共CSS。這部分CSS命名不應(yīng)涉及具體的業(yè)務(wù)

對(duì)于業(yè)務(wù)CSS，需要有統(tǒng)一的命名，使用公用的前綴?？梢詤⒖济嫦?qū)ο蟮腃SS

54.元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎？

不是

無(wú)論是豎向還是橫向的百分比設(shè)定都是相對(duì)于容器的寬度。我們可以通過(guò)margin和padding來(lái)進(jìn)行驗(yàn)證

55.全屏滾動(dòng)的原理是什么？用到了CSS的那些屬性？

原理類(lèi)似圖片輪播原理，超出隱藏部分，滾動(dòng)時(shí)顯示

可能用到的CSS屬性：overflow:hidden; transform:translate(100%, 100%); display:none;

56.設(shè)置元素浮動(dòng)后，該元素的 display 值會(huì)如何變化

設(shè)置元素浮動(dòng)后，該元素的 display 值自動(dòng)變成 block

57.display:inline-block 什么時(shí)候會(huì)顯示間隙？

相鄰的 inline-block 元素之間有換行或空格分隔的情況下會(huì)產(chǎn)生間距

非 inline-block 水平元素設(shè)置為 inline-block 也會(huì)有水平間距

可以借助 vertical-align:top; 消除垂直間隙

可以在父級(jí)加 font-size：0; 在子元素里設(shè)置需要的字體大小，消除垂直間隙

把 li 標(biāo)簽寫(xiě)到同一行可以消除垂直間隙，但代碼可讀性差

58.pageX，clientX，screenX，offsetX區(qū)別？

pageX/Y：對(duì)于整個(gè)頁(yè)面來(lái)說(shuō)，包括了被卷去的body部分的長(zhǎng)度

clientX/Y：點(diǎn)擊位置距離當(dāng)前body可視區(qū)域的x，y坐標(biāo)

screenX/Y：點(diǎn)擊位置距離當(dāng)前電腦屏幕的x，y坐標(biāo)

offsetX/Y：相對(duì)于帶有定位的父盒子的x，y坐標(biāo)

前端面試題pdf,前端,html,javascript,vue.js,react.js

59.如何對(duì)不同IE版本瀏覽器做兼容測(cè)試？

使用工具切換IE版本，然后在IE瀏覽器運(yùn)行測(cè)試

60.border- radius詳解

在開(kāi)發(fā)中我們經(jīng)常通過(guò)正方形設(shè)置border- radius：50%來(lái)實(shí)現(xiàn)圓

border-radius參數(shù)選擇：

border-radius：10px；將創(chuàng)建四個(gè)大小一樣的圓角

border-radius:10px 15px 10px 15px; 四個(gè)值分別表示左上角、右上角、右下角、左下角

border-radius:10px 15px; 第一個(gè)值表示左上角、右下角；第二個(gè)值表示右上角、左下角

border-radius:10px 15px 5px; 第一個(gè)值表示左上角；第二個(gè)值表示右上角、左下角；第三個(gè)值表示右下角。

61.讓頁(yè)面里的字體變清晰，變細(xì)用CSS怎么做？

-webkit-font-smoothing: antialiased;

63.CSS3漸變？

CSS3 定義了兩種類(lèi)型的漸變（gradients）：

線(xiàn)性漸變 - 向下/向上/向左/向右/對(duì)角方向

徑向漸變 -（Radial Gradients）- 由它們的中心定義

線(xiàn)性漸變：

語(yǔ)法：background-image:linear-gradientdirection,color-stop1,color-stop2,……);

direction：漸變方向/角度，可選（45deg，to bottom，to top,to right,to left,to left top…）

color-stop：選擇顏色rgba可以設(shè)置透明度，也可以設(shè)置色標(biāo)點(diǎn)區(qū)域 例：rgba(255,255,255,0.3) 20%

徑向漸變：

語(yǔ)法：background-image: radial-gradient(shape size at position, start-color, …, last-color);

shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認(rèn)值是 ellipse。

size：主要用來(lái)確定徑向漸變的結(jié)束形狀大小。如果省略了，其默認(rèn)值為“farthest-corner”

at position起點(diǎn)：中心點(diǎn)的位置，可以是關(guān)鍵字（水平方向–left,center,right, 垂直方向–top,center,bottom），具體數(shù)值或百分比。

64.響應(yīng)式布局和自適應(yīng)布局的區(qū)別 ?

響應(yīng)式布局是指通過(guò)CSS媒體查詢(xún)，根據(jù)不同設(shè)備或視口寬度設(shè)置不同的樣式來(lái)適應(yīng)不同屏幕大小，實(shí)現(xiàn)頁(yè)面的自動(dòng)調(diào)整和優(yōu)化。響應(yīng)式布局可以使網(wǎng)站在桌面、平板電腦和手機(jī)等多種設(shè)備上都能夠以最佳的顯示效果呈現(xiàn)。

自適應(yīng)布局是指根據(jù)屏幕尺寸選擇合適的布局方式，使頁(yè)面在不同設(shè)備上看起來(lái)更加美觀(guān)和可讀性更好。自適應(yīng)布局相對(duì)來(lái)說(shuō)更加固定一些，它的頁(yè)面布局通常是由幾個(gè)固定的布局組成，在不同的屏幕尺寸下選擇不同的布局組合來(lái)進(jìn)行展示，而不是像響應(yīng)式布局那樣直接改變樣式。

65.z-index失效的幾種情況

position屬性未設(shè)置或值為static：如果要使用z-index屬性，您需要首先將元素的position屬性設(shè)置為relative、absolute或fixed。否則，即使設(shè)置了z-index，也無(wú)法使其生效。

父元素的z-index值高于子元素：當(dāng)一個(gè)父元素和它的子元素都設(shè)置了z-index時(shí)，子元素的z-index可能會(huì)失效。

浮動(dòng)元素的z-index失效：當(dāng)使用浮動(dòng)元素時(shí)，z-index屬性可能不起作用。這是因?yàn)楦?dòng)本身就具有一定的層疊性質(zhì)，并且浮動(dòng)元素之間的堆疊順序由它們?cè)谖臋n流中的先后順序決定。

66.float之后display值改為？

block

67.css中的錨點(diǎn)

<a name="go">來(lái)我這里</a>
......
<a href="#go">我來(lái)了</a>

可以使用id屬性來(lái)替代name屬性，使用id來(lái)定義錨點(diǎn)，可以定位針對(duì)任何標(biāo)簽來(lái)定位。name屬性只能針對(duì)a標(biāo)簽來(lái)定位。

68.移動(dòng)端1px問(wèn)題解決方案

利用 css 的偽元素::after + transfrom 進(jìn)行縮放

優(yōu)點(diǎn)：全機(jī)型兼容，實(shí)現(xiàn)了真正的1px，而且可以圓角。適用于老項(xiàng)目。

缺點(diǎn)：暫用了after 偽元素，可能影響清除浮動(dòng)。

設(shè)置viewport的scale值

優(yōu)點(diǎn)：全機(jī)型兼容，直接寫(xiě)1px不能再方便。

缺點(diǎn)：適用于新的項(xiàng)目，老項(xiàng)目可能改動(dòng)大。

使用組件庫(kù)vant/ant-design-mobile

69.阻止移動(dòng)端H5開(kāi)發(fā)瀏覽器默認(rèn)左右滑動(dòng)行為

html{
    touch-action:none;
}
//此時(shí)上下左右都不可滑動(dòng)
--------改動(dòng)
html{
touch-action:none;
touch-action:pan-y;
}

70.CSS中定位position 和 transform 移動(dòng)元素的比較

性能方面：transform性能遠(yuǎn)高于position

通過(guò)translate移動(dòng)，元素依然會(huì)占據(jù)其原始空間。如果通過(guò)position移動(dòng)則會(huì)改變位置觸發(fā)重繪

71.margin-left：auto，margin-right：auto，margin：auto區(qū)別

margin-left:auto 右對(duì)齊

margin-right：auto 左對(duì)齊

margin：auto 居中

72.css全屏滾動(dòng)

overflow-y；overflow-x；scroll-snap-type;scroll-snap-align;必要屬性

<style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        ul {
            margin: 0;
            /* scroll-behavior: smooth 讓頁(yè)面在滾動(dòng)時(shí)擁有平滑的過(guò)渡效果，而不是瞬間跳轉(zhuǎn) */
            scroll-behavior: smooth;
            font-size: 40px;
            width: 100%;
            height: 100%;
            /* 
            overflow-y: auto 表示當(dāng)內(nèi)容超出元素的高度時(shí)，元素會(huì)顯示垂直方向的滾動(dòng)條以便用戶(hù)瀏覽。如果內(nèi)容不超出元素的高度，則不會(huì)顯示滾動(dòng)條。
            overflow-x: hidden 則表示當(dāng)內(nèi)容超出元素的寬度時(shí)，元素不會(huì)顯示水平方向的滾動(dòng)條，同時(shí)超出部分的內(nèi)容也將被隱藏。
            */
            overflow-y: auto;
            overflow-x: hidden;
            border: 1px solid #000;
            /* 
            scroll-snap-type: y mandatory; 表示在垂直方向上開(kāi)啟滾動(dòng)對(duì)齊功能，并強(qiáng)制要求元素對(duì)齊到滾動(dòng)容器的邊緣。這樣可以確保每個(gè)子元素都在獨(dú)立的、整數(shù)倍的位置停留，從而實(shí)現(xiàn)更加規(guī)整的頁(yè)面布局。
            */
            scroll-snap-type: y mandatory;
            /*設(shè)置父級(jí)*/
            padding: 0;
        }

        li {
            height: 100%;
            width: 100%;
            flex-shrink: 0;
            /* 
            scroll-snap-align: center; 則表示對(duì)齊方式為中心對(duì)齊，當(dāng)子元素的中心點(diǎn)（水平軸和垂直軸的中心點(diǎn)）與滾動(dòng)容器的中心點(diǎn)重合時(shí)，就會(huì)觸發(fā)對(duì)齊效果。
            */
            scroll-snap-align: center;
            /*子級(jí)設(shè)置*/
            text-align: center;
        }

        li:nth-child(1) {
            background-color: teal;
        }

        li:nth-child(2) {
            background-color: gold;
        }

        li:nth-child(3) {
            background-color: green;
        }
    </style>

	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

三、HTML / CSS 混合篇

1. HTML5、CSS3 里面都新增了那些新特性？

HTML5

新的語(yǔ)義標(biāo)簽

article 獨(dú)立的內(nèi)容。

aside 側(cè)邊欄。

header 頭部。

nav 導(dǎo)航。

section 文檔中的節(jié)。

footer 頁(yè)腳。

畫(huà)布(Canvas) API

地理(Geolocation) API

本地離線(xiàn)存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

新的技術(shù)webworker, websocket, Geolocation

拖拽釋放(Drag and drop) API

音頻、視頻API(audio,video)

表單控件，calendar、date、time、email、url、searc

CSS3

2d，3d變換

Transition, animation

媒體查詢(xún)

新的單位（rem, vw，vh 等）

圓角（border-radius），陰影（box-shadow），對(duì)文字加特效（text-shadow），線(xiàn)性漸變（gradient），旋轉(zhuǎn)（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜

rgba

四、JS 篇

1. JS 數(shù)據(jù)類(lèi)型 ?存儲(chǔ)上的差別？

數(shù)據(jù)類(lèi)型主要包括兩部分：

基本數(shù)據(jù)+類(lèi)型： Undefined、Null、Boolean、Number 和 String，Symbol(創(chuàng)建后獨(dú)一無(wú)二且不可變的數(shù)據(jù)類(lèi)型 )

引用數(shù)據(jù)類(lèi)型： Object (包括 Object 、Array 、Function)

存儲(chǔ)區(qū)別：

基本數(shù)據(jù)類(lèi)型存儲(chǔ)在棧中

引用類(lèi)型的對(duì)象存儲(chǔ)于堆中

2.數(shù)組常用方法？

增：

push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度

unshift() 在數(shù)組開(kāi)頭添加任意多個(gè)值，然后返回新的數(shù)組長(zhǎng)度

splice() 傳入三個(gè)參數(shù)，分別是開(kāi)始位置、0（要?jiǎng)h除的元素?cái)?shù)量）、插入的元素，返回空數(shù)組

concat() 首先會(huì)創(chuàng)建一個(gè)當(dāng)前數(shù)組的副本，然后再把它的參數(shù)添加到副本末尾，最后返回這個(gè)新構(gòu)建的數(shù)組，不會(huì)影響原始數(shù)組

刪：

pop() 方法用于刪除數(shù)組的最后一項(xiàng)，同時(shí)減少數(shù)組的length 值，返回被刪除的項(xiàng)

shift() 方法用于刪除數(shù)組的第一項(xiàng)，同時(shí)減少數(shù)組的length 值，返回被刪除的項(xiàng)

splice() 傳入兩個(gè)參數(shù)，分別是開(kāi)始位置，刪除元素的數(shù)量，返回包含刪除元素的數(shù)組

slice() 傳入兩個(gè)參數(shù)，分別是開(kāi)始位置和結(jié)束位置，不包括結(jié)束值，返回一個(gè)新數(shù)組，不影響原數(shù)組

改：

splice() 傳入三個(gè)參數(shù)，分別是開(kāi)始位置，要?jiǎng)h除元素的數(shù)量，要插入的任意多個(gè)元素，返回刪除元素的數(shù)組，對(duì)原數(shù)組產(chǎn)生影響

查：

indexOf() 返回要查找的元素在數(shù)組中的位置，如果沒(méi)找到則返回 -1

includes() 返回要查找的元素在數(shù)組中的位置，找到返回true，否則false

find() 返回第一個(gè)匹配的元素

3.JavaScript字符串的常用操作方法有哪些？

增：

字符串可以通過(guò)‘+’以及${}進(jìn)行字符串拼接

concat 用于將一個(gè)或多個(gè)字符串拼接成一個(gè)新字符串

刪：三個(gè)函數(shù)都接收一個(gè)或兩個(gè)參數(shù)，跟數(shù)組中slice相似

slice()

substr() 接受兩個(gè)參數(shù)：起始索引和要提取的字符數(shù)

substring() 接受兩個(gè)參數(shù)：起始索引和結(jié)束索引不包括結(jié)束位置的字符

改：

trim()、trimLeft()、trimRight() 刪除前、后或前后所有空格符，再返回新的字符串

repeat() 接收一個(gè)整數(shù)參數(shù)，表示要將字符串復(fù)制多少次，然后返回拼接所有副本后的結(jié)果

padStart()、padEnd() 復(fù)制字符串，接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是長(zhǎng)度，第二個(gè)參數(shù)是想要填充的字符，如果小于指定長(zhǎng)度，則在相應(yīng)一邊(end/start)填充字符，直至滿(mǎn)足長(zhǎng)度條件

toLowerCase()、 toUpperCase() 大小寫(xiě)轉(zhuǎn)化

查：

chatAt() 返回給定索引位置的字符，由傳給方法的整數(shù)參數(shù)指定

indexOf() 從字符串開(kāi)頭去搜索傳入的字符串，并返回位置（如果沒(méi)找到，則返回 -1 ）

startWith() 從字符串中搜索傳入的字符串，判斷開(kāi)頭字符串是否與期待值相同，并返回一個(gè)表示是否包含的布爾值

includes() 從字符串中搜索傳入的字符串，判斷字符串是否包含期待值，并返回一個(gè)表示是否包含的布爾值

4.JavaScript字符串的常用轉(zhuǎn)換方法和模板匹配方法？

轉(zhuǎn)換方法：

split() 把字符串按照指定的分割符，拆分成數(shù)組中的每一項(xiàng)

模板匹配方法：

match() 接收一個(gè)參數(shù)，可以是一個(gè)正則表達(dá)式字符串，也可以是一個(gè)RegExp對(duì)象，返回?cái)?shù)組

search() 接收一個(gè)參數(shù)，可以是一個(gè)正則表達(dá)式字符串，也可以是一個(gè)RegExp對(duì)象，找到則返回匹配索引，否則返回 -1

replace() 接收兩個(gè)參數(shù)，第一個(gè)參數(shù)為匹配的內(nèi)容，第二個(gè)參數(shù)為替換的元素（可用函數(shù)）

5.JavaScript 中的類(lèi)型轉(zhuǎn)換機(jī)制

顯示轉(zhuǎn)換：

Number()

字符串：如果可以被解析為數(shù)值，則轉(zhuǎn)換為相應(yīng)的數(shù)值

字符串：如果不可以被解析為數(shù)值，返回 NaN

空字符串轉(zhuǎn)換為0

布爾值：true 轉(zhuǎn)成 1，false 轉(zhuǎn)成 0

undefined：轉(zhuǎn)成 NaN

null：轉(zhuǎn)成0

對(duì)象：通常轉(zhuǎn)換成NaN(除了只包含單個(gè)數(shù)值的數(shù)組)

parseInt() parseInt相比Number，就沒(méi)那么嚴(yán)格了，parseInt函數(shù)逐個(gè)解析字符，遇到不能轉(zhuǎn)換的字符就停下來(lái)

String() 可以將任意類(lèi)型的值轉(zhuǎn)化成字符串
特殊：如果接受的是對(duì)象則返回[object,object] 如果是數(shù)組【1,2,3】返回1,2,3

Boolean() 可以將任意類(lèi)型的值轉(zhuǎn)為布爾值

隱式轉(zhuǎn)換：

在+運(yùn)算中，一旦存在字符串，則會(huì)進(jìn)行字符串拼接操作

除了+有可能把運(yùn)算子轉(zhuǎn)為字符串，其他運(yùn)算符都會(huì)把運(yùn)算子自動(dòng)轉(zhuǎn)成數(shù)值。常用就是將字符串轉(zhuǎn)為數(shù)值字符串-0 = 數(shù)值

6.null 和 undefined 的區(qū)別？

null和undefined不能通過(guò)==來(lái)判斷。

undefined

這個(gè)變量從根本上就沒(méi)有定義

隱藏式空值

null

這個(gè)值雖然定義了，但它并未指向任何內(nèi)存中的對(duì)象

聲明式空值

7. “ ===”、“ ==”的區(qū)別？

==：如果操作數(shù)相等，則會(huì)返回 true

兩個(gè)都為簡(jiǎn)單類(lèi)型，字符串和布爾值都會(huì)轉(zhuǎn)換成數(shù)值，再比較

簡(jiǎn)單類(lèi)型與引用類(lèi)型比較，對(duì)象轉(zhuǎn)化成其原始類(lèi)型的值，再比較

兩個(gè)都為引用類(lèi)型，則比較它們是否指向同一個(gè)對(duì)象

null 和 undefined 相等

存在 NaN 則返回 false

===：只有在無(wú)需類(lèi)型轉(zhuǎn)換運(yùn)算數(shù)就相等的情況下，才返回 true，需要檢查數(shù)據(jù)類(lèi)型

區(qū)別：

相等操作符（==）會(huì)做類(lèi)型轉(zhuǎn)換，再進(jìn)行值的比較，全等運(yùn)算符不會(huì)做類(lèi)型轉(zhuǎn)換

8. “eval是做什么的？

它的功能是把對(duì)應(yīng)的字符串解析成 JS 代碼并運(yùn)行；
應(yīng)該避免使用 eval，不安全，非常耗性能（2次，一次解析成 js 語(yǔ)句，一次執(zhí)行）。

9. 箭頭函數(shù)有哪些特點(diǎn)？

不需要function關(guān)鍵字來(lái)創(chuàng)建函數(shù)
省略return關(guān)鍵字
改變this指向

10. var、let、const 區(qū)別？

var 存在變量提升。
let 只能在塊級(jí)作用域內(nèi)訪(fǎng)問(wèn)。
const 用來(lái)定義常量，必須初始化，不能修改（對(duì)象特殊）

11. new操作符具體干了什么呢？

1、創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。
2、屬性和方法被加入到 this 引用的對(duì)象中。
3、新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this 。

12.深拷貝淺拷貝的區(qū)別？如何實(shí)現(xiàn)一個(gè)深拷貝？

淺拷貝：指的是創(chuàng)建新的數(shù)據(jù)，這個(gè)數(shù)據(jù)有著原始數(shù)據(jù)屬性值的一份精確拷貝，兩個(gè)對(duì)象指向同一個(gè)地址

深拷貝：深拷貝開(kāi)辟一個(gè)新的棧，兩個(gè)對(duì)象屬完成相同，但是對(duì)應(yīng)兩個(gè)不同的地址，修改一個(gè)對(duì)象的屬性，不會(huì)改變另一個(gè)對(duì)象的屬性

如何實(shí)現(xiàn)深拷貝：

JSON.stringify()

手寫(xiě)循環(huán)遞歸

_.cloneDeep()

MessageChannel 新增

jquery的extend

13.對(duì)作用域鏈的理解

作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪(fǎng)問(wèn)的變量和函數(shù)是有序的，作用域鏈的變量只能向上訪(fǎng)問(wèn)，變量訪(fǎng)問(wèn)到window對(duì)象即被終止，作用域鏈向下訪(fǎng)問(wèn)變量是不被允許的

簡(jiǎn)單的說(shuō)，作用域就是變量與函數(shù)的可訪(fǎng)問(wèn)范圍，即作用域控制著變量與函數(shù)的可見(jiàn)性和生命周期

14.JavaScript原型，原型鏈 ? 有什么特點(diǎn)？

原型：

JavaScript的所有對(duì)象中都包含了一個(gè) [__proto__] 內(nèi)部屬性，這個(gè)屬性所對(duì)應(yīng)的就是該對(duì)象的原型

JavaScript的函數(shù)對(duì)象，除了原型 [__proto__] 之外，還預(yù)置了 prototype 屬性

當(dāng)函數(shù)對(duì)象作為構(gòu)造函數(shù)創(chuàng)建實(shí)例時(shí)，該 prototype 屬性值將被作為實(shí)例對(duì)象的原型 [__proto__]

原型鏈：

當(dāng)一個(gè)對(duì)象調(diào)用的屬性/方法自身不存在時(shí)，就會(huì)去自己 [__proto__] 關(guān)聯(lián)的前輩 prototype 對(duì)象上去找

如果沒(méi)找到，就會(huì)去該 prototype 原型 [__proto__] 關(guān)聯(lián)的前輩 prototype 去找。依次類(lèi)推，直到找到屬性/方法或 undefined 為止。從而形成了所謂的“原型鏈”

原型特點(diǎn)：
JavaScript對(duì)象是通過(guò)引用來(lái)傳遞的，當(dāng)修改原型時(shí)，與之相關(guān)的對(duì)象也會(huì)繼承這一改變

15.請(qǐng)解釋什么是事件代理

事件代理（Event Delegation），又稱(chēng)之為事件委托。是 JavaScript 中常用綁定事件的常用技巧。顧名思義，“事件代理”即是把原本需要綁定的事件委托給父元素，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽(tīng)的職務(wù)。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高性能

可以大量節(jié)省內(nèi)存占用，減少事件注冊(cè)，比如在table上代理所有td的click事件就非常棒

可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)無(wú)需再次對(duì)其綁定

16.Javascript如何實(shí)現(xiàn)繼承？

構(gòu)造函數(shù)綁定：使用 call 或 apply 方法，將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上

實(shí)例繼承：將子對(duì)象的 prototype 指向父對(duì)象的一個(gè)實(shí)例 Cat.prototype = new Animal();

拷貝繼承：如果把父對(duì)象的所有屬性和方法，拷貝進(jìn)子對(duì)象

原型繼承：將子對(duì)象的 prototype 指向父對(duì)象的 prototype F.prototype = Parent.prototype;

ES6 語(yǔ)法糖 extends：class ColorPoint extends Point {}

17.談?wù)凾his對(duì)象的理解

this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）

如果有new關(guān)鍵字，this指向new出來(lái)的那個(gè)對(duì)象

在事件中，this指向觸發(fā)這個(gè)事件的對(duì)象，特殊的是，IE中的attachEvent中的this總是指向全局對(duì)象Window

18.事件模型

W3C中定義事件的發(fā)生經(jīng)歷三個(gè)階段：捕獲階段（capturing）、目標(biāo)階段（targetin）、冒泡階段（bubbling）

冒泡型事件：當(dāng)你使用事件冒泡時(shí)，子級(jí)元素先觸發(fā)，父級(jí)元素后觸發(fā)

捕獲型事件：當(dāng)你使用事件捕獲時(shí)，父級(jí)元素先觸發(fā)，子級(jí)元素后觸發(fā)

DOM事件流：同時(shí)支持兩種事件模型：捕獲型事件和冒泡型事件

阻止冒泡：在W3c中，使用stopPropagation()方法；在IE下設(shè)置cancelBubble = true

阻止捕獲：阻止事件的默認(rèn)行為，例如click - 后的跳轉(zhuǎn)。在W3c中，使用preventDefault()方法，在IE下設(shè)置window.event.returnValue = false

19.new操作符具體干了什么呢?

創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型

屬性和方法被加入到 this 引用的對(duì)象中

新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this

20.JavaScript中執(zhí)行上下文和執(zhí)行棧是什么？

執(zhí)行上下文：是一種對(duì)Javascript代碼執(zhí)行環(huán)境的抽象概念，也就是說(shuō)只要有Javascript代碼運(yùn)行，那么它就一定是運(yùn)行在執(zhí)行上下文中

全局執(zhí)行上下文：只有一個(gè)，瀏覽器中的全局對(duì)象就是 window對(duì)象，this 指向這個(gè)全局對(duì)象

函數(shù)執(zhí)行上下文：存在無(wú)數(shù)個(gè)，只有在函數(shù)被調(diào)用的時(shí)候才會(huì)被創(chuàng)建，每次調(diào)用函數(shù)都會(huì)創(chuàng)建一個(gè)新的執(zhí)行上下文

Eval 函數(shù)執(zhí)行上下文：指的是運(yùn)行在 eval 函數(shù)中的代碼，很少用而且不建議使用

執(zhí)行棧：也叫調(diào)用棧，具有 LIFO（后進(jìn)先出）結(jié)構(gòu)，用于存儲(chǔ)在代碼執(zhí)行期間創(chuàng)建的所有執(zhí)行上下文

當(dāng)Javascript引擎開(kāi)始執(zhí)行你第一行腳本代碼的時(shí)候，它就會(huì)創(chuàng)建一個(gè)全局執(zhí)行上下文然后將它壓到執(zhí)行棧中

每當(dāng)引擎碰到一個(gè)函數(shù)的時(shí)候，它就會(huì)創(chuàng)建一個(gè)函數(shù)執(zhí)行上下文，然后將這個(gè)執(zhí)行上下文壓到執(zhí)行棧中

引擎會(huì)執(zhí)行位于執(zhí)行棧棧頂?shù)膱?zhí)行上下文(一般是函數(shù)執(zhí)行上下文)，當(dāng)該函數(shù)執(zhí)行結(jié)束后，對(duì)應(yīng)的執(zhí)行上下文就會(huì)被彈出，然后控制流程到達(dá)執(zhí)行棧的下一個(gè)執(zhí)行上下文

21.typeof 與 instanceof 區(qū)別？

typeof 操作符返回一個(gè)字符串，表示未經(jīng)計(jì)算的操作數(shù)的類(lèi)型

前端面試題pdf,前端,html,javascript,vue.js,react.js

instanceof 運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上

區(qū)別：

typeof會(huì)返回一個(gè)變量的基本類(lèi)型，instanceof返回的是一個(gè)布爾值

instanceof 可以準(zhǔn)確地判斷復(fù)雜引用數(shù)據(jù)類(lèi)型，但是不能正確判斷基礎(chǔ)數(shù)據(jù)類(lèi)型

而typeof 也存在弊端，它雖然可以判斷基礎(chǔ)數(shù)據(jù)類(lèi)型（null 除外），但是引用數(shù)據(jù)類(lèi)型中，除了function 類(lèi)型以外，其他的也無(wú)法判斷

22.判斷是否為數(shù)組的5種方法？

instanceof data instanceof Array

constructor data.constructor == Array

Array.isArray() Array.isArray(data) 最推薦

typeof typeof(data)

Object.prototype.toSrtring.call()

23. 判斷一個(gè)值是什么類(lèi)型有哪些方法？

typeof 運(yùn)算符

instanceof 運(yùn)算符

Object.prototype.toString.call 方法

constructor

24. ajax過(guò)程？

(1)創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.
(2)創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息.
(3)設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請(qǐng)求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.

25.Ajax原理，ajax優(yōu)缺點(diǎn)？

Ajax的原理簡(jiǎn)單來(lái)說(shuō)是在用戶(hù)和服務(wù)器之間加了—個(gè)中間層(AJAX引擎)，通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來(lái)操作DOM而更新頁(yè)面。使用戶(hù)操作與服務(wù)器響應(yīng)異步化。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)

Ajax的過(guò)程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機(jī)制

前端面試題pdf,前端,html,javascript,vue.js,react.js

優(yōu)點(diǎn)：

通過(guò)異步模式，提升了用戶(hù)體驗(yàn).

優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用.

Ajax在客戶(hù)端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作，減少了大用戶(hù)量下的服務(wù)器負(fù)載。

Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）

缺點(diǎn)：

安全問(wèn)題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。

對(duì)搜索引擎的支持比較弱。

不容易調(diào)試。

26.bind、call、apply 區(qū)別？

bind、call、apply用來(lái)改變this指向

apply：接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是this的指向，第二個(gè)參數(shù)是函數(shù)接受的參數(shù)，以數(shù)組的形式傳入

改變this指向后原函數(shù)會(huì)立即執(zhí)行，且此方法只是臨時(shí)改變this指向一次 fn.apply(null,[1,2,3]);

call：第一個(gè)參數(shù)也是this的指向，后面?zhèn)魅氲氖且粋€(gè)參數(shù)列表 fn.call(obj,1,2,3)

bind： bind方法和call很相似，第一參數(shù)也是this的指向，后面?zhèn)魅氲囊彩且粋€(gè)參數(shù)列表(但是這個(gè)參數(shù)列表可以分多次傳入) 返回的是新的函數(shù)

27.如何實(shí)現(xiàn)一個(gè)bind?

實(shí)現(xiàn)bind三步：

修改this指向

動(dòng)態(tài)傳遞參數(shù)

兼容new關(guān)鍵字

前端面試題pdf,前端,html,javascript,vue.js,react.js

28.說(shuō)說(shuō)你對(duì)正則表達(dá)式的理解？應(yīng)用場(chǎng)景？

正則表達(dá)式是一種用來(lái)匹配字符串的強(qiáng)有力的武器

應(yīng)用場(chǎng)景：

驗(yàn)證QQ合法性（5~15位、全是數(shù)字、不以0開(kāi)頭）：

驗(yàn)證手機(jī)號(hào)格式

29.對(duì)事件循環(huán)的理解（詳細(xì)）？

前提： JavaScript是一門(mén)單線(xiàn)程的語(yǔ)言，意味著同一時(shí)間內(nèi)只能做一件事，但是這并不意味著單線(xiàn)程就是阻塞，而實(shí)現(xiàn)單線(xiàn)程非阻塞的方法就是事件循環(huán)

在JavaScript中，所有的任務(wù)都可以分為

同步任務(wù)：立即執(zhí)行的任務(wù)，同步任務(wù)一般會(huì)直接進(jìn)入到主線(xiàn)程中執(zhí)行

異步任務(wù)：異步執(zhí)行的任務(wù)，比如ajax網(wǎng)絡(luò)請(qǐng)求，setTimeout定時(shí)函數(shù)等

同步任務(wù)進(jìn)入主線(xiàn)程，即主執(zhí)行棧，異步任務(wù)進(jìn)入任務(wù)隊(duì)列，主線(xiàn)程內(nèi)的任務(wù)執(zhí)行完畢為空，會(huì)去任務(wù)隊(duì)列讀取對(duì)應(yīng)的任務(wù)，推入主線(xiàn)程執(zhí)行。上述過(guò)程的不斷重復(fù)就事件循環(huán)

異步任務(wù)分為微任務(wù)和宏任務(wù):

微任務(wù)：一個(gè)需要異步執(zhí)行的函數(shù)，執(zhí)行時(shí)機(jī)是在主函數(shù)執(zhí)行結(jié)束之后、當(dāng)前宏任務(wù)結(jié)束之前

Promise

MutaionObserver 監(jiān)聽(tīng)dom發(fā)生改變的

Object.observe（已廢棄；Proxy 對(duì)象替代）

process.nextTick（Node.js）

宏任務(wù)：宏任務(wù)的時(shí)間粒度比較大，執(zhí)行的時(shí)間間隔是不能精確控制的，對(duì)一些高實(shí)時(shí)性的需求就不太符合

script (可以理解為外層同步代碼)

setTimeout/setInterval

postMessage、MessageChannel

setImmediate、I/O（Node.js）

執(zhí)行順序：

先執(zhí)行同步代碼，

遇到異步宏任務(wù)則將異步宏任務(wù)放入宏任務(wù)隊(duì)列中，

遇到異步微任務(wù)則將異步微任務(wù)放入微任務(wù)隊(duì)列中，

當(dāng)所有同步代碼執(zhí)行完畢后，再將異步微任務(wù)從隊(duì)列中調(diào)入主線(xiàn)程執(zhí)行，

微任務(wù)執(zhí)行完畢后再將異步宏任務(wù)從隊(duì)列中調(diào)入主線(xiàn)程執(zhí)行，

一直循環(huán)直至所有任務(wù)執(zhí)行完畢。

30.DOM常見(jiàn)的操作有哪些？

創(chuàng)建節(jié)點(diǎn)
createElement 創(chuàng)建新元素，接受一個(gè)參數(shù)，即要?jiǎng)?chuàng)建元素的標(biāo)簽名

查詢(xún)節(jié)點(diǎn)

querySelector 傳入任何有效的css 選擇器，即可選中單個(gè) DOM元素（首個(gè)）如果頁(yè)面上沒(méi)有指定的元素時(shí)，返回 null

querySelectorAll 返回一個(gè)包含節(jié)點(diǎn)子樹(shù)內(nèi)所有與之相匹配的Element節(jié)點(diǎn)列表，如果沒(méi)有相匹配的，則返回一個(gè)空節(jié)點(diǎn)列表

更新節(jié)點(diǎn)

innerHTML 不但可以修改一個(gè)DOM節(jié)點(diǎn)的文本內(nèi)容，還可以直接通過(guò)HTML片段修改DOM節(jié)點(diǎn)內(nèi)部的子樹(shù)

innerText

style dom對(duì)象.style.樣式屬性 = ‘’

添加節(jié)點(diǎn)

innerHTML

appendChild 把一個(gè)子節(jié)點(diǎn)添加到父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)

insertBefore(新dom，指定dom對(duì)象) 把子節(jié)點(diǎn)插入到指定的位置的前面

setAttribute 在指定元素中添加一個(gè)屬性節(jié)點(diǎn)，如果元素中已有該屬性改變屬性值

刪除節(jié)點(diǎn)
removeChild 拿到父節(jié)點(diǎn)，要?jiǎng)h除的節(jié)點(diǎn)dom對(duì)象。父.removeChild(子)

31.說(shuō)說(shuō)你對(duì)BOM的理解，常見(jiàn)的BOM對(duì)象你了解哪些？

BOM (Browser Object Model)，瀏覽器對(duì)象模型，提供了獨(dú)立于內(nèi)容與瀏覽器窗口進(jìn)行交互的對(duì)象。

瀏覽器的全部?jī)?nèi)容可以看成DOM，整個(gè)瀏覽器可以看成BOM。

BOM對(duì)象：

window： Bom的核心對(duì)象是window，它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中，window對(duì)象有雙重角色，即是瀏覽器窗口的一個(gè)接口，又是全局對(duì)象

location：獲取url地址信息

navigator：對(duì)象主要用來(lái)獲取瀏覽器的屬性，區(qū)分瀏覽器類(lèi)型

screen：保存的純粹是客戶(hù)端能力信息，也就是瀏覽器窗口外面的客戶(hù)端顯示器的信息，比如像素寬度和像素高度

history：主要用來(lái)操作瀏覽器URL的歷史記錄，可以通過(guò)參數(shù)向前，向后，或者向指定URL跳轉(zhuǎn)

32.BOM和DOM區(qū)別？

BOM(瀏覽器對(duì)象)：與瀏覽器交互的方法和對(duì)象

BOM是瀏覽器對(duì)象模型，它指的是將瀏覽器當(dāng)作一個(gè)對(duì)象來(lái)對(duì)待，這個(gè)對(duì)象主要定義了與瀏覽器進(jìn)行交互的方法和接口

BOM的核心是window，而window對(duì)象具有雙重角色，它既是js訪(fǎng)問(wèn)瀏覽器窗口的一個(gè)接口，又是一個(gè)全局對(duì)象（Global）

這就意味著網(wǎng)頁(yè)中定義的任何對(duì)象、變量和函數(shù)，都會(huì)作為全局對(duì)象的一個(gè)屬性或者方法存在

DOM(文檔對(duì)象模型)：處理網(wǎng)頁(yè)內(nèi)容的方法和接
DOM是文檔對(duì)象模型，它指的是把文檔當(dāng)作一個(gè)對(duì)象來(lái)對(duì)待，這個(gè)對(duì)象主要定義了處理網(wǎng)頁(yè)的內(nèi)容和接口

33.如何解決跨域問(wèn)題？

了解同源策略：同源是指"協(xié)議+域名+端口"三者相同，它是瀏覽器最核心也最基本的安全功能如果缺少了同源策略，瀏覽器很容易受到XSS、CSRF等攻擊

通過(guò)jsonp跨域

nginx代理跨域

nodejs中間件跨域

后端在頭部信息中設(shè)置安全域名

前端代理

34.異步加載js方式？

設(shè)置``屬性 async="async" （一旦腳本可用，則會(huì)異步執(zhí)行）

動(dòng)態(tài)創(chuàng)建 script DOM：document.createElement('script');

XmlHttpRequest 腳本注入

異步加載庫(kù) LABjs

模塊加載器 Sea.js

35.哪些操作會(huì)導(dǎo)致內(nèi)存泄漏？

內(nèi)存泄漏： JavaScript 內(nèi)存泄露指對(duì)象在不需要使用它時(shí)仍然存在，導(dǎo)致占用的內(nèi)存不能使用或回收

未使用 var 聲明的全局變量

閉包函數(shù)(Closures)

循環(huán)引用(兩個(gè)對(duì)象相互引用)

控制臺(tái)日志(console.log)

移除存在綁定事件的DOM元素(IE)

setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話(huà)，會(huì)引發(fā)內(nèi)存泄漏

垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒(méi)有其他對(duì)象引用過(guò)該對(duì)象），或?qū)υ搶?duì)象的惟一引用是循環(huán)的，那么該對(duì)象的內(nèi)存即可回收

36.XML和JSON的區(qū)別？

數(shù)據(jù)體積：JSON數(shù)據(jù)體積更小

數(shù)據(jù)交互：JSON與JavaScript得交互更加方便，更容易被解析，更好的數(shù)據(jù)傳輸

傳輸速度：JSON傳輸速度快

數(shù)據(jù)描述：JSON對(duì)數(shù)據(jù)的描述相比XML較差

37.說(shuō)說(shuō)你對(duì)遞歸得理解？

遞歸：在數(shù)學(xué)與計(jì)算機(jī)科學(xué)中，是指在函數(shù)的定義中使用函數(shù)自身的方法

38.說(shuō)說(shuō)你對(duì)函數(shù)式編程的理解？?jī)?yōu)缺點(diǎn)？純函數(shù)，高階函數(shù)，柯里化

主要的編程范式有三種：命令式編程，聲明式編程和函數(shù)式編程

函數(shù)式編程：更加強(qiáng)調(diào)程序執(zhí)行的結(jié)果而非執(zhí)行的過(guò)程，簡(jiǎn)單來(lái)講，就是要把過(guò)程邏輯寫(xiě)成函數(shù)，定義好輸入?yún)?shù)，只關(guān)心它的輸出結(jié)果

純函數(shù)：純函數(shù)是對(duì)給定的輸入返還相同輸出的函數(shù)，并且要求你所有的數(shù)據(jù)都是不可變的，即純函數(shù)=無(wú)狀態(tài)+數(shù)據(jù)不可變

函數(shù)內(nèi)部傳入指定的值，就會(huì)返回確定唯一的值

不會(huì)造成超出作用域的變化，例如修改全局變量或引用傳遞的參數(shù)

高階函數(shù)：是以函數(shù)作為輸入或者輸出的函數(shù)被稱(chēng)為高階函數(shù)

柯里化：把一個(gè)多參數(shù)函數(shù)轉(zhuǎn)化成一個(gè)嵌套的一元函數(shù)的過(guò)程

優(yōu)點(diǎn)：

更好的管理狀態(tài)

更簡(jiǎn)單的復(fù)用

減少代碼量，提高維護(hù)性

缺點(diǎn)：

性能：函數(shù)式編程相對(duì)于指令式編程，性能絕對(duì)是一個(gè)短板，因?yàn)樗鶗?huì)對(duì)一個(gè)方法進(jìn)行過(guò)度包裝，從而產(chǎn)生上下文切換的性能開(kāi)銷(xiāo)

資源占用：在 JS 中為了實(shí)現(xiàn)對(duì)象狀態(tài)的不可變，往往會(huì)創(chuàng)建新的對(duì)象，因此，它對(duì)垃圾回收所產(chǎn)生的壓力遠(yuǎn)遠(yuǎn)超過(guò)其他編程方式

遞歸陷阱：在函數(shù)式編程中，為了實(shí)現(xiàn)迭代，通常會(huì)采用遞歸操作

39.Javascript中如何實(shí)現(xiàn)函數(shù)緩存？函數(shù)緩存有哪些應(yīng)用場(chǎng)景？

函數(shù)緩存，就是將函數(shù)運(yùn)算過(guò)的結(jié)果進(jìn)行緩存

實(shí)現(xiàn)方式：實(shí)現(xiàn)函數(shù)緩存主要依靠閉包、柯里化、高階函數(shù)

應(yīng)用場(chǎng)景：

對(duì)于昂貴的函數(shù)調(diào)用，執(zhí)行復(fù)雜計(jì)算的函數(shù)

對(duì)于具有有限且高度重復(fù)輸入范圍的函數(shù)

對(duì)于具有重復(fù)輸入值的遞歸函數(shù)

對(duì)于純函數(shù)，即每次使用特定輸入調(diào)用時(shí)返回相同輸出的函數(shù)

40. JSON 的了解？

JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。
它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫(xiě), 占用帶寬小
{‘a(chǎn)ge’:‘12’, ‘name’:‘back’}

41. document.write 和 innerHTML 的區(qū)別？

document.write 只能重繪整個(gè)頁(yè)面
innerHTML 可以重繪頁(yè)面的一部分

42. 請(qǐng)解釋一下 JavaScript 的同源策略？

概念:同源策略是客戶(hù)端腳本（尤其是Netscape Navigator2.0，其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載。
這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。
指一段腳本只能讀取來(lái)自同一來(lái)源的窗口和文檔的屬性。

43. 介紹一下閉包和閉包常用場(chǎng)景？

閉包是指有權(quán)訪(fǎng)問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)，創(chuàng)建閉包常見(jiàn)方式，就是在一個(gè)函數(shù)的內(nèi)部創(chuàng)建另一個(gè)函數(shù)

使用閉包主要為了設(shè)計(jì)私有的方法和變量，閉包的優(yōu)點(diǎn)是可以避免變量的污染，缺點(diǎn)是閉包會(huì)常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。在js中，函數(shù)即閉包，只有函數(shù)才會(huì)產(chǎn)生作用域的概念。

閉包有三個(gè)特性：

函數(shù)內(nèi)再嵌套函數(shù)

內(nèi)部函數(shù)可以引用外層的參數(shù)和變量

參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

閉包的好處：能夠?qū)崿F(xiàn)封裝和緩存等；

閉包的缺點(diǎn)就是常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)會(huì)造成內(nèi)存泄漏

應(yīng)用場(chǎng)景：

常見(jiàn)的防抖節(jié)流

使用閉包可以在 JavaScript 中模擬塊級(jí)作用域

閉包可以用于在對(duì)象中創(chuàng)建私有變量

44. javascript的內(nèi)存(垃圾)回收機(jī)制？

垃圾回收器會(huì)每隔一段時(shí)間找出那些不再使用的內(nèi)存，然后為其釋放內(nèi)存

標(biāo)記清除方法(mark and sweep),

這是JavaScript最常見(jiàn)的垃圾回收方式，當(dāng)變量進(jìn)入執(zhí)行環(huán)境的時(shí)候，比如函數(shù)中聲明一個(gè)變量，垃圾回收器將其標(biāo)記為“進(jìn)入環(huán)境”，當(dāng)變量離開(kāi)環(huán)境的時(shí)候（函數(shù)執(zhí)行結(jié)束）將其標(biāo)記為“離開(kāi)環(huán)境”

垃圾回收器會(huì)在運(yùn)行的時(shí)候給存儲(chǔ)在內(nèi)存中的所有變量加上標(biāo)記，然后去掉環(huán)境中的變量以及被環(huán)境中變量所引用的變量（閉包），在這些完成之后仍存在標(biāo)記的就是要?jiǎng)h除的變量了

引用計(jì)數(shù)方法(reference counting)
在低版本IE中經(jīng)常會(huì)出現(xiàn)內(nèi)存泄露，很多時(shí)候就是因?yàn)槠洳捎靡糜?jì)數(shù)方式進(jìn)行垃圾回收。引用計(jì)數(shù)的策略是跟蹤記錄每個(gè)值被使用的次數(shù)，當(dāng)聲明了一個(gè) 變量并將一個(gè)引用類(lèi)型賦值給該變量的時(shí)候這個(gè)值的引用次數(shù)就加1，如果該變量的值變成了另外一個(gè)，則這個(gè)值得引用次數(shù)減1，當(dāng)這個(gè)值的引用次數(shù)變?yōu)?的時(shí) 候，說(shuō)明沒(méi)有變量在使用，這個(gè)值沒(méi)法被訪(fǎng)問(wèn)了，因此可以將其占用的空間回收，這樣垃圾回收器會(huì)在運(yùn)行的時(shí)候清理掉引用次數(shù)為0的值占用的空間。

在IE中雖然JavaScript對(duì)象通過(guò)標(biāo)記清除的方式進(jìn)行垃圾回收，但BOM與DOM對(duì)象卻是通過(guò)引用計(jì)數(shù)回收垃圾的，也就是說(shuō)只要涉及BOM及DOM就會(huì)出現(xiàn)循環(huán)引用問(wèn)題。

45. 用js遞歸的方式寫(xiě)1到100求和？

function add(num1, num2) {
	const num = num1 + num2;
    if(num2 === 100) {
        return num;
	} else {
	    return add(num, num2 + 1)
    }
}
var sum = add(1, 2);

46. 事件隊(duì)列（宏任務(wù)微任務(wù)）

可以分為微任務(wù)（micro task）隊(duì)列和宏任務(wù)（macro task）隊(duì)列。

微任務(wù)一般比宏任務(wù)先執(zhí)行，并且微任務(wù)隊(duì)列只有一個(gè)，宏任務(wù)隊(duì)列可能有多個(gè)。另外我們常見(jiàn)的點(diǎn)擊和鍵盤(pán)等事件也屬于宏任務(wù)。

下面我們看一下常見(jiàn)宏任務(wù)和常見(jiàn)微任務(wù)。

常見(jiàn)宏任務(wù)：

setTimeout()

setInterval()

setImmediate()

常見(jiàn)微任務(wù)：

promise.then()、promise.catch()

new MutaionObserver()

process.nextTick()

微任務(wù)和宏任務(wù)的本質(zhì)區(qū)別。

宏任務(wù)特征：有明確的異步任務(wù)需要執(zhí)行和回調(diào)；需要其他異步線(xiàn)程支持。

微任務(wù)特征：沒(méi)有明確的異步任務(wù)需要執(zhí)行，只有回調(diào)；不需要其他異步線(xiàn)程支持。
setTimeout(function () {
 console.log("1");
}, 0);
async function async1() {
 console.log("2");
 const data = await async2();
 console.log("3");
 return data;
}
async function async2() {
 return new Promise((resolve) => {
     console.log("4");
     resolve("async2的結(jié)果");
 }).then((data) => {
     console.log("5");
     return data;
 });
}
async1().then((data) => {
 console.log("6");
 console.log(data);
});
new Promise(function (resolve) {
 console.log("7");
resolve()
}).then(function () {
 console.log("8");
});

// 2 4 7 5 8 3 6 async2的結(jié)果 1

43.async/await， Generator

async 是一個(gè)通過(guò)異步執(zhí)行并隱式返回 Promise 作為結(jié)果的函數(shù)。是Generator函數(shù)的語(yǔ)法糖，并對(duì)Generator函數(shù)進(jìn)行了改進(jìn)。
改進(jìn)：

內(nèi)置執(zhí)行器，無(wú)需手動(dòng)執(zhí)行 next() 方法。

更好的語(yǔ)義

更廣的適用性：co模塊約定，yield命令后面只能是 Thunk 函數(shù)或 Promise 對(duì)象，而async函數(shù)的await命令后面，可以是 Promise 對(duì)象和原始類(lèi)型的值（數(shù)值、字符串和布爾值，但這時(shí)會(huì)自動(dòng)轉(zhuǎn)成立即 resolved 的 Promise 對(duì)象）。

返回值是 Promise，比 Generator 函數(shù)返回的 Iterator 對(duì)象方便，可以直接使用 then() 方法進(jìn)行調(diào)用。

async 隱式返回 Promise 作為結(jié)果的函數(shù)，那么可以簡(jiǎn)單理解為，await后面的函數(shù)執(zhí)行完畢時(shí)，await會(huì)產(chǎn)生一個(gè)微任務(wù)(Promise.then是微任務(wù))。

Generator 是 ES6 引入的新概念，它允許在函數(shù)執(zhí)行過(guò)程中暫停和恢復(fù)它們的狀態(tài)。通過(guò) function* 聲明一個(gè) Generator 函數(shù)，可以在函數(shù)體內(nèi)使用關(guān)鍵字 yield 來(lái)生成一個(gè)狀態(tài)，并將函數(shù)掛起，等待下一次調(diào)用。Generator 函數(shù)返回一個(gè)可迭代對(duì)象，可以通過(guò) next() 方法獲取當(dāng)前生成器的狀態(tài)值。使用 Generator 函數(shù)可以更簡(jiǎn)單地實(shí)現(xiàn)異步操作，避免回調(diào)嵌套帶來(lái)的問(wèn)題。

48. JavaScript 是單線(xiàn)程的，瀏覽器是多進(jìn)程的

每打開(kāi)一個(gè)新網(wǎng)頁(yè)就會(huì)創(chuàng)建一個(gè)渲染進(jìn)程

渲染進(jìn)程是多線(xiàn)程的

負(fù)責(zé)頁(yè)面渲染的 GUI 渲染線(xiàn)程

負(fù)責(zé)JavaScript的執(zhí)行的 JavaScript 引擎線(xiàn)程，

負(fù)責(zé)瀏覽器事件循環(huán)的事件觸發(fā)線(xiàn)程，注意這不歸 JavaScript 引擎線(xiàn)程管

負(fù)責(zé)定時(shí)器的定時(shí)觸發(fā)器線(xiàn)程，setTimeout 中低于 4ms 的時(shí)間間隔算為4ms

負(fù)責(zé)XMLHttpRequest的異步 http 請(qǐng)求線(xiàn)程

GUI 渲染線(xiàn)程與 JavaScript 引擎線(xiàn)程是互斥的

單線(xiàn)程JavaScript是因?yàn)楸苊?DOM 渲染的沖突，web worker 支持多線(xiàn)程，但是 web worker 不能訪(fǎng)問(wèn) window 對(duì)象，document 對(duì)象等。

49.說(shuō)說(shuō) Javascript 數(shù)字精度丟失的問(wèn)題，如何解決？

例子：0.1+0.2===0.3 =>false 涉及IEE754標(biāo)準(zhǔn)

問(wèn)題原因：

計(jì)算機(jī)存儲(chǔ)雙精度浮點(diǎn)數(shù)需要先把十進(jìn)制數(shù)轉(zhuǎn)換為二進(jìn)制的科學(xué)記數(shù)法的形式，然后計(jì)算機(jī)以自己的規(guī)則{符號(hào)位+(指數(shù)位+指數(shù)偏移量的二進(jìn)制)+小數(shù)部分}存儲(chǔ)二進(jìn)制的科學(xué)記數(shù)法

因?yàn)榇鎯?chǔ)時(shí)有位數(shù)限制（64位），并且某些十進(jìn)制的浮點(diǎn)數(shù)在轉(zhuǎn)換為二進(jìn)制數(shù)時(shí)會(huì)出現(xiàn)無(wú)限循環(huán)，會(huì)造成二進(jìn)制的舍入操作(0舍1入)，當(dāng)再轉(zhuǎn)換為十進(jìn)制時(shí)就造成了計(jì)算誤差

解決：

使用 toFixed() 方法：將浮點(diǎn)數(shù)轉(zhuǎn)化為一個(gè)指定位數(shù)小數(shù)的字符串形式

使用第三方庫(kù)，Math.js、BigDecimal.js

50.說(shuō)說(shuō)你對(duì)模塊化方案的理解，比如 CommonJS、AMD、CMD、ES Module 分別是什么？

CommonJS加載模塊同步，主要用于服務(wù)器端，它主要依靠require和exports來(lái)實(shí)現(xiàn)模塊化，require用戶(hù)加載模塊，exports用于導(dǎo)出模塊

AMD異步模塊定義，他解決了在瀏覽器環(huán)境下文件以來(lái)管理，模塊加載的問(wèn)題。與commonjs不同，AMD使用異步方式加載模塊

CMD通用模塊定義，cmd也是為了解決瀏覽器端模塊化出現(xiàn)的，與AMD不同的是它使用同步方式加載模塊，主要依賴(lài)require和define來(lái)實(shí)現(xiàn)模塊化

ES Module是es6新增的模塊化方案，支持在瀏覽器和node.js使用，并且已經(jīng)得到了嵌入式運(yùn)行環(huán)境的支持，與commonjs和amd不同，ES Module是靜態(tài)加載它使用import和export關(guān)鍵字實(shí)現(xiàn)模塊化

51.用過(guò)哪些設(shè)計(jì)模式？

工廠(chǎng)模式：

工廠(chǎng)模式解決了重復(fù)實(shí)例化的問(wèn)題，但還有一個(gè)問(wèn)題,那就是識(shí)別問(wèn)題

主要好處就是可以消除對(duì)象間的耦合，通過(guò)使用工程方法而不是new關(guān)鍵字

構(gòu)造函數(shù)模式
使用構(gòu)造函數(shù)的方法，即解決了重復(fù)實(shí)例化的問(wèn)題，又解決了對(duì)象識(shí)別的問(wèn)題，該模式與工廠(chǎng)模式的不同之處在于,直接將屬性和方法賦值給 this對(duì)象;

52.javascript有哪些方法定義對(duì)象?

對(duì)象字面量： var obj = {}; 原型是Object.prototype

構(gòu)造函數(shù)： var obj = new Object();

Object.create(): var obj = Object.create(Object.prototype);

53.說(shuō)說(shuō)你對(duì)promise的了解

54.web開(kāi)發(fā)中會(huì)話(huà)跟蹤的方法有哪些？

cookie

session

url重寫(xiě)

隱藏input

ip地址

55.介紹js有哪些內(nèi)置對(duì)象？

Object 是 JavaScript 中所有對(duì)象的父對(duì)象

數(shù)據(jù)封裝類(lèi)對(duì)象：Object、Array、Boolean、Number 和 String

其他對(duì)象：Function、Arguments、Math、Date、RegExp、Error

56.eval是做什么的？

它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行

應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語(yǔ)句，一次執(zhí)行）

由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval，var obj =eval('('+ str +')')

57.parseInt函數(shù)，[“1”, “2”, “3”].map(parseInt) 答案是多少？

parseInt函數(shù)接收兩個(gè)參數(shù)第一個(gè)參數(shù)是要被解析的字符串，第二個(gè)參數(shù)是一個(gè)可選的進(jìn)制數(shù)。

答案：【1，NaN，NaN】

解析：

[‘1’,‘2’,‘3’].map(parseInt)通過(guò)map便利的數(shù)組會(huì)將索引作為第二個(gè)參數(shù)傳入，所以會(huì)以parseint(2,1)第二個(gè)參數(shù)1不是合法的進(jìn)制數(shù)，paeseint(3,2)這里因?yàn)?不是二進(jìn)制數(shù)

58.javascript 代碼中的"use strict";是什么意思？說(shuō)說(shuō)嚴(yán)格模式的限制

use strict是一種ECMAscript 5 添加的（嚴(yán)格）運(yùn)行模式,這種模式使得 Javascript 在更嚴(yán)格的條件下運(yùn)行,使JS編碼更加規(guī)范化的模式,消除Javascript語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為

限制：

變量必須聲明后再使用

函數(shù)的參數(shù)不能有同名屬性

不能使用with語(yǔ)句

禁止this指向window

59.js延遲加載的方式有哪些?

設(shè)置``屬性 defer="defer" （腳本將在頁(yè)面完成解析時(shí)執(zhí)行）

動(dòng)態(tài)創(chuàng)建 script DOM：document.createElement('script');

XmlHttpRequest 腳本注入

延遲加載工具 LazyLoad

60.同步和異步的區(qū)別?

同步：瀏覽器訪(fǎng)問(wèn)服務(wù)器請(qǐng)求，用戶(hù)看得到頁(yè)面刷新，重新發(fā)請(qǐng)求,等請(qǐng)求完，頁(yè)面刷新，新內(nèi)容出現(xiàn)，用戶(hù)看到新內(nèi)容,進(jìn)行下一步操作

異步：瀏覽器訪(fǎng)問(wèn)服務(wù)器請(qǐng)求，用戶(hù)正常操作，瀏覽器后端進(jìn)行請(qǐng)求。等請(qǐng)求完，頁(yè)面不刷新，新內(nèi)容也會(huì)出現(xiàn)，用戶(hù)看到新內(nèi)容

61.ES6新特性

增加了let和const命令，用來(lái)聲明變量。

新增模板字符串（為JavaScript提供了簡(jiǎn)單的字符串插值功能）

箭頭函數(shù)

for-of（用來(lái)遍歷數(shù)據(jù)—例如數(shù)組中的值。）

arguments對(duì)象可被不定參數(shù)和默認(rèn)參數(shù)完美代替。

擴(kuò)展運(yùn)算符，解構(gòu)賦值

ES6將promise對(duì)象納入規(guī)范，提供了原生的Promise對(duì)象。

增加了塊級(jí)作用域，let命令實(shí)際上就增加了塊級(jí)作用域。

還有就是引入module模塊的概念

62.let,const,var區(qū)別？

通過(guò)const聲明的對(duì)象屬性不可修改！??！

前端面試題pdf,前端,html,javascript,vue.js,react.js

63.let和var區(qū)別？

let命令不存在變量提升，如果在let前使用，會(huì)導(dǎo)致報(bào)錯(cuò)

如果塊區(qū)中存在let和const命令，就會(huì)形成封閉作用域

不允許重復(fù)聲明，因此，不能在函數(shù)內(nèi)部重新聲明參數(shù)

64.如果new一個(gè)箭頭函數(shù)的會(huì)怎么樣?

箭頭函數(shù)是ES6中的提出來(lái)的，它沒(méi)有prototype，也沒(méi)有自己的this指向，更不可以使用arguments參數(shù)，所以不能New一個(gè)箭頭函數(shù)。

65.箭頭函數(shù)與普通函數(shù)的區(qū)別？

箭頭函數(shù)比普通函數(shù)更加簡(jiǎn)潔

箭頭函數(shù)沒(méi)有自己的this

箭頭函數(shù)繼承來(lái)的this永遠(yuǎn)不會(huì)改變

箭頭函數(shù)不能走為構(gòu)造函數(shù)

箭頭函數(shù)沒(méi)有arguments

call，bind，apply無(wú)法改變this指向

66.擴(kuò)展運(yùn)算符的作用

擴(kuò)展運(yùn)算符：(…)

對(duì)象擴(kuò)展運(yùn)算符：用于取出參數(shù)對(duì)象中的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中

數(shù)組擴(kuò)展運(yùn)算符：可以將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列，且每次只能展開(kāi)一層數(shù)組

67.ES6中模板語(yǔ)法與字符串處理

在es6之前拼接字符串采用的是字符串通過(guò)’+'拼接，很麻煩

es6字符模板使用：``結(jié)合${變量名}

var name='lc'
var age = 27
var address = 'zg'
var information = `my name ${name},I am ${age} years old this year,I'm from ${address}`

68.map與forEach的區(qū)別

forEach方法，是最基本的方法，就是遍歷與循環(huán)，默認(rèn)有3個(gè)傳參：分別是遍歷的數(shù)組內(nèi)容item、數(shù)組索引index、和當(dāng)前遍歷數(shù)組Array

map方法，基本用法與forEach一致，但是不同的，它會(huì)返回一個(gè)新的數(shù)組，所以在callback需要有return值，如果沒(méi)有，會(huì)返回undefined

69.Js動(dòng)畫(huà)與CSS動(dòng)畫(huà)區(qū)別及相應(yīng)實(shí)現(xiàn)

CSS3的動(dòng)畫(huà)的優(yōu)點(diǎn)

在性能上會(huì)稍微好一些，瀏覽器會(huì)對(duì)CSS3的動(dòng)畫(huà)做一些優(yōu)化

代碼相對(duì)簡(jiǎn)單

缺點(diǎn)

在動(dòng)畫(huà)控制上不夠靈活

兼容性不好

JavaScript的動(dòng)畫(huà)正好彌補(bǔ)了這兩個(gè)缺點(diǎn)，控制能力很強(qiáng)，可以單幀的控制、變換，同時(shí)寫(xiě)得好完全可以兼容IE6，并且功能強(qiáng)大。對(duì)于一些復(fù)雜控制的動(dòng)畫(huà)，使用javascript會(huì)比較靠譜。而在實(shí)現(xiàn)一些小的交互動(dòng)效的時(shí)候，就多考慮考慮CSS吧

70.gulp是什么？

gulp是前端開(kāi)發(fā)過(guò)程中一種基于流的代碼構(gòu)建工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器；它不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化，而且在開(kāi)發(fā)過(guò)程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成

Gulp的特點(diǎn)：

易于使用：通過(guò)代碼優(yōu)于配置的策略，gulp 讓簡(jiǎn)單的任務(wù)簡(jiǎn)單，復(fù)雜的任務(wù)可管理

構(gòu)建快速 利用 Node.js 流的威力，你可以快速構(gòu)建項(xiàng)目并減少頻繁的 IO 操作

易于學(xué)習(xí) 通過(guò)最少的 API，掌握 gulp 毫不費(fèi)力，構(gòu)建工作盡在掌握：如同一系列流管道

71.事件的各個(gè)階段, addEventListener

捕獲階段–目標(biāo)階段–冒泡階段

由此，addEventListener的第三個(gè)參數(shù)設(shè)置為true和false的區(qū)別已經(jīng)非常清晰了

true表示該元素在事件的“捕獲階段”（由外往內(nèi)傳遞時(shí)）響應(yīng)事件

false表示該元素在事件的“冒泡階段”（由內(nèi)向外傳遞時(shí)）響應(yīng)事件 默認(rèn)false

72.數(shù)組some函數(shù)和every函數(shù)

every 函數(shù)接受一個(gè)函數(shù)作為參數(shù)，這個(gè)函數(shù)會(huì)被依次應(yīng)用到數(shù)組中的每個(gè)元素。該函數(shù)應(yīng)該返回一個(gè)布爾值：

如果返回 true，則表示當(dāng)前元素滿(mǎn)足條件，繼續(xù)檢查下一個(gè)元素。

如果返回 false，則表示當(dāng)前元素不滿(mǎn)足條件，every 函數(shù)將立即返回 false，不再檢查后面的元素

some 函數(shù)接受一個(gè)函數(shù)作為參數(shù)，這個(gè)函數(shù)會(huì)被依次應(yīng)用到數(shù)組中的每個(gè)元素。該函數(shù)應(yīng)該返回一個(gè)布爾值：

如果返回 true，則表示當(dāng)前元素滿(mǎn)足條件，some 函數(shù)將立即返回 true，不再檢查后面的元素。

如果返回 false，則表示當(dāng)前元素不滿(mǎn)足條件，繼續(xù)檢查下一個(gè)元素。

73.數(shù)組亂序

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    arr.sort(() => Math.random() - 0.5)

74.如何渲染幾萬(wàn)條數(shù)據(jù)并不卡住界面,requestAnimationFrame

requestAnimationFrame 是一個(gè)由瀏覽器提供的 API，用于優(yōu)化頁(yè)面動(dòng)畫(huà)、避免出現(xiàn)卡頓、異聞和掉幀的情況。它能夠在瀏覽器下一次重繪之前，通知瀏覽器調(diào)用一個(gè)指定的函數(shù)來(lái)更新動(dòng)畫(huà)，從而使得動(dòng)畫(huà)呈現(xiàn)更加流暢、自然。

實(shí)現(xiàn)流程：假如有一萬(wàn)條數(shù)據(jù)，我們還需要設(shè)置每次渲染條數(shù)，總計(jì)渲染次數(shù)，當(dāng)前渲染次數(shù)三個(gè)變量。首先自動(dòng)執(zhí)行一次渲染函數(shù)(loop)，通過(guò)條件判斷當(dāng)前渲染次數(shù)是否小于總渲染次數(shù)進(jìn)行繼續(xù)執(zhí)行，滿(mǎn)足條件調(diào)用window.requestAnimationFrame(具體渲染函數(shù)add);add函數(shù)中創(chuàng)建空標(biāo)簽用來(lái)接收每次渲染的結(jié)構(gòu)，減少回流次數(shù)，當(dāng)前渲染次數(shù)+1，繼續(xù)執(zhí)行l(wèi)oop函數(shù)

// 插入十萬(wàn)條數(shù)據(jù)
        const total = 100000
        // 一次插入 20 條，如果覺(jué)得性能不好就減少
        const once = 20
        // 渲染數(shù)據(jù)總共需要幾次
        const loopCount = total / once
        // 當(dāng)前渲染次數(shù)
        let countOfRender = 0
        let ul = document.querySelector("ul");
        function add() {
            // 優(yōu)化性能，插入不會(huì)造成回流  createDocumentFragment是一個(gè)指向空DocumentFragment對(duì)象的引用。下面先將20條插入空元素避免回流
            const fragment = document.createDocumentFragment();
            for (let i = 0; i < once; i++) {
                const li = document.createElement("li");
                li.innerText = Math.floor(Math.random() * total);
                fragment.appendChild(li);
            }
            // 一次性添加dom，減少回流次數(shù)
            ul.appendChild(fragment);
            countOfRender += 1;  
            loop();
        }
        function loop() {
            if (countOfRender < loopCount) {
                window.requestAnimationFrame(add);
            }
        }
        loop();

75.獲取到頁(yè)面中所有的checkbox怎么做

 var domList = document.getElementsByTagName(‘input’)
 var checkBoxList = [];
 var len = domList.length;　　//緩存到局部變量
 while (len--) {　　//使用while的效率會(huì)比f(wàn)or循環(huán)更高
 　　if (domList[len].type == ‘checkbox’) {
     　　checkBoxList.push(domList[len]);
 　　}
 }

76.怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)

創(chuàng)建節(jié)點(diǎn)：

createElement() 創(chuàng)建一個(gè)具體元素

createDocumentFragment() 創(chuàng)建一個(gè)dom片段

createTextNode() 創(chuàng)建一個(gè)文本節(jié)點(diǎn)

添加、移除、替換、插入：

appendChild() 添加

removeChild() 移除

replaceChild() 替換

insertBefore() 插入

查找：

getElementsByTagName() //通過(guò)標(biāo)簽名稱(chēng)

getElementsByName() //通過(guò)元素的Name屬性的值

getElementById() //通過(guò)元素Id，唯一性

77.window.onload和$(document).ready

window.onload()方法是必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。

$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢

78.addEventListener()和attachEvent()的區(qū)別

addEventListener()是符合W3C規(guī)范的標(biāo)準(zhǔn)方法; attachEvent()是IE低版本的非標(biāo)準(zhǔn)方法

addEventListener()支持事件冒泡和事件捕獲; - 而attachEvent()只支持事件冒泡

addEventListener()的第一個(gè)參數(shù)中,事件類(lèi)型不需要添加on; attachEvent()需要添加'on'

如果為同一個(gè)元素綁定多個(gè)事件, addEventListener()會(huì)按照事件綁定的順序依次執(zhí)行, attachEvent()會(huì)按照事件綁定的順序倒序執(zhí)行

79.數(shù)組去重

利用ES6 Set去重（ES6中最常用）

var arr = [1,2,2,2,3,3,3,3];

console.log(new Set(arr))

遍歷去重

include，indexof

80.判斷兩個(gè)對(duì)象相等

正常通過(guò)==比較，不可以判斷對(duì)象是否相等

需要通過(guò)JSON.stringify()先轉(zhuǎn)化為字符串再進(jìn)行比較

81.防抖節(jié)流

節(jié)流：如果這個(gè)事件會(huì)被頻繁觸發(fā)，那么節(jié)流函數(shù)會(huì)按照一定的頻率來(lái)執(zhí)行函數(shù)，不管在這個(gè)中間有多少次觸發(fā)這個(gè)事件，執(zhí)行函數(shù)的頻次總是固定的；

防抖：當(dāng)事件觸發(fā)時(shí)，相應(yīng)的函數(shù)并不會(huì)立即觸發(fā)，而是會(huì)等待一定的時(shí)間(非常短的時(shí)間)，當(dāng)事件密集觸發(fā)時(shí)，函數(shù)的觸發(fā)會(huì)被頻繁的推遲，只有等待了一段時(shí)間也沒(méi)有事件觸發(fā)，才會(huì)真正的執(zhí)行響應(yīng)函數(shù)

82.檢測(cè)瀏覽器版本版本有哪些方式？

根據(jù) navigator.userAgent UA.toLowerCase().indexOf('chrome')

根據(jù) window 對(duì)象的成員 'ActiveXObject' in window

83.javascript基本規(guī)范

不要在同一行聲明多個(gè)變量

請(qǐng)使用===/!==來(lái)比較true/false或者數(shù)值

使用對(duì)象字面量替代new Array這種形式

不要使用全局函數(shù)

Switch語(yǔ)句必須帶有default分支

If語(yǔ)句必須使用大括號(hào)

for-in循環(huán)中的變量應(yīng)該使用let關(guān)鍵字明確限定作用域，從而避免作用域污

84.npm和yarn，pnpm的優(yōu)勢(shì)是什么

npm:

npm 是 Node.js 自帶的包管理器，因此使用 npm 時(shí)不需要另外安裝軟件包，而且能夠使用大量的第三方包。npm 的命令簡(jiǎn)單易學(xué)，而且能夠滿(mǎn)足大部分項(xiàng)目的需求。

yarn :

提供了更好的性能和速度，安裝包時(shí)能夠并行下載，從而提高了安裝的效率

引入了鎖定文件的概念，用于確保開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的包版本一致性，從而避免了由于包版本不兼容而引發(fā)的問(wèn)題。

支持離線(xiàn)模式，如果項(xiàng)目中已經(jīng)安裝了所需的包，yarn 不需要從互聯(lián)網(wǎng)中下載包，而是直接使用本地緩存中的包。

pnpm:

最大優(yōu)勢(shì)是節(jié)約磁盤(pán)空間 pnpm 只在項(xiàng)目中安裝一份軟件包

pnpm 不需要重新安裝所有依賴(lài)項(xiàng)，而是對(duì)每個(gè)工程和依賴(lài)進(jìn)行增量安裝

85.導(dǎo)致頁(yè)面加載白屏?xí)r間長(zhǎng)的原因有哪些，怎么進(jìn)行優(yōu)化

原因：

大量 HTTP 請(qǐng)求：在頁(yè)面加載過(guò)程中，瀏覽器需要請(qǐng)求服務(wù)器獲取頁(yè)面的 HTML、CSS、JavaScript、圖片等資源，如果請(qǐng)求過(guò)多，會(huì)導(dǎo)致頁(yè)面加載時(shí)間變長(zhǎng)?？梢酝ㄟ^(guò)減少 HTTP 請(qǐng)求的數(shù)量來(lái)優(yōu)化加載速度，例如合并 CSS 和 JavaScript 文件，壓縮圖片等。

大量 JavaScript 代碼：當(dāng)瀏覽器下載并解析 JavaScript 代碼時(shí)，頁(yè)面的渲染會(huì)被阻塞，這也會(huì)導(dǎo)致頁(yè)面加載時(shí)間變長(zhǎng)?？梢酝ㄟ^(guò)將 JavaScript 代碼異步加載、延遲加載或分割成多個(gè)小文件來(lái)優(yōu)化加載速度。

大量 CSS 代碼：與 JavaScript 類(lèi)似，CSS 代碼也會(huì)阻塞頁(yè)面渲染，可以通過(guò)壓縮 CSS 代碼、減少 CSS 文件的大小和數(shù)量、使用外部鏈接等方法來(lái)優(yōu)化加載速度。

服務(wù)器響應(yīng)時(shí)間過(guò)長(zhǎng)：如果服務(wù)器響應(yīng)時(shí)間過(guò)長(zhǎng)，也會(huì)導(dǎo)致頁(yè)面加載時(shí)間變長(zhǎng)?？梢酝ㄟ^(guò)升級(jí)服務(wù)器硬件、優(yōu)化代碼等方式來(lái)減少服務(wù)器響應(yīng)時(shí)間。

不合理的 DOM 結(jié)構(gòu)：如果頁(yè)面的 DOM 結(jié)構(gòu)不合理，也會(huì)導(dǎo)致頁(yè)面加載時(shí)間變長(zhǎng)。可以通過(guò)減少 DOM 節(jié)點(diǎn)數(shù)量、避免使用 table 布局、使用 CSS Sprite(雪碧圖) 等方式來(lái)優(yōu)化加載速度。

優(yōu)化：

壓縮 HTML、CSS、JavaScript、圖片等資源，減少文件大小。

合并 CSS 和 JavaScript 文件，減少 HTTP 請(qǐng)求的數(shù)量。

將 JavaScript 代碼異步加載、延遲加載或分割成多個(gè)小文件。

使用瀏覽器緩存，避免重復(fù)下載資源。

使用外部鏈接或 CDN 加速器等方式來(lái)加速資源加載。

減少 DOM 節(jié)點(diǎn)數(shù)量，避免使用 table 布局等方式來(lái)優(yōu)化頁(yè)面渲染速度。

86.DOM克隆操作

深克隆(克隆元素內(nèi)文本節(jié)點(diǎn)加上所有后輩元素節(jié)點(diǎn))，

淺克?。寺≡乇旧?，不克隆文本節(jié)點(diǎn)和后輩節(jié)點(diǎn)）

cloneNode()接受一個(gè)可選值為true或false的參數(shù)。True 表示克隆元素和它的所有子節(jié)點(diǎn)。False表示克隆元素但不包含它的子節(jié)點(diǎn)

87.沙箱模式

沙箱模式是一種軟件設(shè)計(jì)模式，用于創(chuàng)建一個(gè)獨(dú)立的、受保護(hù)的執(zhí)行環(huán)境，隔離代碼與外部世界的交互，并限制代碼所能訪(fǎng)問(wèn)的資源和功能。在JavaScript中，沙箱模式通常通過(guò)將代碼封裝在匿名函數(shù)中并立即調(diào)用來(lái)實(shí)現(xiàn)。這樣可以創(chuàng)建一個(gè)私有作用域，其中的變量也不會(huì)泄漏到全局作用域，從而避免了變量名沖突和數(shù)據(jù)污染。

雖然閉包和沙箱模式是不同的概念，但它們可以相互結(jié)合，以實(shí)現(xiàn)更高級(jí)別的編程需求。例如，可以使用閉包來(lái)創(chuàng)建一個(gè)沙箱，限制函數(shù)所能訪(fǎng)問(wèn)的變量范圍。這種組合可以使代碼更加清晰、安全和易于維護(hù)。

88.string和tostring什么區(qū)別

string和ToString方法的區(qū)別在于它們的作用不同。

string是一種數(shù)據(jù)類(lèi)型，用于存儲(chǔ)和處理字符串，而ToString是一個(gè)通用方法，用于將數(shù)據(jù)轉(zhuǎn)換為字符串。當(dāng)我們需要將一些非字符串類(lèi)型的數(shù)據(jù)轉(zhuǎn)換為字符串時(shí)，就可以使用ToString方法來(lái)實(shí)現(xiàn)。

89.js數(shù)據(jù)存儲(chǔ)方式

Cookie：Cookie是一種在瀏覽器端存儲(chǔ)數(shù)據(jù)的機(jī)制，它可以支持長(zhǎng)期存儲(chǔ)數(shù)據(jù)，并且數(shù)據(jù)可以在不同的頁(yè)面之間共享。使用JavaScript可以通過(guò)document.cookie屬性來(lái)操作Cookie。

Web Storage：Web Storage提供了Session Storage和Local Storage兩種機(jī)制，都是HTML5新增的。Session Storage用于臨時(shí)性的會(huì)話(huà)數(shù)據(jù)存儲(chǔ)，數(shù)據(jù)在用戶(hù)關(guān)閉瀏覽器后將被清除，而Local Storage則可以長(zhǎng)期存儲(chǔ)數(shù)據(jù)，即使用戶(hù)關(guān)閉瀏覽器也不會(huì)丟失。使用JavaScript可以通過(guò)window.sessionStorage和window.localStorage對(duì)象來(lái)操作這兩種存儲(chǔ)機(jī)制。

IndexedDB：IndexedDB是一種在瀏覽器中存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)的機(jī)制，它類(lèi)似于一個(gè)本地?cái)?shù)據(jù)庫(kù)。IndexedDB提供了一個(gè)異步的API，可以在瀏覽器中建立對(duì)象存儲(chǔ)空間，在其中存儲(chǔ)鍵值對(duì)數(shù)據(jù)。使用JavaScript可以通過(guò)IndexedDB API來(lái)操作這種存儲(chǔ)機(jī)制。

Web SQL：廢棄

90.cookie,session,token區(qū)別

Cookie：Cookie是在用戶(hù)端存儲(chǔ)數(shù)據(jù)的一種機(jī)制，它可以存儲(chǔ)一些簡(jiǎn)單的用戶(hù)信息和標(biāo)識(shí)。服務(wù)器通過(guò)設(shè)置Cookie并發(fā)送到客戶(hù)端，在下次請(qǐng)求時(shí)客戶(hù)端會(huì)自動(dòng)攜帶該Cookie，從而實(shí)現(xiàn)對(duì)用戶(hù)身份的驗(yàn)證或其他操作。Cookie的缺點(diǎn)是可能面臨安全問(wèn)題，因?yàn)镃ookie存儲(chǔ)在客戶(hù)端，容易遭受竊取或偽造攻擊。

Session：Session是在服務(wù)器端存儲(chǔ)數(shù)據(jù)的一種機(jī)制，它可以保存一些復(fù)雜的用戶(hù)信息和狀態(tài)，用于實(shí)現(xiàn)對(duì)用戶(hù)身份的驗(yàn)證和跟蹤。服務(wù)器使用一個(gè)唯一的Session ID來(lái)和客戶(hù)端進(jìn)行交互，從而避免了安全性問(wèn)題。但是Session也存在一些缺點(diǎn)，例如對(duì)服務(wù)器負(fù)載壓力較大等問(wèn)題。

Token：Token是一種包含用戶(hù)身份和權(quán)限信息的加密字符串，通常由服務(wù)器生成并發(fā)送給客戶(hù)端?？蛻?hù)端使用Token代替Cookie或Session來(lái)進(jìn)行身份驗(yàn)證和數(shù)據(jù)傳輸。Token的優(yōu)點(diǎn)是可以減輕服務(wù)器壓力，減少網(wǎng)絡(luò)流量和延遲，并且減少了安全性問(wèn)題。Token的缺點(diǎn)是需要保證其加密和傳輸?shù)陌踩浴?/li>

Cookie適用于簡(jiǎn)單的身份驗(yàn)證和數(shù)據(jù)存儲(chǔ)，Session適用于需要復(fù)雜狀態(tài)管理和用戶(hù)跟蹤的場(chǎng)景，而Token則更適合于分布式系統(tǒng)和APP等跨平臺(tái)的數(shù)據(jù)傳輸。

91.js十進(jìn)制轉(zhuǎn)二進(jìn)制

使用 toString() 方法和參數(shù) 2：
let num = 123
num.toString()  //'123'
num.toString(2)  //'1111011'

92.如何讓多個(gè)異步函數(shù)順序執(zhí)行

使用 Promise 的 then 方法鏈接異步任務(wù)。

使用 async/await 關(guān)鍵字。

93.settimeout事件機(jī)制

setTimeout() 方法的實(shí)現(xiàn)基于事件機(jī)制，它會(huì)將回調(diào)函數(shù)添加到事件隊(duì)列中。當(dāng)指定的延遲時(shí)間到達(dá)后，該回調(diào)函數(shù)被推入到事件隊(duì)列的最后，等待 JavaScript 引擎空閑時(shí)執(zhí)行。

由于 JavaScript 的單線(xiàn)程特性和事件循環(huán)機(jī)制，多個(gè)任務(wù)可能會(huì)阻塞事件隊(duì)列，從而導(dǎo)致異步代碼無(wú)法按照預(yù)期的順序執(zhí)行，我們需要合理地使用定時(shí)器以避免這種情況。

如果設(shè)置的延遲時(shí)間小于 4 毫秒，則實(shí)際的延遲時(shí)間可能會(huì)大于設(shè)置值，因?yàn)闉g覽器通常會(huì)使用 4 毫秒的最小時(shí)間間隔來(lái)執(zhí)行定時(shí)器任務(wù)。

94.bind連續(xù)綁多次最終this指向

先看代碼：
function say() {
	alert(this.x);
};
var a = say.bind({x: 1});
var b = a.bind({x: 2});
b(); // 這里會(huì)輸出1還是2呢？    答案：1
無(wú)論使用bind綁定多少次，最終原函數(shù)的this值是由第一次綁定傳的參數(shù)決定的。

95.mep和set

Map：可迭代的集合，其中每個(gè)元素都由一個(gè)鍵和一個(gè)相應(yīng)的值組成。Map 中的鍵可以是任何類(lèi)型，而值也可以是任何類(lèi)型，包括對(duì)象引用和原始值。

Set：一種只含有唯一值的集合，不允許出現(xiàn)重復(fù)項(xiàng)。Set 中的值可以是任何類(lèi)型，包括對(duì)象引用和原始值。

96.大文件上傳

分片上傳：將大文件分成多個(gè)小文件，每個(gè)小文件單獨(dú)上傳，最后在服務(wù)器端進(jìn)行合并操作，這樣可以減少上傳和下載的時(shí)間，并且一旦上傳失敗只需要重新上傳失敗的那個(gè)分片，而不需要整個(gè)文件重新上傳。

斷點(diǎn)續(xù)傳：在分片上傳的基礎(chǔ)上，可以利用本地存儲(chǔ)技術(shù)記錄已經(jīng)上傳的分片信息，當(dāng)上傳失敗時(shí)，可以根據(jù)已經(jīng)上傳的分片信息來(lái)繼續(xù)上傳失敗的那個(gè)分片，從而實(shí)現(xiàn)斷點(diǎn)續(xù)傳。

流式上傳：在傳統(tǒng)的上傳方式中，文件需要完全讀入內(nèi)存才能上傳，而在流式上傳中，文件是按照流的方式逐個(gè)讀取上傳，可以避免一次性讀取整個(gè)大文件，從而減少內(nèi)存的占用。

壓縮上傳：對(duì)于某些文件類(lèi)型，比如文本文件、圖片、視頻等，可以先對(duì)其進(jìn)行壓縮再上傳，可以減少文件的大小并加快上傳速度。

使用斷電續(xù)傳 SDK：除了自己實(shí)現(xiàn)斷點(diǎn)續(xù)傳外，也可以使用一些第三方的斷點(diǎn)續(xù)傳 SDK，如七牛、阿里云等都提供了相關(guān)的 SDK，可以簡(jiǎn)化大文件上傳的實(shí)現(xiàn)。

97.移動(dòng)端Click300毫秒點(diǎn)擊延遲解決辦法

產(chǎn)生原因：瀏覽器需要等待一段時(shí)間（大約 300 毫秒）來(lái)檢測(cè)用戶(hù)是單擊還是雙擊。

使用 FastClick：FastClick 是一個(gè) JavaScript 插件，它可以通過(guò)消除移動(dòng)瀏覽器上的點(diǎn)擊延遲來(lái)提高 Web 應(yīng)用程序的響應(yīng)速度。使用 FastClick 只需要在頁(yè)面加載完成后引入庫(kù)文件，并在需要綁定快速點(diǎn)擊的元素上通過(guò) FastClick.attach(element) 方法進(jìn)行綁定即可。

使用 touch 事件：如果不想使用第三方庫(kù)或插件，也可以通過(guò)原生的 touch 事件來(lái)模擬快速點(diǎn)擊。例如，可以通過(guò)監(jiān)聽(tīng) touchstart 事件來(lái)代替 click 事件，實(shí)現(xiàn)更快的響應(yīng)速度。

設(shè)置 meta 標(biāo)簽：將以下 meta 標(biāo)簽添加到 HTML 文件的 head 標(biāo)簽中，可以告訴瀏覽器不要縮放頁(yè)面，并且禁用縮放手勢(shì)，從而提高點(diǎn)擊響應(yīng)速度：

98.如何判斷一個(gè)對(duì)象為空對(duì)象

通過(guò) Object.keys(obj) 方法獲取對(duì)象的所有屬性名，并判斷屬性數(shù)量是否為 0 來(lái)實(shí)現(xiàn) 、
let obj = {'name':'zs'}
Object.keys(obj).length     //1
let objs = {}
Object.keys(objs).length	//0

99.數(shù)組常用方法

push：向數(shù)組末尾添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度。

pop：刪除并返回?cái)?shù)組最后一個(gè)元素。

shift：刪除并返回?cái)?shù)組第一個(gè)元素。

unshift：向數(shù)組開(kāi)頭添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度。

concat：合并兩個(gè)或多個(gè)數(shù)組，并返回新的數(shù)組。不改變?cè)瓟?shù)組。

join：將數(shù)組中的所有元素轉(zhuǎn)化為字符串，并用指定的分隔符連接起來(lái)。

slice：返回?cái)?shù)組的一個(gè)片段（淺拷貝），不影響原數(shù)組。

splice：在數(shù)組中添加或刪除元素，可修改原數(shù)組。

sort：對(duì)數(shù)組元素進(jìn)行排序，默認(rèn)按照 Unicode 碼點(diǎn)升序排列，可傳入回調(diào)函數(shù)實(shí)現(xiàn)自定義排序。

reverse：翻轉(zhuǎn)數(shù)組元素順序，改變?cè)瓟?shù)組。

indexOf：查詢(xún)?cè)卦跀?shù)組中第一次出現(xiàn)的位置，找到返回其下標(biāo)，否則返回-1。

lastIndexOf：從數(shù)組末尾開(kāi)始查詢(xún)?cè)卦跀?shù)組中最后一次出現(xiàn)的位置，找到返回其下標(biāo)，否則返回-1。

filter：返回由滿(mǎn)足回調(diào)函數(shù)條件的所有元素組成的新數(shù)組，不改變?cè)瓟?shù)組。

map：返回一個(gè)新數(shù)組，其中的元素是對(duì)原有數(shù)組元素應(yīng)用回調(diào)函數(shù)后得到的結(jié)果。

reduce：累加器方法，對(duì)數(shù)組的每個(gè)元素（從左到右）執(zhí)行一個(gè)回調(diào)函數(shù)，返回單個(gè)值。

some：判斷數(shù)組是否具有滿(mǎn)足條件的值,有就返回true

every：判斷數(shù)組所有值是否都滿(mǎn)足條件，都滿(mǎn)足返回true

forEach:循環(huán)數(shù)組

100.數(shù)組扁平化

使用遞歸

使用 reduce 方法：reduce 方法可以用來(lái)將數(shù)組中的每個(gè)元素累加到一個(gè)結(jié)果中

使用 flat 方法：

ES2019 中引入了數(shù)組的 flat 方法，可以將嵌套的數(shù)組扁平化成一維數(shù)組。

flat 方法只能夠?qū)⑶短椎膶訑?shù)降至一維，如果需要將多維數(shù)組扁平化成一維數(shù)組，則需要傳遞一個(gè)大于等于嵌套層數(shù)的參數(shù) arr.flat( Infinity ), Infinity 表示扁平化任何深度的嵌套數(shù)組

101.for…in 和 for … of區(qū)別

for…in 循環(huán)是用來(lái)遍歷對(duì)象屬性的，它可以枚舉目標(biāo)對(duì)象的所有可枚舉屬性，包括繼承鏈上的屬性，但遍歷的順序是不確定的

for…of 循環(huán)是用來(lái)遍歷可迭代對(duì)象 (Iterable) 的，它可以遍歷數(shù)組、字符串、Map、Set 等內(nèi)置的可迭代對(duì)象，但不能遍歷普通的對(duì)象，也不能遍歷對(duì)象的屬性

區(qū)別：

for…in遍歷數(shù)組返回下標(biāo)，遍歷對(duì)象返回鍵

for…of遍歷數(shù)組返回?cái)?shù)據(jù)，不可以遍歷普通對(duì)象

102.偽數(shù)組,偽數(shù)組轉(zhuǎn)換為數(shù)組

偽數(shù)組是一種類(lèi)數(shù)組對(duì)象，它具有類(lèi)似數(shù)組的結(jié)構(gòu)和特性，但并不是真正的數(shù)組。

在 JavaScript 中，常見(jiàn)的偽數(shù)組包括函數(shù)參數(shù) arguments、DOM 元素集合 NodeList 和 HTMLCollection 等。

偽數(shù)組和數(shù)組區(qū)別：

偽數(shù)組沒(méi)有數(shù)組的方法和屬性（如 push、pop、length），不能使用數(shù)組相關(guān)的循環(huán)方法（如 forEach、map、reduce）等。但它們具有類(lèi)數(shù)組的結(jié)構(gòu)，可以通過(guò)下標(biāo)來(lái)訪(fǎng)問(wèn)元素，并且擁有 length 屬性

轉(zhuǎn)換： Array.from() 方法或者擴(kuò)展運(yùn)算符文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-530121.html

103.二維數(shù)組應(yīng)用場(chǎng)景

游戲開(kāi)發(fā)：在游戲開(kāi)發(fā)中，二維數(shù)組通常被用來(lái)表示游戲場(chǎng)景、地圖、迷宮等

圖像處理：在圖像處理中，二維數(shù)組常用于表示圖像的像素點(diǎn)，每個(gè)像素點(diǎn)可以用一個(gè)顏色值來(lái)表示

數(shù)字計(jì)算：在數(shù)學(xué)計(jì)算中，二維數(shù)組經(jīng)常用于存儲(chǔ)和處理矩陣

到了這里，關(guān)于2023年最新前端面試題匯總大全（含答案超詳細(xì)，HTML,JS,CSS匯總篇）-- 持續(xù)更新的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀(guān)點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

2023年最新react面試題附詳細(xì)答案
React是一個(gè)用于構(gòu)建用戶(hù)界面的JavaScript庫(kù)。它由Facebook開(kāi)發(fā)，現(xiàn)已成為最受歡迎的前端庫(kù)之一。 React的主要特點(diǎn)包括：組件化虛擬DOM 單向數(shù)據(jù)流 JSX語(yǔ)法高效的性能生態(tài)系統(tǒng)豐富 JSX是一種JavaScript的語(yǔ)法擴(kuò)展，它允許我們?cè)贘avaScript中編寫(xiě)類(lèi)似HTML的代碼。它是React的核心之一
2024年02月12日
瀏覽(21)
網(wǎng)絡(luò)安全面試題集及答案整理匯總（2023最新版詳細(xì)）
隨著國(guó)家政策的扶持，網(wǎng)絡(luò)安全行業(yè)也越來(lái)越為大眾所熟知，想要進(jìn)入到網(wǎng)絡(luò)安全行業(yè)的人也越來(lái)越多。為了拿到心儀的Offer之外，除了學(xué)好網(wǎng)絡(luò)安全知識(shí)以外，還要應(yīng)對(duì)好企業(yè)的面試。作為一個(gè)安全老鳥(niǎo)，工作這么多年，面試過(guò)很多人也出過(guò)很多面試題目，也在網(wǎng)上收集了
2024年02月08日
瀏覽(21)
2023 最新前端面試題（HTML 篇）
src 用于替換當(dāng)前元素（引入），href 用于在當(dāng)前文檔和引用資源之間確立聯(lián)系（引用）（1）src（source）指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求 src 資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如 js 腳本，img 圖片和 frame 等元素
2024年02月10日
瀏覽(28)
2023金九銀十Java面試八股文大全1200道面試題附答案詳解，最全面詳細(xì)
我的回答是：很有必要。你可以討厭這種模式，但你一定要去背，因?yàn)椴槐衬憔瓦M(jìn)不了大廠(chǎng)?，F(xiàn)如今，Java 面試的本質(zhì)就是八股文，把八股文面試題背好，面試才有可能表現(xiàn)好。金九銀十招聘黃金季已經(jīng)來(lái)臨！大家在考研和找工作中糾結(jié)的時(shí)候，不妨先看一下面試題，畢竟我
2024年02月13日
瀏覽(99)
2023 年最新版Java面試題及答案整理（完整版，超詳細(xì)）
程序員一步入中年，不知不覺(jué)便會(huì)被鋪天蓋地的“危機(jī)感”上身，曾經(jīng)的那個(gè)少年已經(jīng)不在，時(shí)間就是這樣公平。就算你能發(fā)明Java語(yǔ)言，隨著時(shí)間的推移，你注定還是要成為慢慢變蔫的茄子，緩緩變黑的葡萄。看著金九銀十就要來(lái)臨的消息，嚇得我周末趕緊拿出了面試資料
2024年02月14日
瀏覽(26)
2023版一線(xiàn)大廠(chǎng)Java面試八股文（最新版）1000+ 面試題附答案詳解，最全面詳細(xì)
我的回答是：很有必要。你可以討厭這種模式，但你一定要去背，因?yàn)椴槐衬憔瓦M(jìn)不了大廠(chǎng)?，F(xiàn)如今，Java 面試的本質(zhì)就是八股文，把八股文面試題背好，面試才有可能表現(xiàn)好。金九銀十招聘黃金季已經(jīng)來(lái)臨！大家在考研和找工作中糾結(jié)的時(shí)候，不妨先看一下面試題，畢竟我
2024年02月08日
瀏覽(33)
2023前端vue面試真題內(nèi)涵詳細(xì)的代碼演示以及答案說(shuō)明
請(qǐng)解釋Vue.js中的雙向數(shù)據(jù)綁定。答案：雙向數(shù)據(jù)綁定是指當(dāng)數(shù)據(jù)模型發(fā)生變化時(shí)，視圖也會(huì)隨之更新，同時(shí)當(dāng)用戶(hù)在視圖上進(jìn)行操作時(shí)，數(shù)據(jù)模型也會(huì)發(fā)生變化。在Vue.js中，可以使用v-model指令實(shí)現(xiàn)雙向數(shù)據(jù)綁定。例如：請(qǐng)解釋Vue.js中的生命周期鉤子函數(shù)。答案：Vue.js中的生
2023年04月18日
瀏覽(28)
Python最新面試題匯總及答案
1、Django 的生命周期？前端發(fā)起請(qǐng)求 nginx uwsgi 中間件 URL view視圖通過(guò)orm與model層進(jìn)行數(shù)據(jù)交互拿到數(shù)據(jù)返回給view 試圖將數(shù)據(jù)渲染到模板中拿到字符串中間件 uwsgi nginx 前端渲染 2、中間件的五種方法？ process_request process_response Process_view Process_exception Process_render_template 3、d
2024年02月11日
瀏覽(21)
2023年java面試問(wèn)題大全及答案大全
202年常見(jiàn)的Java面試問(wèn)題和答案： Java中的基本數(shù)據(jù)類(lèi)型有哪些？答：Java中的基本數(shù)據(jù)類(lèi)型包括整型(int, short, long, byte)、浮點(diǎn)型(float, double)、字符型(char)和布爾型(boolean)。 String和StringBuilder之間的區(qū)別是什么？答：String是不可變的，每次對(duì)String的操作都會(huì)創(chuàng)建一個(gè)新的String對(duì)
2024年02月15日
瀏覽(22)
最新網(wǎng)絡(luò)安全崗位面試題匯總（附答案解析）
以下為網(wǎng)絡(luò)安全各個(gè)方向涉及的面試題，星數(shù)越多代表問(wèn)題出現(xiàn)的幾率越大，祝各位都能找到滿(mǎn)意的工作。一、滲透測(cè)試如何繞過(guò)CDN找到真實(shí)IP，請(qǐng)列舉五種方法 (★★★) redis未授權(quán)訪(fǎng)問(wèn)如何利用，利用的前提條件是？(★★★) mysql提權(quán)方式有哪些?利用條件是什么? (★) win
2024年02月12日
瀏覽(27)

<rp id="cvjbf"></rp>

<span id="cvjbf"></span>

<rp id="cvjbf"><menu id="cvjbf"><listing id="cvjbf"></listing></menu></rp>
<menuitem id="cvjbf"></menuitem>