基本信息
1.你覺得前端工程師的價值體現在哪？
- 為簡化用戶使用提供技術支持（交互部分）
- 為多個瀏覽器兼容性提供支持
- 為提高用戶瀏覽速度（瀏覽器性能）提供支持
- 為跨平台或者其他基於webkit或者其他渲染引擎的應用提供支持
- 為展示數據提供支持（數據接口）
HTML/HTML5
1.知道語義化嗎？說說你理解的語義化，如果是你，平時會怎么做來保證語義化？
- 像html5的新的標簽header,footer,section等就是語義化
- 一方面，語義化就是讓計算機能夠快讀的讀懂內容，高效的處理信息，可以對搜索引擎更友好
- 另一方面，便於與他人的協作，他人通過讀代碼就可以理解你網頁標簽的意義
- 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
- 有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多有效信息：爬蟲依賴於標簽來確定上下文和各個關鍵字的權重
- 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義方式來渲染網頁
- 便於團隊開發和維護，語義化更具有可讀性，是下一步把網頁的重要動向，遵循W3C標准的團隊都要遵循這個標准，減少差異化
2.介紹HTML5的新特性
- 新的DOCTYPE聲明<!DOCTYPE html>
- 完全支持css3
- video和audio
- 本地存儲
- 語義化表圈
- canvas
- 新事件如 ondrag onresize
3.如果解決ajax無法后退的問題？
- html5里引入了新的API，即：history.pushState,history.replaceState
- 可以通過pushState和replaceSate接口瀏覽器歷史，並且改變當前頁面的URL
- onpopstate監聽后退
4.websocket和ajax輪詢
- websocket是html5中提出的新的協議，可以實現客戶端與服務器的通信，實現服務器的推送功能
- 優點是，只要簡歷一次連接，就可以連續不斷的得到服務器推送消息，節省帶寬和服務器端的壓力。
- ajax輪詢模擬常連接就是每隔一段時間（0.5s）就向服務器發起ajax請求，查詢服務器是否有數據更新
- 缺點就是，每次都要建立HTTP連接，即使需要傳輸的數據非常少，浪費帶寬
5.web worker和websocket
worker主線程：
- 通過worker = new worker(url)加載一個js文件來創建一個worker，同時返回一個worker實例
- 通過worker.postMessage(data)方法來向worker發送數據。
- 綁定worker.onmessage方法來接收worder發送過來的數據
- 可以使用worker.terminate()來終止一個worder的執行。
websocket
- 是web應用程序的傳輸協議，它提供了雙向的，按序到達的數據流。他是一個HTML5協議，websocket鏈接是持久的，通過在客戶端和服務器之間保持雙向鏈接，服務器的更新可以被及時推送給客戶端，而不需要客戶端以一定的時間去輪詢
6.Doctype作用？嚴格模式與混雜模式如果區分？意義？
- <!DOCTYPE>聲明位於文檔的最前面，處於標簽之前。告知瀏覽器以何種模式來渲染文檔
- 嚴格模式的排版和js運作模式是 以該瀏覽器支持的最高標准運行
- 在混雜模式中，頁面已寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作
- DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現
7.Doctype多少種文檔類型？
- 該標簽可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的HTML文檔
- HTML4.01規定了三種文檔類型：Strict, Transitional以及Frameset
- XHTML 1.0規定了三種XML文檔類型：Strict, Transitional以及Franmeset
- Standards（標准）模式（也就是嚴格呈現模式）用於呈現遵循最新標簽的網頁，而Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用於呈現為傳統瀏覽器而設計的網頁
8.HTML與XHTML，有什么區別？
- 所有的標簽必須要有一個相應的結束標簽
- 所有標簽的元素和屬性的名字都必須使用小寫
- 所有的XML標記都必須合理嵌套
- 所有的屬性必須引號“”括起來
- 把所有的<和&特殊符號用編碼表示
- 給所有屬性賦一個值
- 不要在注釋內容使用'--'
- 圖片必須要有說明文字
CSS
1.content-box和border-box，為什么看起來content-box更合理，但還是經常使用border-box?
- content-box是W3C的標准盒模型 元素寬度+padding+border
- border-box 是ie的怪異盒模型，他的元素寬度等於內容寬度 內容寬度包含了padding和border
- 比如有時候在元素基礎上添加內邊距padding或border會將布局撐破 但是使用border-box就可以輕松完成
2.實現三個DIV等分排在一行（考察border-box)
1.設置border-box width 33.33%
2.flexbox flex:1
3.實現兩欄布局有哪些方法
方法一：
*{
margin: 0;
padding:0;
} html,body{ height: 100%; } #left{ width: 300%; height: 100%; float: left; } #right{ height: 100%; margin-left: 300px; background-color: #eee; }
方法二：
*{ margin: 0; padding: 0; } html,body{height: 100%;} #left{ width: 300px; height: 100%; float: left; } #right{ height: 100%; overflow: hidden; backrgound-color: #eee; }
以上第二種方法，利用創建一個新的BFC(塊級格式化剩下文)來防止文字環繞的原理來實現的。BFC就是一個相對獨立的布局環境，它內部元素的布局不受外面布局的影響。
它可以通過下一任和一種方式來創建
- float的值不為none
- position的值不為static 或者 relative
- display的值為table-cell，table-caption，inline-block，flex，或者inline-flex其中一個
- overflow的值不為visible
方法三：flex布局
4.flex屬性值是多少？
- flex屬性是flex-grow,flex-shrink 和 flex-basis的簡寫
- flex-grow屬性定義項目的放大比例，默認為0
- flex-shrink屬性定義了項目的縮小比例，默認為1
- flex-basis屬性定義了項目的固定空間
5.怎么實現一個DIV左上角到右下角的移動，有哪些方法？怎么實現？
- 改變left值為window寬度-div寬度 top值為window高度=div高度
- jquery的animate方法
- css3的transition
6.垂直居中
- 單行行內元素
- 可以設置padding-top,padding-bottom
- 將height和line-height設為相等
- 多行行內元素
- 可以將元素轉為tabel樣式，再設置vertical-align:middle;
- 使用flex布局
- 塊級元素
- 已知高度絕對定位負邊距
- 未知高度transform:translateY(-50%);
- flex布局
display: flex; justify-content: center; aligin-items: center;
7.rem 和 em的區別？
em相對於父元素，rem相對於根元素
8.清除浮動
- 利用clear屬性進行清理
- 父容器結尾插入空標簽
<div style="clear: both;"></div>
- 利用css偽元素：
.clearfix:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; }
- 將父容器形成BFC
- BFC能清理浮動主要運用的是它的布局規則：
- 內部的Box會在垂直方向，一個接一個的放置
- BFC能清理浮動主要運用的是它的布局規則：
-
- box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰box的margin會發生重疊
- 每個元素margin box的左邊，與包含快border box的左邊相接觸（對於從左往右的格式化，否則相反）。即使存在浮動也是如此
- BFC的區域不會與float box重疊
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也是如此
- 計算BFC的高度時，浮動元素也參與計算
- 浮動清理利用的主要是第六條規則，只要將父容器出發為BFC，就可以實現包含的效果。那么出發BFC有哪種方法？
- 根元素
- float屬性不為noe
- position為absolute或fixed
- display為inline-block，table-cell，table-caption，flex，inline-flex
- overflow不為visible
9.position的值， relative和absolute分別是相對於誰進行定位的？
- relative:相對定位，相對於自己本身在正常文檔流中的位置進行定位。
- absolute:生成絕對定位，相對於最近一級定位不為static的父元素進行定位。
- fixed: （老版本IE不支持）生成絕對定位，相對於瀏覽器窗口或者frame進行定位。
- static:默認值，沒有定位，元素出現在正常的文檔流中。
- sticky:生成粘性定位的元素，容器的位置根據正常文檔流計算得出。
10.CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有那些？
- 選擇符：
- id選擇器（#myId）
- 類選擇器（.myClassName）
- 標簽選擇器（div,p,h1）
- 相鄰選擇器（h1 + p）
- 子選擇器（ul > li）
- 后代選擇器（li a）
- 通配符選擇器（*）
- 屬性選擇器（button[disabled="true"]）
- 偽類選擇器（a:hover,li:nth-child）
- 優先級：
- !important > 行內樣式（比重1000） > id（比重100） > class/屬性（比重10） > tag / 偽類（比重1）;
- 偽類和偽元素區別：
- a:hover,li:nth-child
- 偽元素：li:before、:after,:first-letter,:first-line,:selecton
11.介紹sass
定義變量css嵌套，允許在代碼中使用算式，支持if判斷for循環
12.transition 和 margin的百分比根據什么計算？
transition是相對於自身；margin相對於參照物
13.實現一個秒針繞一點轉動的效果
animation: move 60s infinite steps(60); /*設置旋轉的中心點為中間底部*/ transform-origin: center bottom; /*旋轉從0度到360度*/ @keyframes move { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
14.display:none和visibility:hidden的區別？
- display:none 隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。
- visibility:hidden 隱藏對應的元素，但是在文檔布局中仍保留原來的空間。
15.CSS中link 和@import的區別是？
- link屬於HTML標簽，而@import是CSS提供的;
- 頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;
- import只在IE5以上才能識別，而link是HTML標簽，無兼容問題;
- link方式的樣式的權重 高於@import的權重.
16.對BFC規范的理解？
- BFC，塊級格式化上下文，一個創建了新的BFC的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關系）的margin會發生折疊。
- （W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行布局，以及與其他元素的關系和相互作用。
JS
1.介紹一下閉包和閉包常用場景？
- 使用閉包主要為了設計私有的方法和變量，閉包的有點事可以避免變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。在js中，函數即閉包，只有函數才會產生作用域的概念。
- 閉包有三個特性：
- 函數嵌套函數
- 函數內部可以引用外部的參數和變量
- 參數和變量不會被垃圾回收機制回收
- 閉包是指有權訪問另一個函數作用域中的變量的函數，創建閉包常見方式，就是在一個函數的內部創建另一個函數
- 應用場景，設置私有變量的方法
- 不適用場景：返回閉包的函數是個非常大的函數
- 閉包的缺點就是常駐內存，會增大內存使用量，使用不當會造成內存泄漏
2.為什么會出現閉包這種東西？解決了什么問題？
受javascript鏈式作用域鏈的影響，父級變量中無法訪問到子級的變量值
3.介紹一下你所了解的作用域鏈，作用域鏈的盡頭是什么？為什么？
- 每一個函數都有一個作用域，比如創建了一個函數，函數里面又包含了一個函數，那么現在又三個作用域，這樣就形成了一個作用域鏈
- 作用域的特點就是，先在自己的變量范圍中查找，如果找不到，就會沿着作用域鏈網上找
4.ajax簡歷的過程是怎樣的，主要用到哪些狀態碼？
- 創建XMLHttpRequest對象，也就是創建一個異步調用對象
- 創建一個新的HTTP請求，並指定該HTTP請求的方法、URL及驗證信息
- 設置響應HTTP請求狀態變化函數
- 發送HTTP請求
- 獲取異步調用返回的數據
- 使用javascript和DOM實現局部刷新
var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET','demo.php','true'); xmlHttp.send() xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ } }
5.使用promise封裝
function getJSON(url){ return new Promise(function(resolve, reject){ var XHR = new XMLHttpRequest(); XHR.open('GET', url，true); XHR.send(); XHR.onreadystatechange = function() { if(XHR.readerSate == 4){ if(XHR.status == 200){ try { var response = JSON.parse(XHR.responseText); resilve(response); } cath(e) { reject(e); } }else{ reject(new Error(XHR.statusText)); } } } }) } getJSON(url).then(res => console.log(res));
- 當前狀態readystate
- 0代表未初始化，還沒有調用open方法
- 1代表正在加載，open方法已被調用，但是send方法還沒有被調用
- 2代表已加載完畢，send已被調用，請求以及開始
- 3代表交互中，服務器正在發送響應
- 4代表完成，響應發送完畢
- 常用狀態碼status
- 404沒找到頁面
- 403禁止訪問
- 500內部服務器出錯
- 200正常
- 304被又被修改(not modified)（服務器返回304狀態，表示源文件沒有被修改）
- 說說你還知道的其他狀態碼，狀態碼的存在解決了什么問題？
- 302/307 臨時重定向
- 301 永久重定向
- 借助狀態碼，用戶可以知道服務器端是正常處理了請求，還是出現了什么錯誤
6.事件委托
- 利用冒泡原理，把時間加到父級上，觸發執行效果
- 可以大量節省內存占用，減少事件注冊
- 可以方便地動態添加和修改元素，不需要因為元素的改動而修改時間綁定
var ul = document.querySelector('ul'); var list = document.querySelectorAll('ul li'); ul.addEventListener('click', function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElemnt; for(var i = 0, len = list.length; i < len; i++){ if(list[i] == target){ alert(i + "----" + target.innerHTML); } } });
7.javascript的內存回收機制？
- 垃圾回收器會每隔一段時間找出那些不再使用的內存，然后為其釋放內存
- 一般使用標記清除方法 當變量進入環境標記為進入環境，離開環境標記為離開環境
- 還有引用計數方法
堆棧
- stack為自動分配的內存空間，它由系統自動釋放；而heap則是動態分配的內存，大小不定也不會自動釋放
- 基本數據類型存放在棧中
- 引用類型 存放在堆內存中，首先從棧中獲得該對象的地址指針，然后再從堆內存中取得所需的數據
8.函數防抖和函數節流？
- 函數防抖是指頻繁觸發的情況下，只有足夠的空閑時間，才執行代碼一次
- 函數防抖的要點，也是要一個setTImeout來輔助實現。延遲執行需要跑的代碼
- 如果方法多次觸發，則要把上次記錄的延遲執行代碼用clearTimeout清掉，重新開始
- 如果計時完畢，沒有方法進來訪問觸發，則執行代碼
var tiemr = false; document.getElementById(‘debounce’,onScrll = function(){ clearTimeout(timer); timer = setTimeout(function(){ console.log('111') }, 300); }
9.javascript中的this是什么，有什么用，指向上面？
- 全局代碼中的this是指向全局對象
- 作為對象的方法調用時指向調用這個函數的對象
- 作為構造函數指向創建的對象
- 使用apply和call設置this
10.判斷數組有哪些方法？
- a instanceof Array
- a.constructor == Array
- Object.protype.toString.call(a) == [Object Array]
11.嚴格模式的特性？
- 對javascript的語法和行為，都做了一些改變
- 全局變量必須顯式的聲明。
- 對象不能有重名的屬性
- 函數必須聲明在頂層
- 消除js語法的一些不合理，不嚴謹之處，減少一些怪異行為
- 消除代碼運行的一些不安全之處，保證代碼運行的安全
- 提高編譯效率，增加運行速度
- 為未來新版本的js做好鋪墊
12.js的原型鏈，如何實現繼承？
function foo(){}; foo.prototype.z = 3; var obj = new foo(); obj.x = 1; obj.y = 2; obj.x //1 obj.y //2 obj.z //3
13.圖片懶加載
當頁面滾動的時間被觸發->執行加載圖片操作->判斷圖片是否在可視區域內->在，則動態將data-src的值賦予該圖片
14.webpack常用到哪些功能？
- 設置入口
- 設置輸出目錄
- 設置loader
- extract-text-webpack-plugin將css從js代碼中抽出並合並
- 處理圖片文字等功能
- 解析jsx解析bable
15.函數組合繼承
原型繼承，構造函數繼承，call apply繼承
var super = function(name){ this.name = name; } super.prototype.func1 = function() {console.log('func1')} var sub = function(name, age){ super.call(this, name); this.age = age; } sub.prototype = new super()'
16.對作用域鏈的理解
作用域鏈的作用是保證執行環境里有權訪問的變量和函數是有序耳朵，作用域鏈額變量只能向上訪問，變量訪問到window對象即被終止，作用域鏈向下訪問變量是不被允許的
17.js垃圾回收方法
標記清除（mark and sweep）
- 這是JavaScript最常見的垃圾回收方式，當變量進入執行環境的時候，比如函數中聲明一個變量，垃圾回收器將其標記為“進入環境”，當變量離開環境的時候（函數執行結束）將其標記為“離開環境”。
- 垃圾回收器會在運行的時候給存儲在內存中的所有變量加上標記，然后去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成之后仍存在標記的就是要刪除的變量了
引用計數(reference counting)
- 在低版本IE中經常會出現內存泄露，很多時候就是因為其采用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每個值被使用的次數，當聲明了一個 變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1，如果該變量的值變成了另外一個，則這個值得引用次數減1，當這個值的引用次數變為0的時 候，說明沒有變量在使用，這個值沒法被訪問了，因此可以將其占用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數為0的值占用的空間。
- 在IE中雖然JavaScript對象通過標記清除的方式進行垃圾回收，但BOM與DOM對象卻是通過引用計數回收垃圾的， 也就是說只要涉及BOM及DOM就會出現循環引用問題。
18.js繼承方式及其優缺點
原型鏈繼承的缺點
- 一是字面量重寫原型會中斷關系，使用引用類型的原型，並且子類型還無法給超類型傳遞參數
借用構造函數（類試繼承）
- 借用構造函數雖然解決了剛才兩種問題，但是沒有原型，則復用無從談起，需要原型鏈+借用構造函數的模式，這種模式成為組合繼承
組合式繼承
- 組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承，這樣，即通過在原型上定義方法實現了函數復用，有保證每個實例都有它自己的屬性
ES6
1.let和const的區別？
- let聲明的變量可以改變，值和類型都可以改變，沒有限制
- const聲明的變量不得改變值
2.平時用了es6的哪些疼，和es5有什么不同？
- let,const,箭頭函數，字符串模板，class類，模塊化，promise
- ES5 reuqire,react,createclass
3.介紹promise
- 就是一個對象，用來傳遞異步操作的消息。有三種狀態：pending(進行中)，resolved(已完成)和rejected(失敗)
- 有了promise對象，就可以將異步操作以同步操作的流程表示出來，避免了層層嵌套的回調函數
前端框架
模塊化
1.使用模塊化加載時，模塊記載的順序是怎么樣的，如果不知道，根據已有的知識，加載順序是怎么樣的
- commonjs 同步 循序執行
- AMD 提前加載，不管是否調用模塊，先解析所有模塊require速度快 有可能浪費資源
- CMD提前加載，在正真需要使用（依賴）模塊時才解析該模塊
- seajs按需解析，性能比AMD差
框架問題
1.什么是MVVM，和MVC有什么區別，原理是什么？
- mvc的界面和邏輯關聯緊密，數據直接從數據庫讀取，必須通過controller來承上啟下，通信都是單向的
- mvvm的view 和 viewModel可以互相通信，界面數據從viewmodel中獲取
2.父子組件通信
- vue：父組件是通過props屬性給子組件通信，在子組件里面emit，在父組件監聽
- react：props傳遞 父給子穿一個回調函數，將數據傳給父親處理
3.兄弟組件怎么通信的？
- vuex 建立一個vue的實例，emit觸發時間 on監聽時間
- redux 子A ->父->子B
4.生命周期有哪些，怎么用？
- beforecreated: el 和 data並未初始化
- created： 完成了 data數據的舒適化，el沒有
- beforeMount：完成了el 和 data初始化
- mounted：完成掛載，updated,destroyed
瀏覽器
1.跨域通信有哪些解決方案？
- JSONP:
- 由於同源策略的限制，XMLHttpRequest只允許請求當前資源（域名、協議、端口）的資源，script標簽沒有同源限制，為了實現跨域請求，可以通過script標簽實現跨域請求，然后在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。
- 通過動態<script>元素使用，使用時為src制定一個跨域url。回調函數處理JSON數據
優點：兼容性好，簡單易用，支持瀏覽器與服務器雙向通信
缺點：只支持GET請求
var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction"; var script = document.createElement('script'); script.setAttribute('src', url); //load javascript document.getElementsByTagName('head')[0].appendChild(script); //回調函數 function callbackfunction(data){ var html=JSON.stringify(data.RESULTSET); alert(html); }
- CORS：
- 服務器端對於CORS的支持，只要就是通過設置Access-Control-Allow-Orgin來進行的。如果瀏覽器檢測到響應的設置，就可以允許ajax進行跨域訪問。
- 通過設置Access-Control-Allow-Orgin來允許跨域，cors可以用ajax發請求獲取數據，但是兼容性沒有jsonp好
- 通過修改document.domain來跨子域
- 將子域和主域的doucment.domain設為同一個主域，前提條件：這兩個域名必須屬於同一個基礎域名！而且所用的協議，端口都要一致
- 主域相同的使用document.domain
- 使用window.name來進行跨域
- window對象有個name屬性，該屬性有個特征：即在一個窗口的生命周期內，窗口載入的所有的頁面都是共享一個window.name。每個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的所有頁面中的
- 使用HTML5中心引進的window.postMessage方法來跨域傳送數據
- 還有flash，在服務器上設置代理頁面等跨域方式。
2.移動端兼容問題
- IOS移動端click時間300ms的延遲響應
- 一些情況下對非可點擊元素如（label,span）監聽click時間，ios下不會觸發，css增加cursor:poiner就搞定了
3.XML和JSON的區別？
- 數據體積方面：JSON相對於XML來講，數據的體積小，傳遞的速度更快些
- 數據交互方面：JSON與js的交互更加方便，更容易解析處理，更好的數據交互
- 數據描述方面：JSON對數據的描述性比XML較差
- 傳輸速度方面：JSON的速度遠遠要快於XML
4.漸進增強和優雅降級
- 漸進增強：針對低版本的瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的體驗效果
- 優雅降級：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容
構建工具
1.webpack的理解，和gulp有什么不同？
- webpack是模塊打包工具，會分析模塊間的依賴關系，然后使用Loaders處理他們，最后生成一個優化並且合並后的靜態資源
- gulp是前端自動化工具，能夠優化前端工作流程，比如文件合並壓縮
2.webpack打包速度很慢， 為什么？怎么解決？
- 模塊太多
- webpck可以配置externals來將依賴的庫指向全局變量，從而不再打包這個庫
3.對webpack的看法
- webpack是一個模塊打包工具，可以使用webpack管理你的模塊依賴，並編譯輸出模塊們所需要的靜態文件。能很好的管理、打包web開發中所用到的HTML、js、css以及各種靜態文件（圖片、字體等），讓開發過程更加高效。對於不同類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關系，最后生成了優化且合並后的靜態資源。
- webpack兩大特色：
- code splitting（可以自動完成）
- loader 可以處理各種類型的靜態文件，並且支持串聯操作
webpack是以commonJS的形式來書寫腳本，但是AMD/CMD的支持也很全面，方便舊項目進行代碼遷移
- webpck具有require和browserify的功能，但仍有很多自己的新特性：
- 對 CommonJS、AMD、ES6的語法做了兼容
- 對JS、css、圖片等資源文件都支持打包
- 串聯式模塊化加載器以及插件機制，讓其具有更好的靈活性和擴展性，例如提供對conffeescript、ES6的支持
- 有獨立的配置文件webpck.config.js
- 可以將代碼切割成不同的chunk，實現按需加載，降低了初始化時間
- 支持sourceUrls和sourceMaps，易於調試
- 具有強大的plugin接口，大多是內部插件，使用起來比較靈活
- webpack使用異步IO並具有多級緩存，在增亮編譯上更加快
網絡&存儲
1.http響應中content-type包含哪些內容？
- 請求中的消息主題是用何種方式解碼
- application/x-www-form-urlencoded
- 這是最常見的post提交數據的方式，按照key1=val1&key2=val2的方式進行編碼
- application/json
- 告訴服務器端消息主體是序列化后json字符串
2.get和post有什么不同？
- get是從服務器上獲取數據，post是像服務器傳送數據
- get請求可以將查詢字符串參數追加到url的末尾；post請求英國把數據作為請求的主體提交
- get請求數據有大小限制；post沒有
- post比get安全性更高
3.cookie和session有什么聯系和區別？
- cookie數據存放在客戶的瀏覽器上，session數據放在服務器上
- session比cookie更安全
- 單個cookie保存的數據不能超過4k，很多瀏覽器都限制一個站點最多保存20個cookie
- 一般用cookie來存儲sessionid
4.多頁面通信有哪些方案，各有什么不同？
- localstroge在一個標簽頁里唄添加、修改、刪除時，都會觸發一個storage事件，通過另一個標簽頁里監聽storage事件，即可得到localstorge存儲的值，實現不同標簽頁之間的通信
- settimeout+cookie
5.輸入網站后到頁面展現是過程？
- 通過dns解析獲取ip
- 通過dns解析獲取ip
- tcp鏈接
- 客戶端發送http請求
- tcp傳輸報文
- 服務器處理請求返回http報文
6.客戶端解析渲染頁面
構建DOM樹->構建渲染樹->布局渲染樹：計算盒模型位置和大小->繪制渲染樹
7.前端性能優化
- 代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器
- 緩存利用：緩存ajax，使用CDN，使用外部js和css文件以便緩存
- 添加expires頭，服務器配置Etag，減少DNS查找
- 請數量：合並樣式和腳本，使用css圖片精靈，初始首屏之外的圖片資源按需加載，靜態資源延遲加載
- 請求帶寬：壓縮文件，開始GZIP
- 代碼層面的優化：
- 用hash-table來優化查找
- 少用全局變量
- 用innerHTML代替DOM操作，減少DOM操作次數，優化js性能
- 用setTimeout來避免頁面是去響應
- 緩存DOM節點查找的結果
- 避免使用css Expression
- 避免全局查詢
- 避免使用with（with會創建自己的作用域，會增加作用域鏈長度）
- 多少變量聲明合並
- 避免圖片和iframe等的空src，空src會重新加載當前頁面，印象速度和效率
- 盡量避免寫在HTML標簽中寫style屬性
- 樣式放在頂部，腳本放在底部
8.移動端性能優化
- 盡量使用css3動畫，開啟硬件加速
- 適當使用touch時間代替click時間
- 避免使用css3漸變陰影效果
- 可以用transform: translateZ(0) 來開啟硬件加速
- 不濫用float。float在渲染時計算量比較大，盡量減少使用
- 不濫用web字體。web字體需要下載，解析，重繪當前頁面
- 合理使用requestAnimationFrame動畫代替setTimeout
- css中的屬性（css3 transitions、css3 3D transforms、opacity、webGL、video）會觸發GUP渲染，耗電
9.分域名請求圖片的原因和好處？
- 瀏覽器的並發請求數目限制是針對同一域名的，超過限制數目的請求會被阻塞
- 瀏覽器並發請求有個數限制，分域名可以同時並發請求大量圖片
10.頁面的加載順醋
- html順序加載，其中js會阻塞后續dom和資源加載，css不會阻塞dom和資源的加載
- 瀏覽器會使用prefetch對引用的資源提前下載
- 沒有defer或async，瀏覽器會立即加載並執行指定的腳本
- 有async，加載和渲染后續文檔元素的過程將和script.js的加載與執行並行進行（下載一部，執行同步，加載完就執行）
- 有defer，加載后續文檔元素的過程將和script.js的加載並行進行（異步），但是script.js的執行要在所有元素解析完成之后，DOMContentLoaded事件觸發之前完成
11.計算機網絡的分層概述
- tcp/ip模型：從下往上分別是鏈路層，網絡層，傳輸層，應用層
- osi模型：從下往上分別是物理層，鏈路層，網絡層，傳輸層，會話層，表示層，應用層
12.jscss緩存問題
- 瀏覽器緩存的意義在於提高了執行效率，但是也隨之帶來一些問題，導致修改了js、css，客戶端不能更新
- 都加上了一個時間戳作為版本號
- <script type="text/javascript" src="{js文件路徑}?version=XXXXXX"></script>
13.說說tcp傳輸的三次握手 四次握手策略
三次握手：
- 為了准確無誤地吧數據送達目標處，TCP協議采用了三次握手策略。用TCP協議把數據包送出去后，TCP不會對傳送后的情況置之不理，他一定會向對方確認是否送達，握手過程中使用TCP的標志：SYN和ACK
- 發送端首先發送一個帶SYN的標志的數據包給對方，接收端收到后，回傳一個帶有SYN/ACK標志的數據包以示傳達確認信息
- 最后，發送端再回傳一個帶ACK的標志的數據包，代表“握手”結束
- 如在握手過程中某個階段莫明中斷，TCP協議會再次以相同的順序發送相同的數據包
斷開一個TCP連接需要“四次握手”
- 第一次揮手：主動關閉方發送一個FIN，用來關注主動方到被動關閉方的數據傳送，也即是主動關閉方告誡被動關閉方：我已經不會再給你發數據了（在FIN包之前發送的數據，如果沒有收到對應的ACK確認報文，主動關閉方依然會重發這些數據）。但是，此時主動關閉方還可以接受數據
- 第二次揮手：被動關閉方收到FIN包后，發送一個ACK給對方，確認序號收到序號 +1（與SYN相同，一個 FIN占用一個序號）
- 第三次揮手：被動關閉方發送一個 FIN。用來關閉被動關閉方到主動關閉方的數據傳送，也就是告訴主動關閉方，我的數據也發送完了，不會給你發送數據了
- 第四次揮手：主動關閉方收到FIN后，發送一個ACK給被動關閉方，確認序號為收到序號+1，至此，完成四次握手
14.TCP和UDP的區別？
- TCP是基於連接的協議，也就是說，在正式收發數據前，必須和對方簡歷可靠的連接。一個TCP連接必須要經過三次“對話”才能建立起來
- UDP是與TCP相應的協議。他是面向非連接的協議，他不與對方建立連接，而是直接就把數據包發送過去了
- UDP適用於一次只傳送少量數據，對可靠性要求不高的應用環境
15.HTTP和HTTPS
- HTTP協議通常承載與 TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了我們常說的HTTPS
- 默認HTTP的端口號為80，HTTPS的端口號為443
16.為什么HTTPS安全
因為網絡請求需要中間有很多的服務器路由的轉發，中間的節點都可能篡改信息，而如果使用HTTPS，密鑰在你和終點站才有，https之所有說比http安全，是因為他利用ssl/tls協議傳輸。包含證書，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer傳遞等，保障了傳輸過程的安全性
17.關於http 2.0
- http/2 引入了“服務端推”的概念，它允許服務端在客戶端需要數據之前就主動的將數據發送到客戶端緩存中，從而提高性能
- http/2提供更多的加密支持
- http/2使用多路技術，允許多個消息在一個連接上同時交差
- 它增加了頭壓縮，因此即使非常小的請求，其請求和響應和header都只會占用小比例的帶寬
18.defer 和 async
- defer並行加載js文件，會按照頁面上script標簽的順序執行
- async並行加載js文件，下載完成立即執行，不會按照頁面上script標簽的順序執行
19.Cookie的弊端
cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但是有很多局限性
第一：每個特定的域名下最多生成20個cookie
- IE6或更低的版本，最多20個cookie
- IE7和之后的版本最多50cookie
- chrom和safari沒有做硬性限制
第二：IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie
- cookie的最大大約為4096字節，為了兼容性，一般不能超過4095字節
- IE提供了一種存儲可以持久化用戶數據，叫做userdata，從IE5.0就開始支持。每個數據最多128K，每個月名下最多1M。這個持久化數據放在緩存中，如果緩存沒有清理，就一直會在
優點：極高的擴展性和可用性
- 通過良好的編程，控制保存在cookie中的session對象的大小
- 通過加密性和安全傳輸技術（SSL），減少cookie被破解的可能性
- 只在cookie中存放不敏感數據，即使被盜也不會有重大損失
- 控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie
缺點：
- cookie數量和長度的限制，每個domain最多只能有20調cookie，每個cookie的長度不超過4KB，否則會被截掉
- 安全性問題，如果cookie被人攔截了，那人就可以取得所有的session信息，即使加密也於事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就行
- 有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器保存一個計數器，如果我們把這個計數器保存在客戶端，那么他起不到任何作用
20.瀏覽器本地存儲
- 較高版本的劉拉你中，js提供了sessionStorage和globalStorage。在HTML5提供了localStorage來取代globalStorage
- HTML5中的web storage包括了兩種存儲方式：sessionStorage和 localStorage
- sessionStorage用於本地存儲一個會話中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束后數據隨之銷毀，因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲
- 而localStorage用於持久化的本地存儲，除非主要刪除數據，否則數據是永遠不會過期的
21.web storage 和 cookie的區別
- web storage的概念和cookie相似，區別是為更大容量存儲設計的，cookie的大小是受限的，並且每次請求一個新的頁面的時候cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用
- 除此之外，web storage擁有serItem,getItem,removeItem,clear等方法，cookie得自己封裝setCookie,getCookie
- 但是cookie也是不可或缺的：cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在，而web stroage僅僅是為了在本地“存儲”在存在
- 瀏覽器的支持除了IE7及以下不支持外，其他標准都會完全支持（ie及FF需要在web服務器里進行），值得一提的是IE總是辦好事，例如IE7,IE6的userData其實就是js本地存儲的解決方法，通過簡單的代碼封裝就可以同意到所有的瀏覽器都支持web storage
- localStorage和sessionStorage都具有相同的操作方法，例如setItem,getItem,removeItem等
22.cookie 和 session的區別
- cookie數據存放在客戶的瀏覽器上，session數據放在服務器上
- cookie不是很安全，別人分析存放在本地的cookie進行cookie欺騙
- 考慮到安全應當使用session
- session會在一定時間內保存在服務器上，當訪問增多，會比較占用你服務器的性能
- 考慮到減輕服務器性能方面，應當使用cookie
- 單個cookie保存的數據不能超過4k，很多瀏覽器都限制一個站點最多保存20個cookie
所以個人建議：
- 將登陸信息等重要信息放在session
- 其他信息如果需要保留，可以放在cookie
23.常見兼容性問題？
- png24位的圖片在ie6瀏覽器上出現背景，解決方案是做成png8，也可以引用一段腳本處理
- 瀏覽器默認的margin和padding不同，解決方案是加一個全局的*{margin: 0;padding:0;}來統一
- IE6雙邊距BUG：塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin得比設置的大
- 浮動ie產生的雙邊距距離（IE6雙邊距問題：在IE6，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍）
.box{ float:left; width:10px; margin:0 0 0 100px; }
- 這種情況之下ie會產生20px的距離，解決方案是在float的標簽樣式控制中加入
- _display：inline；將其轉化為行內屬性（_這個符號只有ie6識別）
- 漸進識別的方式，從總體中逐漸排除局部
- 首先，巧妙的使用“\9”這一標記，將ie瀏覽器從所有情況中分離出來
- 接着，再次使用“+”將IE8和IE7，IE6分離出來，這樣IE8已經獨立識別
.a{ background-color: #ccc; /*所有識別*/ .background-color: #ccc\9; /*IE6，7,8識別*/ +background-color: #ccc; /*IE6,7識別*/ _background-color: #ccc; /*IE6識別*/ }
- 怪異模式問題：漏寫DOCTYPE聲明。firefox仍然會按照標准模式來解析網頁，但是IE中會觸發怪異模式，為了避免不必要的麻煩，最好聲明<doctype html> 良好習慣
IE6瀏覽器常見的BUG
1.IE6不支持min-height，解決辦法使用css hack
.target{ min-height: 100px; height: auto !important; height: 100px; //IE6下內容高度超過會自動擴展高度 }
2.ol內的序號全為1，不遞增。
為li設置樣式display: list-item
3.未定位父元素overflow: auto;，包含position: relative；子元素，子元素高於父元素時會溢出
子元素去掉position: relative
不能為子元素取消定位時，父元素position：relative
4.IE6只支持a標簽的:hover偽類
使用js為元素監聽mouseenter,mouseleave事件，添加類實現效果
5.IE5-8不支持opacity，
.opacity{ opacity: 0.4; filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }
6.IE6在設置height小於font-size時高度值為font-size
font-size:0;
7.IE6不支持PNG透明背景
IE6下使用gif圖片
8.IE6-7不支持display: inline-block
設置inline並處罰hasLayout
display: inline-block;
*display: inline;
*zoom: 1;
9.IE6下浮動元素在浮動方向上與父元素便捷接觸元素的外邊距會加倍
使用padding控制邊距
浮動元素display: inline;
10.通過塊級元素設置寬度和左右margin為auto時，IE6不能實現水平居中
為父元素設置text-align: center