50 道前端面試題【附答案和源碼】
時(shí)間：2023-09-10 18:30:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-10 18:30:02 來源：網(wǎng)站運(yùn)營
50 道前端面試題【附答案和源碼】：
一、舉例說明局部變量和隱式全局變量f1(); //調(diào)用方法 f1,方法被執(zhí)行，此時(shí) a 是局部變量，外部不能訪問，b 和 c 是隱式全局變量，外部可以訪問console.log(c); // 隱式全局變量，外部可以訪問，輸出 2console.log(b); // 隱式全局變量，外部可以訪問，輸出 2console.log(a); // 局部變量，方法外部不能訪問，報(bào)錯(cuò)function f1(){ // f1 方法 // 方法中定義的變量為局部變量，var a=b=c=2,相當(dāng)于 var a=2, b=2, c=2 // 聲明變量沒有 var，b=2 這樣賦值的變量為隱式全局變量，在方法外部也能訪問 // 所以 a 有且僅能在方法內(nèi)部訪問，b 和 c 可以在方法外面訪問 var a=b=c=2 console.log(a); // 輸出 2 console.log(b); // 輸出 2 console.log(c); // 輸出 2}二、如下分別輸出什么？var name = "The Window";var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; }};alert(object.getNameFunc()()); // 輸出 The Windowvar name = "The Window";var object = { name : "My Object", getNameFunc : function(){ var that = this; return function(){ return that.name; }; }};alert(object.getNameFunc()()); // 輸出 My Object三、選中輸入框顯示對(duì)應(yīng)提示的幾種解決方式<html> <body> <div> <div style="text-align:center;"> <p id="help">Helpful notes will appear here</p> <p>E-mail: <input type="text" id="email" name="email"></p> <p>Name: <input type="text" id="name" name="name"></p> <p>Age: <input type="text" id="age" name="age"></p> </div> <div> </div> </div> </body> <style> </style> <script> function showHelp(help) { document.getElementById('help').innerHTML = help; } /* // 第一種修改方式 function makeHelpCallback(help) { return function() { showHelp(help); }; } */ function setupHelp() { var helpText = [ {'id': 'email', 'help': 'Your e-mail address'}, {'id': 'name', 'help': 'Your full name'}, {'id': 'age', 'help': 'Your age (you must be over 16) this.$message.error($1)'} ]; for (var i = 0; i < helpText.length; i++) { var item = helpText[i]; // 第三種修改方式 let item = helpText[i]; document.getElementById(item.id).onfocus = function() { showHelp(item.help); } /* // 第一種修改方式 document.getElementById(item.id).onfocus = makeHelpCallback(item.help); */ /* //第二種修改方式 (function() { var item = helpText[i]; document.getElementById(item.id).onfocus = function() { showHelp(item.help); } })(); // 馬上把當(dāng)前循環(huán)項(xiàng)的item與事件回調(diào)相關(guān)聯(lián)起來 */ /* //第四種方式 helpText.forEach(function(text) { document.getElementById(text.id).onfocus = function() { showHelp(text.help); } }); */ } } setupHelp(); </script></html>四、javascript 中將兩個(gè)變量互換，你能想到幾種方式？var a = 5;var b = 10;a 和 b 變量互換
第一種是建中間變量
第二種是 異或 a = a^b; b=a^b; a=a^b
第三種 a = a + b; b = a - b; a = a - b;
第四種 console.log("a="+b);console.log("b="+a);
第五種 a=[b，b=a][0];
第六種 var [a,b] = [b,a]
五、在瀏覽器中 從輸入地址到最終的頁面渲染完成 發(fā)生了什么，經(jīng)過哪幾部分？
1、DNS 域名解析，把域名解析成 ip 地址；
2、通過 tcp 協(xié)議與服務(wù)器握手跟服務(wù)器建立鏈接；
3、瀏覽器向服務(wù)器發(fā)送請(qǐng)求；
4、服務(wù)器響應(yīng)，若狀態(tài)碼為 200 瀏覽器接受返回的HTML頁面開始渲染；
5、瀏覽器深度遍歷 HTML 節(jié)點(diǎn)生成 dom 樹；
6、解析 css dom 樹并應(yīng)用他們；
7、js 根據(jù)新的渲染樹計(jì)算各個(gè)節(jié)點(diǎn)的位置。
六、前端如何做優(yōu)化
了解了瀏覽器渲染界面的過程其實(shí)對(duì)于前端的優(yōu)化就有思路了
1、css 放在文件頭部，javascript 放在底部；
2、盡量減少 http 請(qǐng)求次數(shù)；
3、善用緩存不要重復(fù)加載相同的資源，比如用戶登錄之后的用戶信息等；
4、圖片優(yōu)化，采用圖片懶加載，在頁面開始加載的時(shí)候，不請(qǐng)求真實(shí)圖片地址，而是用默認(rèn)圖占位，當(dāng)前頁面加載完成后，在根據(jù)相關(guān)的條件依次加載真實(shí)圖片；
5、降低css選擇器的復(fù)雜性，盡量使用 id 和 class。
以上只是幾種比較典型的優(yōu)化方式，除了這些還有很多細(xì)節(jié)的優(yōu)化。
七、Sql腳本注入原理是什么？如何防止腳本注入？
主要原理：
通過把SQL命令插入到Web表單提交或輸入域名或頁面請(qǐng)求的查詢字符串，最終達(dá)到欺騙服務(wù)器執(zhí)行惡意的SQL命令
防止：
1、使用預(yù)編譯，綁定變量，避免出現(xiàn)執(zhí)行拼接字符的情況；
2、過濾特殊字符和語句；
3、頁面不錯(cuò)誤回顯。
八、position的absolute與fixed共同點(diǎn)與不同點(diǎn)是什么？
共同點(diǎn)：
1、改變行內(nèi)元素的呈現(xiàn)方式，display被置為inline-block；
2、讓元素脫離普通流，不占據(jù)空間；
3、默認(rèn)會(huì)覆蓋到非定位元素上
不同點(diǎn)：
absolute的”根元素“是可以設(shè)置的，而fixed的”根元素“固定為瀏覽器窗口；
當(dāng)你滾動(dòng)網(wǎng)頁，fixed元素與瀏覽器窗口之間的距離是不變的。
九、編寫一個(gè)函數(shù)來計(jì)算第 N 個(gè)斐波那契數(shù)
function fibonacci(n){ if (typeof n !== "number" || n < 1) { return n; }else if (n <= 2) { return 1; }else{ return fibonacci(n-1) + fibonacci(n-2); } }var temp = fibonacci(8)console.log(temp)注意：執(zhí)行此函數(shù)時(shí)數(shù)字不宜過大(超過100電腦會(huì)有卡頓，超過1000電腦會(huì)有明顯卡頓，超過10000電腦會(huì)卡死)
十、display:none和visibility:hidden的區(qū)別？
display:none 隱藏對(duì)應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會(huì)合攏，
就當(dāng)他從來不存在。
visibility:hidden 隱藏對(duì)應(yīng)的元素，但是在文檔布局中仍保留原來的空間。
十一、什么是回流和重繪？回流和重繪的區(qū)別是什么？
當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸、布局、隱藏等改變而需要重新構(gòu)建，這就稱為回流(reflow)。
當(dāng)render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會(huì)影響布局的，比如background-color。則就叫稱為重繪。
回流必將引起重繪，而重繪不一定會(huì)引起回流。
十二、你如何向非技術(shù)背景的利益相關(guān)者解釋 API 的概念？
API 是不同軟件產(chǎn)品之間的通信使者。它讓各個(gè)軟件系統(tǒng)之間可以相互通信和同步。
例如，你可以使用 Facebook 的 API 在你自己的網(wǎng)站上顯示你在 Facebook 發(fā)布的帖子，并允許人們直接在你的網(wǎng)站上共享或評(píng)論你的帖子，無需切換到 Facebook 上。
十三、Ajax 是什么？Ajax 的交互模型？同步和異步的區(qū)別？如何解決跨域問題？
Ajax 是什么
1. 通過異步模式，提升了用戶體驗(yàn)
2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用
3. Ajax 在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。
Ajax 的最大的特點(diǎn)
1. Ajax可以實(shí)現(xiàn)動(dòng)態(tài)刷新(局部刷新)
2. readyState 屬性 狀態(tài) 有5個(gè)可取值： 0 = 未初始化，1 = 啟動(dòng)， 2 = 發(fā)送，3 = 接收，4 = 完成
Ajax 同步和異步的區(qū)別
1. 同步：提交請(qǐng)求 -> 等待服務(wù)器處理 -> 處理完畢返回，這個(gè)期間客戶端瀏覽器不能干任何事
2. 異步：請(qǐng)求通過事件觸發(fā) -> 服務(wù)器處理(這時(shí)瀏覽器仍然可以作其他事情)-> 處理完畢
備注：ajax.open方法中，第3個(gè)參數(shù)是設(shè)同步或者異步。
解決跨域問題
1. jsonp
2. iframe
3. window.name、window.postMessage
4. 服務(wù)器上設(shè)置代理頁面
附：
Ajax 的缺點(diǎn)
1. Ajax 不支持瀏覽器 back 按鈕
2. 安全問題 Ajax 暴露了與服務(wù)器交互的細(xì)節(jié)
3. 對(duì)搜索引擎的支持比較弱
4. 破壞了程序的異常機(jī)制
5. 不容易調(diào)試
十四、CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級(jí)算法如何計(jì)算？
CSS 選擇符：
1.id選擇器(# myid)
2.類選擇器(.myclassname)
3.標(biāo)簽選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.后代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.偽類選擇器(a: hover, li:nth-child)
可繼承的屬性：
1.font-size
2.font-family
3.color
4.text-indent
優(yōu)先級(jí)算法：
1.優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
2.載入樣式以最后載入的定位為準(zhǔn);
3.!important > id > class > tag
4.important 比 內(nèi)聯(lián)優(yōu)先級(jí)高，但內(nèi)聯(lián)比 id 要高
附：
不可繼承屬性：
1.border
2.padding
3.margin
4.width
5.height
十五、display 值的作用和 position 取值的區(qū)別？
display 值的作用：
1.block 像塊類型元素一樣顯示。
2.inline 缺省值。像行內(nèi)元素類型一樣顯示。
3.inline-block 像行內(nèi)元素一樣顯示，但其內(nèi)容像塊類型元素一樣顯示。
4.list-item 像塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
position 值的定位區(qū)別：
1.absolute 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)祖先元素進(jìn)行定位。
2.fixed 生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位（老IE不支持）。
3.relative 生成相對(duì)定位的元素，相對(duì)于其在普通流中的位置進(jìn)行定位。
4.static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中。
5.inherit 規(guī)定從父元素繼承 position 屬性的值。
十六、null和undefined的區(qū)別是什么？
null 表示沒有對(duì)象，轉(zhuǎn)化為數(shù)值時(shí)為 0
undefined 表示缺少值，轉(zhuǎn)化為數(shù)值時(shí)為 NaN
undefined 典型用法：
1. 變量被聲明了，但沒有賦值時(shí)，就等于 undefined
2. 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于 undefined
3. 對(duì)象沒有賦值的屬性，該屬性的值為 undefined
4. 函數(shù)沒有返回值時(shí)，默認(rèn)返回 undefined
null 典型用法：
1. 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象
2. 作為對(duì)象原型鏈的終點(diǎn)
十七、線程與進(jìn)程的區(qū)別是什么？
1. 一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程；
2. 線程的劃分尺度小于進(jìn)程，使得多線程程序的并發(fā)性高；
3. 進(jìn)程在執(zhí)行過程中擁有獨(dú)立的內(nèi)存單元，而多個(gè)線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率；
4. 每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制；
5. 從邏輯角度來看，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒有將多個(gè)線程看作多個(gè)獨(dú)立的應(yīng)用，來實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。
十八、什么是 HTTP？ HTTP 與 HTTPS 有什么區(qū)別？他們的特點(diǎn)是什么？
HTTP（HyperText Transfer Protocol：超文本傳輸協(xié)議）是一種用于分布式、協(xié)作式和超媒體信息系統(tǒng)的應(yīng)用層協(xié)議。
簡單來說就是一種發(fā)布和接收 HTML 頁面的方法，被用于在 Web 瀏覽器和網(wǎng)站服務(wù)器之間傳遞信息。
HTTPS和HTTP的區(qū)別：
1、https協(xié)議需要到ca申請(qǐng)證書，一般免費(fèi)證書較少，因而需要一定費(fèi)用。
2、http是超文本傳輸協(xié)議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議。
3、http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443。
4、http的連接很簡單，是無狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http協(xié)議安全
HTTP特點(diǎn)：
1. 無狀態(tài)：協(xié)議對(duì)客戶端沒有狀態(tài)存儲(chǔ)，對(duì)事物處理沒有“記憶”能力，比如訪問一個(gè)網(wǎng)站需要反復(fù)進(jìn)行登錄操作
2. 無連接：HTTP/1.1之前，由于無狀態(tài)特點(diǎn)，每次請(qǐng)求需要通過TCP三次握手四次揮手，和服務(wù)器重新建立連接。比如某個(gè)客戶機(jī)在短時(shí)間多次請(qǐng)求同一個(gè)資源，服務(wù)器并不能區(qū)別是否已經(jīng)響應(yīng)過用戶的請(qǐng)求，所以每次需要重新響應(yīng)請(qǐng)求，需要耗費(fèi)不必要的時(shí)間和流量。
3. 基于請(qǐng)求和響應(yīng)：基本的特性，由客戶端發(fā)起請(qǐng)求，服務(wù)端響應(yīng)
4. 簡單快速、靈活
5. 通信使用明文、請(qǐng)求和響應(yīng)不會(huì)對(duì)通信方進(jìn)行確認(rèn)、無法保護(hù)數(shù)據(jù)的完整性
HTTPS有如下特點(diǎn)：
1. 內(nèi)容加密：采用混合加密技術(shù)，中間者無法直接查看明文內(nèi)容
2. 驗(yàn)證身份：通過證書認(rèn)證客戶端訪問的是自己的服務(wù)器
3. 保護(hù)數(shù)據(jù)完整性：防止傳輸?shù)膬?nèi)容被中間人冒充或者篡改
十九、HTTP 四個(gè)常用請(qǐng)求方法是什么？功能分別是什么？
四個(gè)常用請(qǐng)求方法：GET、POST、PUT、DELETE
功能：
GET: 請(qǐng)求指定的頁面信息，并返回實(shí)體主體。
POST: 向指定資源提交數(shù)據(jù)進(jìn)行處理請(qǐng)求,數(shù)據(jù)被包含在請(qǐng)求體中;POST 請(qǐng)求可能會(huì)導(dǎo)致新的資源的建立或已有資源的修改。
PUT: 從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容。
DELETE: 請(qǐng)求服務(wù)器刪除指定的頁面。
二十、常用的你們所能想到的 HTTP 狀態(tài)碼有哪些？
100 Continue 繼續(xù)，一般在發(fā)送post請(qǐng)求時(shí)，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息
200 OK 正常返回信息
201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源
202 Accepted 服務(wù)器已接受請(qǐng)求，但尚未處理
301 Moved Permanently 請(qǐng)求的網(wǎng)頁已永久移動(dòng)到新位置
302 Found 臨時(shí)性重定向
303 See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URI
304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁未修改過
400 Bad Request 服務(wù)器無法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求
401 Unauthorized 請(qǐng)求未授權(quán)
403 Forbidden 禁止訪問
404 Not Found 找不到如何與 URI 相匹配的資源
500 Internal Server Error 最常見的服務(wù)器端錯(cuò)誤
503 Service Unavailable 服務(wù)器端暫時(shí)無法處理請(qǐng)求（可能是過載或維護(hù)）
二十一、遍歷數(shù)組的方式有哪些？
1、普通 for 循環(huán)
2、foreach 循環(huán)
3、for in 循環(huán)
4、map 遍歷
5、for of 遍歷
二十二、大家知道 Node.js 有哪些使用場景嗎？
1. 高并發(fā)
2. 聊天
3. 實(shí)時(shí)消息推送
二十三、Node的優(yōu)點(diǎn)和缺點(diǎn)是什么？
優(yōu)點(diǎn)：
1. 因?yàn)镹ode是基于事件驅(qū)動(dòng)和無阻塞的，所以非常適合處理并發(fā)請(qǐng)求，因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實(shí)現(xiàn)的服務(wù)器表現(xiàn)要好得多。
2. 與Node代理服務(wù)器交互的客戶端代碼是由javascript語言編寫的，因此客戶端和服務(wù)器端都用同一種語言編寫，這是非常美妙的事情。
缺點(diǎn)：
1. Node是一個(gè)相對(duì)新的開源項(xiàng)目，所以不太穩(wěn)定，它總是一直在變。
2. 缺少足夠多的第三方庫支持。
二十四、CSS3有哪些新特性？
1. CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），
2. 對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉(zhuǎn),縮放,定位,傾斜
4. 增加了更多的CSS選擇器 多背景 rgba
5. 在CSS3中唯一引入的偽類是 ::selection.
6. 媒體查詢，多欄布局
7. border-image
二十五、談?wù)剬?duì) BFC 規(guī)范的理解？
BFC 是 W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用。
BFC，塊級(jí)格式化上下文，一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子里面的子元素的樣式不會(huì)影響到外面的元素。
在同一個(gè) BFC 中的兩個(gè)毗鄰的塊級(jí)盒在垂直方向（和布局方向有關(guān)系）的 margin 會(huì)發(fā)生折疊。
二十六、CSS 中 link 和 @import 有什么區(qū)別？
1.link屬于XHTML標(biāo)簽，而 @import 是 CSS 提供的，只能加載CSS;
2.link引用CSS時(shí)，在頁面載入時(shí)同時(shí)加載，而 @import 需要頁面網(wǎng)頁完全載入以后加載;
3.link是XHTML標(biāo)簽，無兼容問題；@import 是在 CSS2.1 提出的，低版本的瀏覽器不支持。
二十七、HTML 與 XHTML 的區(qū)別是什么？
html:超文本標(biāo)記語言 (Hyper Text Markup Language)
xhtml： xhtml中的 x 是 EXtensible 的表示，XHTML 指可擴(kuò)展超文本標(biāo)記語言（EXtensible HyperText Markup Language），是一種置標(biāo)語言，表現(xiàn)方式與超文本標(biāo)記語言（HTML）類似，不過語法上更加嚴(yán)格更純凈。
區(qū)別：
1.XHTML 元素必須被正確地嵌套。
2.XHTML 元素必須被關(guān)閉。
3.標(biāo)簽名必須用小寫字母。
4.XHTML 文檔必須擁有根元素。
二十八、CSS sprites 是什么？如何在頁面或網(wǎng)站中使用它？
CSS Sprites 是一種網(wǎng)頁圖片應(yīng)用處理方式，在國內(nèi)很多人叫 css 精靈。
CSSSprites把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的"background-image"，"background-repeat"，"background-position" 的組合進(jìn)行背景定位，background-position 可以用數(shù)字能精確的定位出背景圖片的位置。
這樣可以減少很多圖片請(qǐng)求的開銷，因?yàn)檎?qǐng)求耗時(shí)比較長；請(qǐng)求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個(gè)。
對(duì)于當(dāng)前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無需顧忌這個(gè)問題。
二十九、HTML 語義化
HTML 根據(jù)內(nèi)容的語義化，選擇合適的標(biāo)簽便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。
語義化基本上都是圍繞著幾個(gè)主要的標(biāo)簽，像標(biāo)題（H1~H6）、列表（li）、強(qiáng)調(diào)（strong em）等等
語義化的目的：
1. 去掉或者丟失 CSS 的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)；
2. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；
3. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁；
4. 便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化使得網(wǎng)頁更具可讀性，是進(jìn)一步開發(fā)網(wǎng)頁的必要步驟，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化；
5. 提升用戶體驗(yàn)，例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用。
注意事項(xiàng)：
1. 盡可能少的使用無語義的標(biāo)簽 div 和 span；
2. 在語義不明顯時(shí)，既可以使用 div 或 p 時(shí)，盡量用 p, 因?yàn)?p 在默認(rèn)情況下有上下間距，對(duì)兼容特殊終端有利；
3. 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置；
4. 需要強(qiáng)調(diào)的文本，可以包含在 strong 或 em 標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong 默認(rèn)樣式是加粗（不要用b），em 是斜體（不用i）；
5. 使用表格時(shí)，標(biāo)題要用 caption，表頭用 thead，主體部分用 tbody 包圍，尾部用 tfoot 包圍。表頭和一般單元格要區(qū)分開，表頭用 th，單元格用 td；
6. 表單域要用 fieldset 標(biāo)簽包起來，并用 legend 標(biāo)簽說明表單的用途；
7. 每個(gè) input 標(biāo)簽對(duì)應(yīng)的說明文本都需要使用 label 標(biāo)簽，并且通過為 input 設(shè)置 id 屬性，在 lable 標(biāo)簽中設(shè)置 for=someld 來讓說明文本和相對(duì)應(yīng)的 input 關(guān)聯(lián)起來。
三十、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
Doctype作用：
<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴(yán)格模式與混雜模式的區(qū)分：
嚴(yán)格模式的排版和 JS 運(yùn)作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
意義：
DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。
三十一、DOM操作—怎樣創(chuàng)建、添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)
創(chuàng)建新節(jié)點(diǎn)：
createDocumentFragment() // 創(chuàng)建一個(gè)DOM片段createElement() // 創(chuàng)建一個(gè)具體的元素createTextNode() // 創(chuàng)建一個(gè)文本節(jié)點(diǎn)添加、移除、替換、插入：
appendChild() // 添加removeChild() // 移除replaceChild() // 替換insertBefore() // 在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)查找：
getElementsByTagName() // 通過標(biāo)簽名稱getElementsByName() // 通過元素的Name屬性的值getElementById() // 通過元素Id，唯一性三十二、iframe 的優(yōu)點(diǎn)和缺點(diǎn)分別是什么？
優(yōu)點(diǎn)：
1. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題
2. Security sandbox
3. 并行加載腳本
缺點(diǎn)：
1. iframe會(huì)阻塞主頁面的Onload事件
2. 即使內(nèi)容為空，加載也需要時(shí)間
3. 沒有語意
三十三、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?
調(diào)用 localstorge、cookies 等本地存儲(chǔ)方式
三十四、什么是 FOUC？如何來避免 FOUC？
FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../test.css";</style> 造成文檔樣式閃爍的原因就是引用CSS文件的@import，瀏覽器會(huì)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，
因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁面上的內(nèi)容是沒有樣式的，這段時(shí)間的長短跟網(wǎng)速，電腦速度都有關(guān)系。
解決方法也比較簡單，在<head>之間加入一個(gè)<link>或者<script>元素就行了。
三十五、減少頁面加載時(shí)間的方法有哪些？
1. 優(yōu)化圖片
2. 圖像格式的選擇（GIF：提供的顏色較少，可用在一些對(duì)顏色要求不高的地方）
3. 優(yōu)化CSS（壓縮合并css，如 margin-top, margin-left...)
4. 網(wǎng)址后加斜杠（如www.baidu.com/目錄，會(huì)判斷這個(gè)目錄是什么文件類型，或者是目錄。）
5. 標(biāo)明高度和寬度（如果瀏覽器沒有找到這兩個(gè)參數(shù)，它需要一邊下載圖片一邊計(jì)算大小，如果圖片很多，瀏覽器需要不斷地調(diào)整頁面。這不但影響速度，也影響瀏覽體驗(yàn)。
當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時(shí)無法顯示，頁面上也會(huì)騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載時(shí)間快了，瀏覽體驗(yàn)也更好了）
6. 減少http請(qǐng)求（合并文件，合并圖片）
三十六、什么是內(nèi)存泄漏？哪些操作會(huì)造成內(nèi)存泄漏？
內(nèi)存泄漏指任何對(duì)象在你不再擁有或需要它之后仍然存在。
造成內(nèi)存泄漏的操作：
1. setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏。
2. 閉包
3. 控制臺(tái)日志
4. 循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)，就會(huì)產(chǎn)生一個(gè)循環(huán)）
三十七、js延遲加載的方式有哪些？
1. defer和async
2. 動(dòng)態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中，加載完畢后callBack）
3. 按需異步載入js
三十八、前端如何做性能優(yōu)化？
1. 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS 源碼壓縮、圖片大小控制合適；網(wǎng)頁 Gzip，CDN 托管，data 緩存 ，圖片服務(wù)器
2. 前端模板 JS + 數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存 AJAX 請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)
3. 用 innerHTML 代替 DOM 操作，減少 DOM 操作次數(shù)，優(yōu)化 javascript 性能
4. 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置 className 而不是直接操作 style
5. 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少 IO 讀取操作
6. 避免使用 CSS Expression（css表達(dá)式)又稱 Dynamic properties(動(dòng)態(tài)屬性)
7. 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部，加上時(shí)間戳
三十九、http狀態(tài)碼有那些？分別代表是什么意思？
1. 100-199 用于指定客戶端應(yīng)響應(yīng)的某些動(dòng)作
2. 200-299 用于表示請(qǐng)求成功
3. 300-399 用于已經(jīng)移動(dòng)的文件并且常被包含在定位頭信息中指定新的地址信息
4. 400-499 用于指出客戶端的錯(cuò)誤
400：語義有誤，當(dāng)前請(qǐng)求無法被服務(wù)器理解
401：當(dāng)前請(qǐng)求需要用戶驗(yàn)證
403：服務(wù)器已經(jīng)理解請(qǐng)求，但是拒絕執(zhí)行它
5. 500-599 用于指出服務(wù)器錯(cuò)誤
503：服務(wù)不可用
詳情文章參見：
https://zhuanlan.zhihu.com/p/151386625詳細(xì)視頻參加：
四十、javascript繼承的幾種方法
1. 原型鏈繼承
2. 借用構(gòu)造函數(shù)繼承
3. 組合繼承(原型+借用構(gòu)造)
4. 原型式繼承
5. 寄生式繼承
6. 寄生組合式繼承
四十一、ajax 的過程是什么？
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)局部刷新
四十二、CSS中 em 與 rem 指的是什么？有什么區(qū)別？
rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)
rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。
作用：利用rem可以實(shí)現(xiàn)簡單的響應(yīng)式布局，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實(shí)現(xiàn)當(dāng)屏幕分辨率變化時(shí)讓元素也變化。
em（font size of the element）是指相對(duì)于父元素的字體大小的單位，它與rem之間其實(shí)很相似。
區(qū)別：
em與rem的重要區(qū)別： 它們計(jì)算的規(guī)則一個(gè)是依賴父元素另一個(gè)是依賴根元素計(jì)算。
四十三、表單提交中Get和Post方式的區(qū)別？
1. get 是從服務(wù)器上獲取數(shù)據(jù)， post 是向服務(wù)器傳送數(shù)據(jù)。
2. get 是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的 ACTION 屬性所指的 URL 中，值和表單內(nèi)各個(gè)字段一一對(duì)應(yīng)，在 URL 中可以看到。 post 是通過 HTTP post 機(jī)制，將表單內(nèi)各個(gè)字段與其內(nèi)容放置在 HTML HEADER 內(nèi)一起傳送到 ACTION 屬性所指的 URL 地址 , 用戶看不到這個(gè)過程。
3. 對(duì)于 get 方式，服務(wù)器端用 Request.QueryString 獲取變量的值，對(duì)于 post 方式，服務(wù)器端用 Request.Form 獲取提交的數(shù)據(jù)。
4. get 傳送的數(shù)據(jù)量較小，不能大于 2KB 。 post 傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制。但理論上， IIS4 中最大量為 80KB ， IIS5 中為 100KB 。
5. get 安全性低， post 安全性較高。
四十四、JavaScript 中的強(qiáng)制轉(zhuǎn)型是指什么？
兩種不同的內(nèi)置類型間的轉(zhuǎn)換被稱為強(qiáng)制轉(zhuǎn)型，強(qiáng)制轉(zhuǎn)型在 JavaScript 中有兩種形式：顯式和隱式。
顯式強(qiáng)制轉(zhuǎn)
var a = "99";var b = Number( a );這里 a 是 "99", b 是 99。
隱式強(qiáng)制轉(zhuǎn)型
var a = "99";var b = a * 1; // "99" 隱式轉(zhuǎn)型成 99四十五、JavaScript 中 scope 是指什么？
在 JavaScript 中 scope 是指作用域，每個(gè)函數(shù)都有自己的作用域。作用域基本上是變量以及如何通過名稱訪問這些變量的規(guī)則的集合。
只有函數(shù)中的代碼才能訪問函數(shù)作用域內(nèi)的變量。
同一個(gè)作用域中的變量名必須是唯一的。一個(gè)作用域可以嵌套在另一個(gè)作用域內(nèi)。
如果一個(gè)作用域嵌套在另一個(gè)作用域內(nèi)，最內(nèi)部作用域內(nèi)的代碼可以訪問另一個(gè)作用域的變量。
四十六、javascript 中嚴(yán)格比較和抽象比較有什么區(qū)別？
嚴(yán)格比較( 表示 === )在不允許強(qiáng)制轉(zhuǎn)型的情況下檢查兩個(gè)值是否相等
抽象比較( 表示 == )在允許強(qiáng)制轉(zhuǎn)型的情況下檢查兩個(gè)值是否相等
var a = "66";var b = 66;a == b; // truea === b; // false嚴(yán)格比較不僅比較值還比較值的類型，抽象比較僅比較值，如上所示，會(huì)將 a 隱式強(qiáng)制轉(zhuǎn)換成數(shù)字再比較。
四十七、“use strict”的作用是什么？
use strict 出現(xiàn)在 JavaScript 代碼的頂部或函數(shù)的頂部，可以幫助你寫出更安全的 JavaScript 代碼。如果你錯(cuò)誤地創(chuàng)建了全局變量，它會(huì)通過拋出錯(cuò)誤的方式來警告你。
function youFun(val) { "use strict"; x = val + 10;}它會(huì)拋出一個(gè)錯(cuò)誤，因?yàn)?x 沒有被定義，并使用了全局作用域中的某個(gè)值對(duì)其進(jìn)行賦值，而 use strict 不允許這樣做。修改如下：
function youFun(val) { "use strict"; var x = val + 10;}四十八、什么是事件冒泡，如何阻止它？
事件冒泡是指嵌套最深的元素觸發(fā)一個(gè)事件，然后這個(gè)事件順著嵌套順序在父元素上觸發(fā)。
防止事件冒泡的一種方法是使用 event.cancelBubble、event.stopPropagation()或 event.preventDefault()。
四十九、什么是 IIFE？
它是立即調(diào)用函數(shù)表達(dá)式（Immediately-Invoked Function Expression），簡稱 IIFE。函數(shù)被創(chuàng)建后立即被執(zhí)行：
(function IIFE(){ console.log( "Hello!" );})();五十、JavaScript 中“undefined”和“not defined”之間的區(qū)別？
在 JavaScript 中，如果你試圖使用一個(gè)不存在且尚未聲明的變量，JavaScript 將拋出錯(cuò)誤“var name is not defined”，讓后腳本將停止運(yùn)行。
但如果你使用 typeof 未定義變量，它將返回 undefined。
var a; // a 為聲明未定義變量console.log(b); // b 為未聲明也未定義變量var c = 1; // c 為生命且定義變量所以
console.log(a); // 輸出: undefinedconsole.log(b); // 輸出: ReferenceError: b is not defined console.log(c); // 輸出 1
在線咨詢
