整理学习：100多道前端面试题（一起加油，且行且珍惜）
前言
當(dāng)你準(zhǔn)備去面試時，你不妨看一些面試的題目（推薦掘金）來提醒自己究竟掌握得怎么樣，比如
題目
筆者最近一邊寫項目，一邊整理前端面試題，打算完成項目就差不多去實習(xí)了…
沒有特別宏大的目標(biāo)，打算安安分分找一份工作，在實習(xí)中保持認(rèn)真學(xué)習(xí)的態(tài)度就好了。
以下題目大多數(shù)是HTML/CSS,較少涉及框架方面的知識。但是我還是建議你在空閑時間多瀏覽，盡量熟記
1、Doctype 作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
（1）、 聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器的解析器，用什么文檔類型 規(guī)范來解析這個文檔。
（2）、嚴(yán)格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。
（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE 不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。
2、行內(nèi)元素有哪些？塊級元素有哪些？
（1）CSS 規(guī)范規(guī)定，每個元素都有 display 屬性，確定該元素的類型，每個元素都有默認(rèn)的 display 值， 比如 div 默認(rèn) display 屬性值為“block”，成為“塊級”元素； span 默認(rèn) display 屬性值為“inline”，是“行內(nèi)”元素。
（2）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
3、link 和@import 的區(qū)別是？
（1）link 屬于 XHTML 標(biāo)簽，而@import 是 CSS 提供的;
（2）頁面被加載的時，link 會同時被加載，而@import 引用的 CSS 會等到頁面被加載完再加載;
（3）import 只在 IE5 以上才能識別，而 link 是 XHTML 標(biāo)簽，無兼容問題;
（4）link 方式的樣式的權(quán)重 高于@import 的權(quán)重.
4、瀏覽器的內(nèi)核分別是什么?
IE 瀏覽器的內(nèi)核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、Opera 內(nèi)核原為 Presto，現(xiàn)為 Blink；
5、HTML5 有哪些新特性？如何處理 HTML5 新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
繪畫 canvas 用于 媒介回 放的 video 和 audio 元素 本地 離線存儲localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失； sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除 語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section 表單控件，calendar、date、time、email、url、search 新的技術(shù) webworker, websockt, Geolocation
6、對語義化如何理解？
用正確的標(biāo)簽做正確的事情！
HTML 語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；在沒有樣式 CCS 情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于 SEO。使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
7、HTML5 的離線儲存有幾種方式？
localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。
8、iframe 有那些缺點？
iframe 會阻塞主頁面的 Onload 事件；
iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用 iframe 之前需要考慮這兩個缺點。如果需要使用 iframe，最好是通過 javascript 動態(tài)給 iframe 添加 src 屬性值，這樣可以可以繞開以上兩個問題。
9、請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie 在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage 和 localStorage 不會
sessionStorage 和 localStorage 的 存 儲 空 間 更 大 ； sessionStorage 和
localStorage 有更多豐富易用的接口；sessionStorage 和 localStorage 各自獨立的存儲空間；
10、CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3 新增偽類有那些？
可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;
優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級為:
!important > id > class > tag important 比 內(nèi)聯(lián)優(yōu)先級高11、CSS3 新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個元素的每個元素。
p:last-of-type 選擇屬于其父元素的最后元素的每個元素。
p:only-of-type 選擇屬于其父元素唯一的元素的每個元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個元素。
:enabled :disabled 控制表單控件的禁用態(tài)。
:checked 單選框或復(fù)選框被選中。
12、如何居中 div？如何居中一個浮動元素？
給 div 設(shè)置一個寬度，然后添加 margin:0 auto 屬性
div{ width:200px; margin:0 auto; }居中一個浮動元素
確定容器的寬高 寬 500 高 300 的層 設(shè)置層的外邊距 .div { Width:500px ;
height:300px;//高度可以不設(shè) Margin: -150px 0 0 -250px; position:relative;
相對定位 background-color:pink;//方便看效果 left:50%; top:50%;}
列出 display 的值，說明他們的作用。
position 的值， relative 和 absolute 定位原點是？
1.block 象塊類型元素一樣顯示。 none 缺省值。象行內(nèi)元素類型一樣顯
示。 inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯
示。 list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
2. absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素
進(jìn)行定位。
3.fixed （老 IE 不支持） 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定
位。
4.relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位。
5.static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中 *（忽略 top, bottom, left, right z-index 聲明）。
6.inherit 規(guī)定從父元素繼承 position 屬性的值。
13、為什么要初始化 CSS 樣式？
因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS 初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。當(dāng)然，初始化樣式會對 SEO 有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。最簡單的初始化方法就是：
* {padding: 0; margin: 0;} （不建議）- 淘寶的樣式初始化：
14、css 定義的權(quán)重
以下是權(quán)重的規(guī)則：
標(biāo)簽的權(quán)重為 1，
class 的權(quán)重為 10，
id 的權(quán)重為 100，
15、CSS3 有哪些新特性？
CSS3 實現(xiàn)
- 圓角（border-radius:8px）
- 陰影（box-shadow:10px）
- 對文字加特效 （ text-shadow ）
- 線 性 漸 變 （ gradient ）
- 旋 轉(zhuǎn)（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)
- skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
- 增加了更多的 CSS 選擇器（: not(.input)：所有 class 不是“input”的節(jié)點）
- 多背景
- rgba
- 多列布局 （multi-column layout）
- 陰影和反射 （Shadow\Reflect）
- 文字特效 （text-shadow、）
- 文字渲染 （Text-decoration）
16、介紹一下 CSS 的盒子模型？
一個盒子中主要的屬性就5個：width、height、padding（內(nèi)邊距）、border、margin（外邊距）。
盒模型有標(biāo)準(zhǔn)盒模型和IE的盒模型，
- IE 的 content 部分包含了 border 和 pading;
- 盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)
17.對 WEB 標(biāo)準(zhǔn)以及 W3C 的理解與認(rèn)識？
標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外鏈 css 和 js 腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維護(hù)、改版方便，不需要變動頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性;
18.XHTML 和 HTML 有什么區(qū)別？
HTML 是一種基本的 WEB 網(wǎng)頁設(shè)計語言，XHTML 是一個基于 XML 的置標(biāo)語言最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。標(biāo)簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
19.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?
用于聲明文檔使用那種規(guī)范(HTML/XHTML)一般為 嚴(yán)格 過度 基于框架的 html文檔加入 XMl 聲明可觸發(fā)，解析方式更改為 IE5.5 擁有 IE5.5 的 bug
20.行內(nèi)元素有哪些?塊級元素有哪些?CSS 的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內(nèi)元素: a b br i span input select
Css 盒模型:內(nèi)容，border ,margin，padding
21.CSS 引入的方式有哪些? link 和@import 的區(qū)別是?
內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
區(qū)別 ：同時加載前者無兼容性，后者 CSS2.1 以下瀏覽器不支持
Link 支持使用 javascript 改變樣式，后者不可
22.CSS 選 擇 符 有 哪 些 ?哪 些 屬 性 可 以 繼 承 ?優(yōu) 先 級 算 法 如 何 計 算 ?內(nèi) 聯(lián) 和important 哪個優(yōu)先級高?
標(biāo)簽選擇符 類選擇符 id 選擇符
繼承不如指定 Id>class>標(biāo)簽選擇
后者優(yōu)先級高
23.前端頁面有哪三層構(gòu)成，分別是什么?作用是什么?
結(jié)構(gòu)層 HTML 表示層 CSS 行為層 js
24.CSS 的基本語句構(gòu)成是?
選擇器{屬性 1:值 1;屬性 2:值 2;……}
25.你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么?
Ie(Ie 內(nèi)核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
26.寫出幾種 IE6 BUG 的解決方法
1.雙邊距 BUG float 引起的 使用 display
2.3 像素問題 使用 float 引起的 使用 dislpay:inline -3px
3.超鏈接 hover 點擊后失效 使用正確的書寫順序 link visited hover active
4.Ie z-index 問題 給父級添加 position:relative
5.Png 透明 使用 js 代碼 改
6.Min-height 最小高度 !Important 解決’
7.select 在 ie6 下遮蓋 使用 iframe 嵌套
8.為什么沒有辦法定義 1px 左右的寬度容器(IE6 默認(rèn)的行高造成的，使用
over:hidden,zoom:0.08 line-height:1px)
9.ie 6 不支持!important
27.img 標(biāo)簽上 title 與 alt 屬性的區(qū)別是什么?
Alt 當(dāng)圖片不顯示是 用文字代表。
Title 為該屬性提供信息
28.描述 css reset 的作用和用途。
Reset 重置瀏覽器的 css 默認(rèn)屬性 瀏覽器的品種不同，樣式不同，然后重置，讓他們統(tǒng)一
29.解釋 css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務(wù)器對圖片的請求數(shù)量
30.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什么模式
31.你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化?期待的解決方案包括：
- 文件合并
- 文件最小化/文件壓縮
- 使用 CDN 托管
- 緩存的使用
32.什么是語義化的 HTML?
直觀的認(rèn)識標(biāo)簽 對于搜索引擎的抓取有好處
33.清除浮動的幾種方式，各自的優(yōu)缺點
1.使用空標(biāo)簽清除浮動 clear:both
(理論上能清楚任何標(biāo)簽，增加無意義的標(biāo)簽)
2.使用 overflow:auto(空標(biāo)簽元素清除浮動而不得不增加無意代碼的弊端,使用zoom:1 用于兼容 IE)
3.是用 afert 偽元素清除浮動(用于非 IE 瀏覽器)
34.javascript 的 typeof 返回哪些數(shù)據(jù)類型
Object number function boolean underfind
35.例舉 3 種強(qiáng)制類型轉(zhuǎn)換和 2 種隱式類型轉(zhuǎn)換?
強(qiáng)制（parseInt,parseFloat,number） 隱式（== – ===）36.split() join() 的區(qū)別
前者是切割成數(shù)組的形式，后者是將數(shù)組轉(zhuǎn)換成字符串
37.數(shù)組方法 pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
38.事件綁定和普通事件有什么區(qū)別
39.IE 和 DOM 事件流的區(qū)別
1.執(zhí)行順序不一樣、
2.參數(shù)不一樣
3.事件加不加 on
4.this 指向問題
40.IE 和標(biāo)準(zhǔn)下有哪些兼容性的寫法
Var ev = ev || window.event document.documentElement.clientWidth || document.body.clientWidth Var target = ev.srcElement||ev.target41.ajax 請求的時候 get 和 post 方式的區(qū)別
一個在 url 后面 一個放在虛擬載體里面
有大小限制
安全問題
應(yīng)用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
42.call 和 apply 的區(qū)別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
43.ajax 請求時，如何解釋 json 數(shù)據(jù)
使用 eval parse 鑒于安全性考慮 使用 parse 更靠譜
44.閉包是什么，有什么特性，對頁面有什么影響
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
45.如何阻止事件冒泡和默認(rèn)事件
canceBubble return false
46.添加 刪除 替換 插入到某個接點的方法
obj.appendChidl() obj.innersetBefore obj.replaceChild obj.removeChild47.解釋 jsonp 的原理，以及為什么不是真正的 ajax
動態(tài)創(chuàng)建 script 標(biāo)簽，回調(diào)函數(shù)
Ajax 是頁面無刷新請求數(shù)據(jù)操作
48.javascript 的本地對象，內(nèi)置對象和宿主對象
本地對象為 array obj regexp 等可以 new 實例化
內(nèi)置對象為 gload Math 等不可以實例化的
宿主為瀏覽器自帶的 document,window 等
49.document load 和 document ready 的區(qū)別
Document.onload 是在結(jié)構(gòu)和樣式加載完才執(zhí)行 js
Document.ready 原生種沒有這個方法，jquery 中有 $().ready(function)
50.”==”和“===”的不同
前者會自動轉(zhuǎn)換類型
后者不會
51.javascript 的同源策略
一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機(jī)名、協(xié)議和端口號的組合
52.編寫一個數(shù)組去重的方法
function oSort(arr) { var result ={}; var newArr=[]; for(var i=0;i<arr.length;i++) { if(!result[arr]) { newArr.push(arr) result[arr]=1 } } return newArr } </arr.length;i++)53.你認(rèn)為最常遇到的兼容 Bug 有哪些?有哪些問題是你認(rèn)為解決起來最麻煩的?
IE6 PNG
IE6 Fixed
54.CSS 定位方式有哪些?
在 CSS 中關(guān)于定位的內(nèi)容是：position:relative | absolute | static | fixed
static 沒有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過 z-index 進(jìn)行層次分級。
relative 不脫離文檔流，參考自身靜態(tài)位置通過 top,bottom,left,right 定位，并
且可以通過 z-index 進(jìn)行層次分級。
absolute 脫離文檔流，通過 top,bottom,left,right 定位。選 53D6 其最近的父級
定位元素，當(dāng)父級 position 為 static 時，absolute 元素將以 body 坐標(biāo)原點進(jìn)
行定位，可以通過 z-index 進(jìn)行層次分級。
fixed 固定定位，這里他所固定的對像是可視窗口而并非是 body 或是父級元素。
可通過 z-index 進(jìn)行層次分級。
55.函數(shù)的幾種定義方法？
function a(){},
var a = function(){}
56.對象的定義方法？
a = new Object(), a = {}
57.類的定義方法（prototype）（繼承）
Var a = function(){}
a.prototype = {}
new a();
58.this 關(guān)鍵字的指向
obj.foo() == obj //方法調(diào)用模式,this 指向 obj foo() == window; //函數(shù)調(diào)用模式,this 指向 window new obj.foo() == obj //構(gòu)造器調(diào)用模式, this 指向新建立對象 foo.call(obj) == obj;//APPLY 調(diào)用模式,this 指向 obj59.異步 ajax 的優(yōu)缺點都有什么？
優(yōu)點：
相對于同步 ajax：不會造成 UI 卡死，用戶體驗好。
相對于刷新頁面，省流量
缺點：
后退按鈕無效；
多個請求同時觸發(fā)時，由于回調(diào)時間不確定，會造成混亂，避免這種混亂需要復(fù)雜
的判斷機(jī)制。
搜索引擎不友好
數(shù)據(jù)安全
60、介紹 js 的基本數(shù)據(jù)類型。
number,string,boolean,object,undefined
61、Javascript 如何實現(xiàn)繼承？
通過原型和構(gòu)造器
62、如何創(chuàng)建一個對象? （畫出此對象的內(nèi)存圖）
function Person(name, age) { this.name = name; this.age = age; this.sing = function() { alert(this.name) } }63、談?wù)?This 對象的理解。
this 是 js 的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this 的值會發(fā)生變化。但是有一個總原則，那就是 this 指的是調(diào)用函數(shù)的那個對象。this 一般情況下：是全局對象Global。 作為方法調(diào)用，那么 this 就是指這個對象
64、事件是什么？IE 與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡？
（1） 我們在網(wǎng)頁中的某個操作（有的操作對應(yīng)多個事件）。例如：當(dāng)我們點擊一個按鈕就會產(chǎn)生一個事件。是可以被 JavaScript 偵測到的行為。
（2） 事件處理機(jī)制：IE 是事件冒泡、火狐是 事件捕獲；
（3） ev.stopPropagation();
65、如何判斷一個對象是否屬于某個類？
使用 instanceof （待完善） if(a instanceof Person){ alert(‘yes’); }
66、Javascript 中，有一個函數(shù)，執(zhí)行時對象查找時，永遠(yuǎn)不會去查找原型，這個函數(shù)是？
hasOwnProperty67、對 JSON 的了解？
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。它是基
于 JavaScript 的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小{‘a(chǎn)ge’:‘12’, ‘name’:‘back’}
68、簡述一下 src 與 href 的區(qū)別
href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接，用于超鏈接。
src 是指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求 src 資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如 js 腳本，img 圖片和frame 等元素。當(dāng)瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將 js 腳本放在底部而不是頭部。
69、簡述同步和異步的區(qū)別
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進(jìn)程在執(zhí)行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進(jìn)程將會一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去；異步是指進(jìn)程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進(jìn)程的狀態(tài)。
當(dāng)有消息返回時系統(tǒng)會通知進(jìn)程進(jìn)行處理，這樣可以提高執(zhí)行的效率。
70、px 和 em 的區(qū)別
px 和 em 都是長度單位，區(qū)別是，px 的值是固定的，指定是多少就是多少，計算比較容易。em 得值不是固定的，并且 em 會繼承父級元素的字體大小。
瀏覽器的默認(rèn)字體高都是 16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
71、什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？
- 漸進(jìn)增強(qiáng) progressive enhancement：
針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗。
（從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害于基礎(chǔ)瀏覽器的額外樣式和功能。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。） - 優(yōu)雅降級 graceful degradation：
一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。（Web 站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作。由于 IE 獨特的盒模型布局問題，針對不同版本的 IE 的 hack 實踐過優(yōu)雅降級了，為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。）
區(qū)別：
a. 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給
b. 漸進(jìn)增強(qiáng)則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要
c. 降級（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時保證其根基處于安全地帶
72、請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別
sessionStorage 用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一 個 會 話 中 的 頁 面 才 能 訪 問 并 且 當(dāng) 會 話 結(jié) 束 后 數(shù) 據(jù) 也 隨 之 銷 毀 。 因 此sessionStorage 不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage 用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。
web storage 和 cookie 的區(qū)別
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候 Cookie 都會被發(fā)送過去，這樣無形中浪費了帶寬，另外 cookie 還需要指定作用域，不可以跨域調(diào)用。
除此之外，Web Storage 擁有 setItem,getItem,removeItem,clear 等方法，不像cookie 需要前端開發(fā)者自己封裝 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie 的作用是與服務(wù)器進(jìn)行交互，作為 HTTP 規(guī)范的一部分而存在 ，而 Web Storage 僅僅是為了在本地“存儲”數(shù)據(jù)而生。
cookie 是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。
cookie 數(shù)據(jù)始終在同源的 http 請求中攜帶（即使不需要），會在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage 和 localStorage 不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲大小：
- cookie 數(shù)據(jù)大小不能超過 4k。
- sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比 cookie 大得多，可以達(dá)到 5M 或更大。
有期時間：
- localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；
- sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。
- cookie 設(shè)置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉
73 、一次完整的 HTTP 事務(wù)是怎樣的一個過程？
基本流程：
a. 域名解析
b. 發(fā)起 TCP 的 3 次握手
c. 建立 TCP 連接后發(fā)起 http 請求
d. 服務(wù)器端響應(yīng) http 請求，瀏覽器得到 html 代碼
e. 瀏覽器解析 html 代碼，并請求 html 代碼中的資源
f. 瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶
74、對前端工程師這個職位你是怎么樣理解的？
a. 前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從 90 分進(jìn)化到 100 分，甚至更好
b. 參與項目，快速高質(zhì)量完成實現(xiàn)效果圖，精確到 1px；
c. 與團(tuán)隊成員，UI 設(shè)計，產(chǎn)品經(jīng)理的溝通；
d. 做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗；
e. 處理 hack，兼容、寫出優(yōu)美的代碼格式；
75、html5 有哪些新特性
- HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
- 繪畫 canvas;
- 用于媒介回放的 video 和 audio 元素;
- 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
- sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
- 語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
- 表單控件，calendar、date、time、email、url、search;
- 新的技術(shù) webworker, websocket, Geolocation;
76、網(wǎng)頁驗證碼是干嘛的，是為了解決什么安全問題
區(qū)分用戶是計算機(jī)還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。
77.、position 屬性的值有哪些?他們之間的區(qū)別是什么?
- block 塊類型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示。
- none 缺省值。象行內(nèi)元素類型一樣顯示。
- inline 行內(nèi)元素類型。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。
- inline-block 默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。
- list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
- table 此元素會作為塊級表格來顯示。
- inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。
78、CSS3 的 Flexbox（彈性盒布局模型）,以及適用場景
- 一個用于頁面布局的全新 CSS3 功能，Flexbox
可以把列表放在同一個方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。 - 較為復(fù)雜的布局還可以通過嵌套一個伸縮容器（flex container）來實現(xiàn)。
- 采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。
- 它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
- 常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而 Flex 布局是基于 flex-flow 流可以很方便的用來做局中，能對不同屏幕大小自適應(yīng)。
適用場景：
- Flexbox 適用于包含有多個元素的盒子的樣式渲染
- Flexbox 適用于在子元素的尺寸未知或者動態(tài)的情況下，對子元素的對齊方式、排列方式以及排序順序進(jìn)行控制展示
彈性盒模型可以用簡單的方式滿足很多常見的復(fù)雜的布局需求。它的優(yōu)勢在于開發(fā)人員只是聲明布局應(yīng)該具有的行為，而不需要給出具體的實現(xiàn)方式。瀏覽器會負(fù)責(zé)完成實際的布局。
該布局模型在主流瀏覽器中都得到了支持。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的條目進(jìn)行排列、對齊和分配空白空間。即便容器中條目的尺寸未知或是動態(tài)變化的，彈性盒布局模型也能正常的工作。
在該布局模型中，容器會根據(jù)布局的需要，調(diào)整其中包含的條目的尺寸和順序來最好地填充所有可用的空間。
當(dāng)容器的尺寸由于屏幕大小或窗口尺寸發(fā)生變化時，其中包含的條目也會被動態(tài)地調(diào)整。比如當(dāng)容器尺寸變大時，其中包含的條目會被拉伸以占滿多余的空白空間；當(dāng)容器尺寸變小時，條目會被縮小以防止超出容器的范圍。
彈性盒布局是與方向無關(guān)的，可由開發(fā)人員操作。
79、純 CSS 創(chuàng)建一個三角形的原理是什么？
把上、左、右三條邊框隱藏掉（顏色設(shè)為 transparent）
#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }80、瀏覽器默認(rèn)的 margin 和 padding 不同，怎么解決？
解決方案是給文檔中用到的標(biāo)簽設(shè)置：margin:0;padding:0;。
81、BFC 的布局規(guī)則以及觸發(fā)條件
Block Formatting Contexts（BFC） ：塊級元素格式化上下文
它決定了塊級元素如何對它的內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互關(guān)系
- 塊級元素：父級（是一個塊元素）
- 內(nèi)容：子元素（是一個塊元素）
- 其他元素：與內(nèi)容同級別的兄弟元素
- 相互作用：BFC 里的元素與外面的元素不會發(fā)生影響
觸發(fā)（創(chuàng)建）BFC 的方式（一下任意一條就可以）：
82、為什么需要清除浮動？清除浮動的方式
清除浮動是為了清除使用浮動元素產(chǎn)生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。有時候浮動沒處理好也會導(dǎo)致文檔錯亂情況。
1、父級 div 定義 height；
2、父級 div 也一起浮動；
3、浮動元素的父級 div 定義偽元素::after；
83、什么是外邊距合并？
外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
1、當(dāng)一個 div 在另一個 div 里，兩個 div 都有 margin 的屬性，想讓這兩個 div 不出現(xiàn)外邊距合并的問題，必須給外層 div 添加 border 屬性或者 overflow:hidden 屬性；如果允許其出現(xiàn)外邊距合并，內(nèi)層 div 始終保持原位置，而外層 div 的 margin 屬性會取兩者的最大值。
2、當(dāng)兩個 div 不存在嵌套關(guān)系時（而是上下關(guān)系）一個設(shè)置了 margin-bottom，一個設(shè)置了margin-top，不管是否有 border 或者 overflow 屬性時，兩者始終會存在外邊距合并問題。
84、CSS 預(yù)處理器
Sass 、less 這些
Sass 語法是$
less 語法是@
85、WEB提高性能的方法有哪些
Web 前端性能優(yōu)化——如何提高頁面加載速度
1、減少 HTTP 請求
2、將樣式表放在頭部
3、將腳本放在底部
4、使用外部的 JavaScript 和 CSS，緩存
5、關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標(biāo)元素的部分）盡量不用后代選擇器，少用子代選擇器，最好不要超過三層；提取項目的通用公有樣式，增強(qiáng)可復(fù)用性，按模塊編寫組件；增強(qiáng)項目的協(xié)同開發(fā)性、可維護(hù)性和可擴(kuò)展性;
6、使用預(yù)處理工具或構(gòu)建工具（gulp 對 css 進(jìn)行語法檢查、自動補(bǔ)前綴、打包壓縮、自動優(yōu)雅降級）
86、margin 和 padding 分別適合什么場景使用？
margin 是用來隔開元素與元素的間距；padding 是用來隔開元素與內(nèi)容的間隔。
margin 用于布局分開元素使元素與元素互不相干；
padding 用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段空間
87、box-sizing 屬性
box-sizing 屬性主要用來控制元素的盒模型的解析模式。默認(rèn)值是 content-box。
- content-box：讓元素維持 W3C 的標(biāo)準(zhǔn)盒模型。元素的寬度/高度由 border + padding +content 的寬度/高度決定，設(shè)置 width/height 屬性指的是 content 部分的寬/高
- border-box：讓元素維持 IE 傳統(tǒng)盒模型（IE6 以下版本和 IE6~7 的怪異模式）。設(shè)置width/height 屬性指的是 border + padding + content
88、AJAX 的優(yōu)缺點
ajax 的優(yōu)點
1、最大的一點是頁面無刷新，在頁面內(nèi)與服務(wù)器通信，給用戶的體驗非
常好。
2、使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響
應(yīng)能力。
ajax 的缺點
1、ajax 干掉了 back 按鈕，即對瀏覽器后退機(jī)制的破壞。后退按鈕是一個
標(biāo)準(zhǔn)的 web 站點的重要功能，但是它沒法和 js 進(jìn)行很好的合作。用戶往往是希望能夠通過后退來取消前一次操作的。那么對于這個問題有沒有辦法？答案是肯定的，用過 Gmail 的知道，Gmail 下面采用的 ajax 技術(shù)解決了這個問題，在 Gmail下面是可以后退的，但是，它也并不能改變 ajax 的機(jī)制，它只是采用的一個比較笨但是有效的辦法，即用戶單擊后退按鈕訪問歷史記錄時，通過創(chuàng)建或使用一個隱藏的 IFRAME 來重現(xiàn)頁面上的變更。（例如，當(dāng)用戶在 Google Maps 中單擊后退時，它在一個隱藏的 IFRAME 中進(jìn)行搜索，然后將搜索結(jié)果反映到 Ajax 元素上，以便將應(yīng)用程序狀態(tài)恢復(fù)到當(dāng)時的狀態(tài)。）
89、Js 中嚴(yán)格模式
90、Js 有哪些內(nèi)置對象
Object 是 JavaScript 中所有對象的父對象
數(shù)據(jù)封裝類對象：Object、Array、Boolean、Number 和 String
其他對象：Function、Arguments、Math、Date、RegExp、Error
91、JavaScript 的基本規(guī)范
1.不要在同一行聲明多個變量。
2.請使用 ===/!==來比較 true/false 或者數(shù)值
3.使用對象字面量（[]）替代 new Array 這種形式
4.不要使用全局函數(shù)，全局函數(shù)。
5.Switch 語句必須帶有 default 分支
6.函數(shù)不應(yīng)該有時候有返回值，有時候沒有返回值。
7.For 循環(huán)必須使用大括號
8.If 語句必須使用大括號
9.for-in 循環(huán)中的變量 應(yīng)該使用 var 關(guān)鍵字明確限定作用域，從而避免作用域污染。
92、JavaScript 原型，原型鏈 ? 有什么特點？
每個對象都會在其內(nèi)部初始化一個屬性，就是 prototype(原型)，當(dāng)我們訪問一個對象的屬性時，如果這個對象內(nèi)部不存在這個屬性，那么他就會去 prototype 里找這個屬性，這個 prototype又會有自己的 prototype，
于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。
關(guān)系：
instance.constructor.prototype = instance.__proto__
特點：
JavaScript 對象是通過引用來傳遞的，我們創(chuàng)建的每個新對象實體中并沒有一份屬于自己的原型副本。當(dāng)我們修改原型時，與之相關(guān)的對象也會繼承這一改變。
93、Javascript 作用鏈域?
全局函數(shù)無法查看局部函數(shù)的內(nèi)部細(xì)節(jié)，但局部函數(shù)可以查看其上層的函數(shù)細(xì)節(jié)，直至全局細(xì)節(jié)。
當(dāng)需要從局部函數(shù)查找某一屬性或方法時，如果當(dāng)前作用域沒有找到，就會上溯到上層作用域查找，
直至全局函數(shù)，這種組織形式就是作用域鏈。
94、談?wù)?This 對象的理解。
this 總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
如果有 new 關(guān)鍵字，this 指向 new 出來的那個對象；
在事件中，this 指向觸發(fā)這個事件的對象，特殊的是，IE 中的 attachEvent 中的 this 總是指向全局對象 Window；
95、eval 是做什么的？
它的功能是把對應(yīng)的字符串解析成 JS 代碼并運行；
應(yīng)該避免使用 eval，不安全，非常耗性能（2 次，一次解析成 js 語句，一次執(zhí)行）。
由 JSON 字符串轉(zhuǎn)換為 JSON 對象的時候可以用 eval，var obj =eval(’(’+ str +’)’);
96、什么是 window 對象? 什么是 document 對象?
window 對象是指瀏覽器打開的窗口。
document 對象是 Documentd 對象（HTML 文檔對象）的一個只讀引用，是 window 對象的一個屬性。
97、null，undefined 的區(qū)別？
null 表示一個對象是“沒有值”的值，也就是值為“空”；
undefined 表示一個變量用 var 聲明了但有初始化(賦值)；
undefined 不是一個有效的 JSON，而 null 是；
undefined 的類型(typeof)是 undefined；
null 的類型(typeof)是 object；
注意：
在驗證 null 時，一定要使用 === ，因為 == 無法分別 null 和 undefined null == undefined // true null === undefined // false98、什么是閉包（closure），為什么要用它？
閉包是指有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內(nèi)創(chuàng)建另一個函數(shù)，通過另一個函數(shù)訪問這個函數(shù)的局部變量,利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部。
閉包的特性：
閉包的作用參考：https://www.cnblogs.com/zachary93/p/6056987.html
99、DOM是什么？
DOM （文檔對象模型）就是針對 HTML 和 XML 提供的一個 API（接口）。我們可以通過DOM 來操作頁面中各種元素，例如添加元素、刪除元素、替換元素等。
100、webpack 和 gulp 區(qū)別（模塊化與流的區(qū)別）
gulp 類似于管道，文件讀進(jìn)來，執(zhí)行相應(yīng)的任務(wù)然后生成最終文件即可。
gulp 利用流的方式進(jìn)行文件的處理，通過管道將多個任務(wù)和操作連接起來，因此只有一次 I/O的過程，流程更清晰，更純粹。
gulp 強(qiáng)調(diào)的是前端開發(fā)的工作流程，我們可以通過配置一系列的 task，定義 task 處理的事務(wù)（例如文件壓縮合并、雪碧圖、啟動 server、版本控制等），然后定義執(zhí)行順序，來讓 gulp執(zhí)行這些 task，從而構(gòu)建項目的整個前端開發(fā)流程。
webpack 是一個前端模塊化方案，更側(cè)重模塊打包，我們可以把開發(fā)中的所有資源（圖片、js 文件、css 文件等）都看成模塊，通過 loader（加載器）和 plugins（插件）對資源進(jìn)行處理，打包成符合生產(chǎn)環(huán)境部署的前端資源。
101、對前端開發(fā)的理解
Web 前端開發(fā)簡單來說就是網(wǎng)站的開發(fā)。最基礎(chǔ)的工作就是實現(xiàn)效果圖，把視覺稿通過頁面代碼的方式表現(xiàn)出來能夠真實反映視覺稿且能夠通 過瀏覽器的兼容。與設(shè)計師和后臺人員進(jìn)行溝通，優(yōu)化和完善前端項目。
作為一名前端開發(fā)人員，必須掌握基本的 Web 前端開發(fā)技術(shù)，其中包括：CSS(3)、HTML(5)、DOM、javascript、Ajax，jquery 等，了解其他框架如 angular、vue、react 等，適應(yīng)前端技術(shù)發(fā)展，在掌握這些技術(shù)的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的 Bug。需要了解網(wǎng)站性能優(yōu)化和一些打包工具如 webpack、gulp，了解 SEO 等等一
下輔助開發(fā)的知識。
102、對vue的理解
vue：通過 Vue 對象將數(shù)據(jù)和 View 完全分離開來了。對數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的 DOM 對象，可以說數(shù)據(jù)和 View 是分離的，他們通過 Vue 對象這個 vm 實現(xiàn)相互的綁定。
這就是傳說中的 MVVM。
vue 適用的場景：
復(fù)雜的單應(yīng)用頁面；復(fù)雜數(shù)據(jù)操作的后臺頁面，表單填寫頁面，側(cè)重數(shù)據(jù)綁定。
103、MVC 與 MVVM 區(qū)別？
在 MVC 里，View 是可以直接訪問 Model 的！
從而，View 里會包含 Model 信息，不可避免的還要包括一些業(yè)務(wù)邏輯。
MVC 模型關(guān)注的是 Model 的不變，所以，在 MVC 模型里，Model不依賴于 View，但是 View 是依賴于 Model 的。不僅如此，因為有一些業(yè)務(wù)邏輯在 View 里實現(xiàn)了，導(dǎo)致要更改 View 也是比較困難的，至少那些業(yè)務(wù)邏輯是無法重用的。
MVVM 在概念上是真正將頁面與數(shù)據(jù)邏輯分離的模式，它把數(shù)據(jù)綁定工作放到一個 JS里去實現(xiàn)，而這個 JS 文件的主要功能是完成數(shù)據(jù)的綁定，即把 model 綁定到 UI 的元素上。
有人做過測試：使用 Angular（MVVM）代替 Backbone（MVC）來開發(fā)，代碼可以減少一半。
此外，MVVM 另一個重要特性，雙向綁定。它更方便你同時維護(hù)頁面上都依賴于某個字段的 N 個區(qū)域，而不用手動更新它們
104、讓一個元素不可見的方法有哪些
{ display: none; /* 不占據(jù)空間，無法點擊 */ } /*************************************************************************** *****/ { visibility: hidden; /* 占據(jù)空間，無法點擊 */ } /*************************************************************************** *****/ { position: absolute; top: -9999px; /* 不占據(jù)空間，無法點擊 */ } /*************************************************************************** *****/ { position: relative; top: -9999px; /* 占據(jù)空間，無法點擊 */ } /*************************************************************************** *****/ { position: absolute; visibility: hidden; /* 不占據(jù)空間，無法點擊 */ } /*************************************************************************** *****/ { height: 0; overflow: hidden; /* 不占據(jù)空間，無法點擊 */ } /*************************************************************************** *****/ { opacity: 0; filter:Alpha(opacity=0); /* 占據(jù)空間，可以點擊 */ } /*************************************************************************** *****/ { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據(jù)空間，可以點 擊 */ }105、為什么在 ES6 中引入了箭頭函數(shù)呢？
解決 this 指針的問題。
106、懶加載的原理
先將 img 標(biāo)簽中的 src 鏈接設(shè)為同一張圖片（空白圖片），將其真正的圖片地址存儲再 img 標(biāo)簽的自定義屬性中（比如 data-src）。當(dāng) js 監(jiān)聽到該圖片元素進(jìn)入可視窗口時，即將自定義屬性中的地址存儲到 src 屬性中，達(dá)到懶加載的效果。
這樣做能防止頁面一次性向服務(wù)器響應(yīng)大量請求導(dǎo)致服務(wù)器響應(yīng)慢，頁面卡頓或崩潰等問題。
107、頁面重繪（repaint）和頁面回流（reflow）
css 與 dom 解析完畢后，合并為渲染樹（render tree）。
- 重繪(repaint)： 當(dāng) render tree中的一些元素需要更新屬性，單這些屬性只會影響元素的外觀，風(fēng)格，而不會影響到元素的布局，此類的頁面渲染叫作頁面重繪。
- 回流(reflow) ：當(dāng) render tree 中的一部分（或全部）因為元素的規(guī)模尺寸，布局，隱藏 等改變而引起的頁面重新渲染。
可以看出，回流必將引起重繪，而重繪不一定會引起回流。
當(dāng)頁面布局和幾何屬性改變時就需要回流。
下述情況會發(fā)生瀏覽器回流：
DOM 樹發(fā)生變化——如：
-
增加一個元素或刪除一個元素（元素為可見元素）；
-
通過 style 控制元素的位置變化——典型的碰壁反彈；
-
元素尺寸的改變——盒模型的每種尺寸均算在其內(nèi)；
-
內(nèi)容改變引發(fā)的尺寸改變——如：文本文本改變或者圖片大小改變而引起的計算值寬度和高度改變；
-
瀏覽器窗口尺寸改變——resize 事件發(fā)生時。
改善由于 dom 操作產(chǎn)生的回流：
1、不要一個一個改變元素的樣式屬性，直接改變 className，如果動態(tài)改變樣式，則使用 cssText。
2、使用 DocumentFragment 進(jìn)行緩存操作,引發(fā)一次回流和重繪；
這個主要用于添加元素的時候，就是先把所有要添加到元素添加到 1 個 div 中(這個 div也是新加的)，最后才把這個 div append 到 body 中。
3、使用 display:none 技術(shù)，只引發(fā)兩次回流和重繪；
先 display:none 隱藏元素，然后對該元素進(jìn)行所有的操作，最后再顯示該元素。因?qū)isplay:none 的元素進(jìn)行操作不會引起回流、重繪。所以只要操作只會有 2 次回流。
4、使用 cloneNode(true or false) 和 replaceChild 技術(shù)，引發(fā)一次回流和重繪
108、apply，call，bind 的區(qū)別，以及怎么使用，參數(shù)問題
call() 、apply()可以看作是某個對象的方法，通過調(diào)用方法的形式來間接調(diào)用函數(shù)（改變函數(shù)內(nèi)部 this 的指向）。bind() 就是將某個函數(shù)綁定到某個對象上。
call()在第一個參數(shù)之后的 后續(xù)所有參數(shù)就是傳入該函數(shù)的值。就是說要全部列舉出來。
apply() 只有兩個參數(shù)，第一個是對象，第二個是數(shù)組，這個數(shù)組就是該函數(shù)的參數(shù)。
this 指向他們的第一個參數(shù)
bind（）–也是改變函數(shù)體內(nèi) this 的指向;
bind 會創(chuàng)建一個新函數(shù)，稱為綁定函數(shù)，當(dāng)調(diào)用這個函數(shù)的時候，綁定函數(shù)會以創(chuàng)建它時傳入 bind（）方法的第一個參數(shù)作為 this，傳入 bind（）方法的第二個及以后的參數(shù)加上綁定函數(shù)運行時本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù)；
bind 與 apply、call 最大的區(qū)別就是：bind 不會立即調(diào)用，其他兩個會立即調(diào)用
109、箭頭函數(shù)和普通函數(shù)的區(qū)別
箭頭函數(shù)在定義之后，this 就不會發(fā)生改變了，無論用什么樣的方式調(diào)用它，this 都不會改變；
1、箭頭函數(shù)的 this 永遠(yuǎn)指向其上下文的 this，任何方法都改變不了其指向，如 call(), bind(), apply()
普通函數(shù)的 this 指向調(diào)用它的那個對象
2、箭頭函數(shù)作為匿名函數(shù),是不能作為構(gòu)造函數(shù)的,不能使用 new
3、箭頭函數(shù)不綁定 arguments,取而代之用 rest 參數(shù)…解決
4、通過 call() 或 apply() 方法調(diào)用一個函數(shù)時，只是傳入了參數(shù)而已，對 this 并沒有什么影響
5、箭頭函數(shù)沒有原型屬性
6、箭頭函數(shù)不能換行
7、箭頭函數(shù)不能當(dāng)做 Generator 函數(shù),不能使用 yield 關(guān)鍵字
110、事件代理事件委托
事件冒泡：子級元素的某個事件被觸發(fā)，它的上級元素的該事件也被遞歸觸發(fā)。
事件委托：使用了事件冒泡的原理，從觸發(fā)某事件的元素開始，遞歸地向上級元素傳播事件。
事件委托的優(yōu)點：
關(guān)于事件委托有一個問題：事件委托給父元素后，如何得知事件是哪個子元素觸發(fā)的？
答：可以通過 event.target 對象來獲取。
112、原型、原型鏈、繼承
原型（prototype）：
去改寫對象下面公用（不變的）的方法或者屬性，讓公用的方法或者屬性在內(nèi)存中存在一份，目的是提高性能。
當(dāng)我們創(chuàng)建一個函數(shù)的時候，每個函數(shù)會自動生成一個原型（prototype）屬性；在函數(shù)中就只有這一個原型屬性，而這個屬性是一個指針，指向一個對象，稱為原型對象，原型對象中含有一個 constructor 屬性，通過這個屬性又可指回函數(shù)當(dāng)我們向函數(shù)中添加屬性時，實際上添加到了原型對象之中，當(dāng)我們用 new 操作符創(chuàng)建新實例時，這個新實例是可以共享原型對象中的屬性的當(dāng)我們向新實例中添加屬性時，屬性被保存到了
原型鏈：
實例對象與原型之間的連接，用來實現(xiàn)共享屬性和繼承的（因為原型鏈的存在，創(chuàng)建出來的對象能找到原型對象（其實原型也是一個對象）下面的東西（包括屬性和方法））
113、css 優(yōu)化，css 放 Body 前和后的區(qū)別
推薦放在 head 標(biāo)簽里是因為瀏覽器代碼解析是從上到下的。如果把 css 放在底部，當(dāng)網(wǎng)速慢時，html 代碼加載完成后而 css 沒加載完的話，會導(dǎo)致頁面沒有樣式而難以閱讀，影響用戶體驗。所以先加載 css 樣式能讓頁面正常顯示。
114、移動端和 PC 端有什么區(qū)別
第一： PC 考慮的是瀏覽器的兼容性，而移動端開發(fā)考慮的更多的是手機(jī)兼容性，因為目前不管是 android 手機(jī)還是 ios 手機(jī)，一般瀏覽器使用的都是 webkit 內(nèi)核，所以說做移動端開發(fā)，更多考慮的應(yīng)該是手機(jī)分辨率的適配，和不同操作系統(tǒng)的略微差異化。
第二：在部分事件的處理上，移動端多出來的事件是觸屏事件，而缺少的是 hover 事件。另外包括移動端彈出的手機(jī)鍵盤的處理，這樣的問題在 PC 端都是遇不到的。
第三： 在布局上，移動端開發(fā)一般是要做到布局自適應(yīng)的，我使用的一直是 rem 布局，感覺很好。
第四： 在動畫處理上，PC 端由于要考慮 IE 的兼容性，所以通常使用 JS 做動畫的通用性會更好一些，但是 CSS3 做了很大的犧牲， 而在手機(jī)端，如果要做一些動畫、特效等，第一選擇肯定是 CSS3， 既簡單、效率又高。
第五： 微信的一些接口組好能去實現(xiàn)一遍，熟悉一下肯定是有好處的，比如通過微信分享文章，title、description、icon 等圖標(biāo)的配置，這些還是要會的。
第六： 百度地圖的一些 API 接口，也得去實現(xiàn)一下，這些對于移動端來說，LBS 是一個非常重要的特性，所以地圖這塊肯定是要了解的，在加上百度地圖這塊已經(jīng)是一個比較成熟的平臺了，所以學(xué)起來也比較容易。
第七： CSS3 的動畫一定要比較熟練，這在移動端用的還是比較多的。
第八：移動端和 pc 端適用的 js 框架也是不一樣。 一般 pc 端用 jquery，移動端用 zepto，因為移動端的流量還是比較重要的， 所以引入的資源或者插件，能小則小，一個 30k 的資源和一個 80k 的資源，在移動端的差別還是挺大的。而未壓縮的 jquery 是 262kb， 壓縮的 jquey 是 83kb，可見兩者的差別之大。
115、對組件化和模塊化的理解
模塊化中的模塊一般指的是 Javascript 模塊，比如一個用來格式化時間的模塊。
組件則包含了 template、style 和 script，而它的 Script 可以由各種模塊組成。比如一個顯示時間的組件會調(diào)用上面的那個格式化時間的模塊。
組件化更多關(guān)注的是 UI 部分，你看到的一個管理界面的彈出框，頭部，內(nèi)容區(qū)，確認(rèn)按鈕和頁腳都可以是個組件，這些組件可以組成一個彈出框組件，跟其他組件組合又是一個新的組件。
模塊化側(cè)重于功能或者數(shù)據(jù)的封裝，一組相關(guān)的組件可以定義成一個模塊，一個暴露了通用驗證方法的對象可以定義成一個模塊，一個全局的 json 配置文件也可以定義成一個模塊。
封裝隔離來后，更重要的是解決模塊間的依賴關(guān)系。
從包含關(guān)系上講，組件是模塊的子集。
116、跨域問題解決辦法及原理跨域問題解決辦法及原理
同源定義 ：
如果兩個頁面擁有相同的協(xié)議（protocol），端口（如果指定），和主機(jī)，那么這兩個頁面就屬于同一個源（origin）。
方式一：圖片 ping 或 script 標(biāo)簽跨域
圖片 ping 常用于跟蹤用戶點擊頁面或動態(tài)廣告曝光次數(shù)。
script 標(biāo)簽可以得到從其他來源數(shù)據(jù)，這也是 JSONP 依賴的根據(jù)。
缺點：只能發(fā)送 Get 請求 ，無法訪問服務(wù)器的響應(yīng)文本（單向請求）
方式二：JSONP 跨域
JSONP（JSON with Padding）是數(shù)據(jù)格式 JSON 的一種“使用模式”，可以讓網(wǎng)頁從別的網(wǎng)域要數(shù)據(jù)。根據(jù) XmlHttpRequest 對象受到同源策略的影響，而利用 <script>元素的這個開放策略，網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的 JSON 數(shù)據(jù)，而這種使用模式就是所謂的JSONP。用 JSONP 抓到的數(shù)據(jù)并不是 JSON，而是任意的 JavaScript，用 JavaScript 解釋器運行而不是用 JSON 解析器解析。所有，通過 Chrome 查看所有 JSONP 發(fā)送的 Get 請求都是 js類型，而非 XHR。
缺點：
- 只能使用 Get 請求
- 不能注冊 success、error 等事件監(jiān)聽函數(shù)，不能很容易的確定 JSONP 請求是否失敗
- JSONP 是從其他域中加載代碼執(zhí)行，容易受到跨站請求偽造的攻擊，其安全性無法確保
方式三：CORS(跨域資源共享)
Cross-Origin Resource Sharing（CORS）跨域資源共享是一份瀏覽器技術(shù)的規(guī)范，提供了Web 服務(wù)從不同域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，確保安全的跨域數(shù)據(jù)傳輸。現(xiàn)代瀏覽器使用 CORS 在 API 容器如 XMLHttpRequest 來減少 HTTP 請求的風(fēng)險來源。
與 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服務(wù)器一般需要增加如下響應(yīng)頭的一種或幾種：
跨域請求默認(rèn)不會攜帶 Cookie 信息，如果需要攜帶，請配置下述參數(shù)：
"Access-Control-Allow-Credentials": true // Ajax 設(shè)置 "withCredentials": true方式四：修改 document.domain 跨子域
前提條件：這兩個域名必須屬于同一個基礎(chǔ)域名!而且所用的協(xié)議，端口都要一致，否則無法利用 document.domain 進(jìn)行跨域，所以只能跨子域
在根域范圍內(nèi)，允許把 domain 屬性的值設(shè)置為它的上一級域。例如，在”aaa.xxx.com”域內(nèi)，可以把 domain 設(shè)置為 “xxx.com” 但不能設(shè)置為 “xxx.org” 或者”com”。
現(xiàn)在存在兩個域名 aaa.xxx.com 和 bbb.xxx.com。在 aaa 下嵌入 bbb 的頁面，由于其document.name 不一致，無法在 aaa 下操作 bbb 的 js。可以在 aaa 和 bbb 下通過 js 將document.name = ‘xxx.com’;設(shè)置一致，來達(dá)到互相訪問的作用。
方式五：WebSocket
WebSocket protocol 是 HTML5 一種新的協(xié)議。它實現(xiàn)了瀏覽器與服務(wù)器全雙工通信，同時允許跨域通訊，是 server push 技術(shù)的一種很棒的實現(xiàn)。
**需要注意：**WebSocket 對象不支持 DOM 2 級事件偵聽器，必須使用 DOM 0 級語法分別定義各個事件。
方式六：代理
同源策略是針對瀏覽器端進(jìn)行的限制，可以通過服務(wù)器端來解決該問題
DomainA 客戶端（瀏覽器） ==> DomainA 服務(wù)器 ==> DomainB 服務(wù)器 ==> DomainA 客戶端 （瀏覽器）117、HTTP 與 HTTPS 有什么區(qū)別？
HTTP：是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，是一個客戶端和服務(wù)器端請求和應(yīng)答的標(biāo)準(zhǔn)（TCP），用于從 WWW 服務(wù)器傳輸超文本到本地瀏覽器的傳輸協(xié)議，它可以使瀏覽器更加高效，使網(wǎng)絡(luò)傳輸減少。
HTTPS：是以安全為目標(biāo)的 HTTP 通道，簡單講是 HTTP 的安全版，即 HTTP 下加入 SSL層，HTTPS 的安全基礎(chǔ)是 SSL，因此加密的詳細(xì)內(nèi)容就需要 SSL。
HTTPS 協(xié)議的主要作用可以分為兩種：一種是建立一個信息安全通道，來保證數(shù)據(jù)傳輸?shù)陌踩?#xff1b;另一種就是確認(rèn)網(wǎng)站的真實性。
HTTP 協(xié)議傳輸?shù)臄?shù)據(jù)都是未加密的，也就是明文的，因此使用 HTTP 協(xié)議傳輸隱私信息非常不安全，為了保證這些隱私數(shù)據(jù)能加密傳輸，于是網(wǎng)景公司設(shè)計了 SSL（Secure SocketsLayer）協(xié)議用于對 HTTP 協(xié)議傳輸?shù)臄?shù)據(jù)進(jìn)行加密，從而就誕生了 HTTPS。
簡單來說，HTTPS協(xié)議是由 SSL+HTTP 協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，要比 http 協(xié)議安全。
HTTPS 和 HTTP 的區(qū)別主要如下：
1、https 協(xié)議需要到 ca 申請證書，一般免費證書較少，因而需要一定費用。
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é)議安全。
118、sql 注入原理
就是通過把 SQL 命令插入到 Web 表單遞交或輸入域名或頁面請求的查詢字符串，最終達(dá)到欺騙服務(wù)器執(zhí)行惡意的 SQL 命令。
總的來說有以下幾點：
1.永遠(yuǎn)不要信任用戶的輸入，要對用戶的輸入進(jìn)行校驗，可以通過正則表達(dá)式，或限制長度，對單引號和雙"-"進(jìn)行轉(zhuǎn)換等。
2.永遠(yuǎn)不要使用動態(tài)拼裝 SQL，可以使用參數(shù)化的 SQL 或者直接使用存儲過程進(jìn)行數(shù)據(jù)查詢存取。
3.永遠(yuǎn)不要使用管理員權(quán)限的數(shù)據(jù)庫連接，為每個應(yīng)用使用單獨的權(quán)限有限的數(shù)據(jù)庫連接。
4.不要把機(jī)密信息明文存放，請加密或者 hash 掉密碼和敏感的信息。
119、http 狀態(tài)碼有那些？
1**(信息類)：表示接收到請求并且繼續(xù)處理
100——客戶必須繼續(xù)發(fā)出請求
101——客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換 HTTP 協(xié)議版本
2**(響應(yīng)成功)：表示動作被成功接收、理解和接受
200——表明該請求被成功地完成，所請求的資源發(fā)送回客戶端
201——提示知道新文件的 URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息為空
205——服務(wù)器完成了請求，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過的文件
206——服務(wù)器已經(jīng)完成了部分用戶的 GET 請求
3**(重定向類)：為了完成指定的動作，必須接受
進(jìn)一步處理
300——請求的資源可在多處得到
301——本網(wǎng)頁被永久性轉(zhuǎn)移到另一個 URL
302——請求的網(wǎng)頁被轉(zhuǎn)移到一個新的地址，但客戶訪問仍繼續(xù)通過原始 URL 地址，重定向，新的 URL 會在 response 中的 Location 中返回，瀏覽器將會使用新的 URL 發(fā)出新的Request。
303——建議客戶訪問其他 URL 或訪問方式
304——自從上次請求后，請求的網(wǎng)頁未修改過，服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容，代表上次的文檔已經(jīng)被緩存了，還可以繼續(xù)使用
305——請求的資源必須從服務(wù)器指定的地址得到
306——前一版本 HTTP 中使用的代碼，現(xiàn)行版本中不再使用
307——申明請求的資源臨時性刪除
4**(客戶端錯誤類)：請求包含錯誤語法或不能正確執(zhí)行
400——客戶端請求有語法錯誤，不能被服務(wù)器所理解
401——請求未經(jīng)授權(quán)，這個狀態(tài)代碼必須和 WWW-Authenticate 報頭域一起使用
404——一個 404 錯誤表明可連接服務(wù)器，但服務(wù)器無法取得所請求的網(wǎng)頁，請求資源不存在。eg：輸入了錯誤的 URL
405——用戶在 Request-Line 字段定義的方法不允許
406——根據(jù)用戶發(fā)送的 Accept 拖，請求資源不可訪問
407——類似 401，用戶必須首先在代理服務(wù)器上得到授權(quán)
408——客戶端沒有在用戶指定的餓時間內(nèi)完成請求
409——對當(dāng)前資源狀態(tài)，請求不能完成
410——服務(wù)器上不再有此資源且無進(jìn)一步的參考地址
411——服務(wù)器拒絕用戶定義的 Content-Length 屬性請求
412——一個或多個請求頭字段在當(dāng)前請求中錯誤
413——請求的資源大于服務(wù)器允許的大小
414——請求的資源 URL 長于服務(wù)器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含 Range 請求頭字段，在當(dāng)前請求資源范圍內(nèi)沒有 range 指示值，請求也不包含 If-Range 請求頭字段
417——服務(wù)器不滿足請求 Expect 頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級服務(wù)器不能滿足請求長。
5**(服務(wù)端錯誤類)：服務(wù)器不能正確執(zhí)行一個正確
的請求
HTTP 500 - 服務(wù)器遇到錯誤，無法完成請求
HTTP 502 - 網(wǎng)關(guān)錯誤
HTTP 503：由于超載或停機(jī)維護(hù)，服務(wù)器目前無法使用，一段時間后可能恢復(fù)正常
120、一個頁面從輸入 URL 到頁面加載顯示完成的詳細(xì)過程
1、瀏覽器查找域名對應(yīng)的 IP 地址；
2、 瀏覽器根據(jù) IP 地址與服務(wù)器建立 socket連接（三次握手）；
- 主機(jī)向服務(wù)器發(fā)送一個建立連接的請求（ 您好，我想認(rèn)識您 ）；
- 服務(wù)器接到請求后發(fā)送同意連接的信號（ 好的，很高興認(rèn)識您 ）；
- 主機(jī)接到同意連接的信號后，再次向服務(wù)器發(fā)送了確認(rèn)信號（ 我也很高興認(rèn)識您），自此，主機(jī)與服務(wù)器兩者建立了連接。
3、瀏覽器與服務(wù)器通信： 瀏覽器請求，服務(wù)器處理請求；
- 瀏覽器根據(jù) URL 內(nèi)容生成 HTTP 請求，請求中包含請求文件的位置、請求文件的方式等等；
- 服務(wù)器接到請求后，會根據(jù) HTTP 請求中的內(nèi)容來決定如何獲取相應(yīng)的HTML 文件；
- 服務(wù)器將得到的 HTML 文件發(fā)送給瀏覽器；
- 在瀏覽器還沒有完全接收 HTML 文件時便開始渲染、顯示網(wǎng)頁；
- 在執(zhí)行 HTML 中代碼時，根據(jù)需要，瀏覽器會繼續(xù)請求圖片、CSS、JavsScript 等文件，
- 過程同請求 HTML ；
4、瀏覽器與服務(wù)器斷開連接（四次揮手）。
- 主機(jī)向服務(wù)器發(fā)送一個斷開連接的請求（ 不早了，我該走了 ）；
- 服務(wù)器接到請求后發(fā)送確認(rèn)收到請求的信號（ 知道了 ）；
- 服務(wù)器向主機(jī)發(fā)送斷開通知（ 我也該走了 ）；
- 主機(jī)接到斷開通知后斷開連接并反饋一個確認(rèn)信號（ 嗯，好的 ），服務(wù)器收到確認(rèn)信號后斷開連接；
121、DOM 操作——怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點?
（1）創(chuàng)建新節(jié)點
createDocumentFragment() //創(chuàng)建一個 DOM 片段 createElement() //創(chuàng)建一個具體的元素 createTextNode() //創(chuàng)建一個文本節(jié)點（2）添加、移除、替換、插入
appendChild() removeChild() replaceChild() insertBefore() //在已有的子節(jié)點前插入一個新的子節(jié)點（3）查找元素
//通過標(biāo)簽名稱 document. getElementsByTagName("標(biāo)簽名") getElementsByTagName() //通過 name 屬性來獲取表單元素(IE 容錯能力較強(qiáng)，會得到一個數(shù)組，其中包括 id 等于 name 值的) //document.getElementsByName("name 屬性的屬性值") getElementsByName() //通過元素 Id，唯一性 document.getElementById("id 名") getElementById() //通過 class 來選中元素 document. getElementsByClassName("類名") //querySelector()表示選取滿足選擇條件的第 1 個元素，querySeletorAll()表示選取滿足條件的所有元素。 //選擇器直接寫 css 選擇器形式#id document.querySelector("選擇器"); document.querySeletorAll("選擇器");122、documen.write 和 innerHTML 的區(qū)別
document.write 只能重繪整個頁面
innerHTML 可以重繪頁面的一部分
123、Ajax 是什么? 如何創(chuàng)建一個 Ajax？
ajax 的全稱：Asynchronous Javascript And XML。
異步傳輸+js+xml。
所謂異步，在這里簡單地解釋就是：向服務(wù)器發(fā)送請求的時候，我們不必等待結(jié)果，而是可以同時做其他的事情，等到有了結(jié)果它自己會根據(jù)設(shè)定進(jìn)行后續(xù)操作，與此同時，頁面是不會發(fā)生整頁刷新的，提高了用戶體驗。
(1)創(chuàng)建 XMLHttpRequest 對象,也就是創(chuàng)建一個異步調(diào)用對象
(2)創(chuàng)建一個新的 HTTP 請求,并指定該 HTTP 請求的方法、URL 及驗證信息
(3)設(shè)置響應(yīng) HTTP 請求狀態(tài)變化的函數(shù)
(4)發(fā)送 HTTP 請求
(5)獲取異步調(diào)用返回的數(shù)據(jù)
(6)使用 JavaScript 和 DOM 實現(xiàn)局部刷新
124、new 操作符具體干了什么呢?
1、創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this
125、javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么？
use strict 是一種 ECMAscript 5 添加的（嚴(yán)格）運行模式,這種模式使得 Javascript 在更嚴(yán)格的條件下運行, 使 JS 編碼更加規(guī)范化的模式,消除 Javascript 語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為。
- 默認(rèn)支持的糟糕特性都會被禁用，比如不能用 with，也不能在意外的情況下給全局變量賦值;
- 全 局 變 量 的 顯 示 聲 明 , 函 數(shù) 必 須 聲 明 在 頂 層 ， 不 允 許 在 非 函 數(shù) 代 碼 塊 內(nèi) 聲 明 函數(shù),arguments.callee 也不允許使用；
- 消除代碼運行的一些不安全之處，保證代碼運行的安全,限制函數(shù)中的 arguments 修改，嚴(yán)格模式下的 eval 函數(shù)的行為和非嚴(yán)格模式的也不相同;
- 提高編譯器效率，增加運行速度；為未來新版本的 Javascript 標(biāo)準(zhǔn)化做鋪墊。
126、對引擎的理解？
主要分成兩部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS 引擎則：解析和執(zhí)行 javascript 來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。
參考鏈接：
https://juejin.im/post/5e848dc25188257375467488?utm_source=gold_browser_extension
總結(jié)
以上是生活随笔為你收集整理的整理学习：100多道前端面试题（一起加油，且行且珍惜）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Clonezilla制作镜像、恢复
- 下一篇： 什么是元编程(meta-promgram