【理論面試篇】收集整理來自網絡上的一些常見的 經典前端、H5面試題 Web前端開發面試題

##2017.10.30收集

面試技巧

5.1  面試形式

1)        通常而言，小公司作筆試題；大公司面談項目經驗；作地圖的必定考算法

2)        面試官喜歡什麼樣的人

ü  技術好、自信、謙虛、善於溝通、表達。

ü  喜歡追究原理

5.2 面試內容

 1.2.1簡歷上的項目

ü  介紹下你的項目吧？

1)        第一步：介紹你項目是幹嗎的

2)        第二步：介紹下你負責的是哪塊

3)        第三步：介紹下里面都有什麼功能，你是怎麼實現的，怎麼分層的？

1.2.2非技術=處事方法+表達+態度+忠誠度

ü  請你作一下自我介紹

ü  你在找工做時，最重要的考慮因素是什麼？

ü  你對咱們公司瞭解多少？你爲何想來咱們公司工做？

ü  請談談你的優勢和缺點？

ü  你爲何離開上一家公司？

ü  工做中曾面臨的最大困難是什麼？如何解決的？

ü  你的職業目標是什麼？（短時間和長期）

ü  你是應屆生，缺少經驗，如何勝任這份工做？

ü  你對加班的見解？

ü  你對薪資的要求？

ü  你最擅長的技術方向是什麼？談談你以前作的項目？

ü  你有什麼問題要問我？(參考下面思路)

n  咱們公司有哪些項目要作了？

n  項目中使用什麼技術來開發？

n  咱們公司上班時間是怎樣的？

n  前端開發目前有多少人在作？

5.3 面試技巧

Ø  1靠的是技術  2靠技巧 3玩的是心理

Ø  怎麼回答問題

Ø  知道的問題正面回答，用案例去展現

Ø  不知道的問題說解決思路

Ø  原理性的知識，必須背下來，代碼不須要會寫，沒人要求寫原理、底層的代碼(這是一個空子，能夠鑽)

Ø  面試始終保持平靜，冷靜，鎮靜，面試再刁難也要保持端坐，面帶一絲微笑

Ø  對喜歡的公司最好能表現出對加入目標公司的渴望，對技術的追求

Ø  不能說不知道，能夠說：以前瞭解過，作過這種練習，但沒有拿到項目中來用。若是你回答了不知道，那面試官直接就否認你了

Ø  面試官給你出題時，回答問題要思考一段時間，提出思路(這樣表現出你是善於思考，交流，有思路)。間接性的試探答案，要的就是這種交互性，注意交流很重要

Ø  加分的地方：對簡歷上的項目很熟悉，技術點都有所研究，包括封裝，細節實現，以及本身編寫的小工具

Ø  回答問題後，可再加一些我的見解～好比：json用過嗎？怎麼用？回答時，可把jsonp也敘述一下

Ø  不想去的公司（小公司，剛剛組建開發團隊……）也儘可能去面試，爲的是積累經驗。不一樣公司會問不一樣類型的問題，經歷多了，你會發現面試很爽，尤爲是秒殺他們的時候。

Ø  主管和你談話～是探測你這我的是否可用……，回答問題要表現良好的一面，通常會問～你未來怎麼規劃的？回答：三年達到技術總監的水平。技術總監須要作到什麼？1.技術過硬2.溝通交流，帶領團隊……

Ø  你在工做中遇到了哪些難題？？ 必定要提早準備兩道，忽悠他！

Ø  爲何離開上家公司？業務單一，太閒了，項目太少，想要更大的提高空間，這時對方確定會想～你喜歡忙一些是吧，咱們這裏好多項目讓你忙個夠。你最好也表現出來～你要努力提高本身，不斷超越的念頭。

Ø  要有底線別把本身的底線出賣了，要有底氣。面試官可能一個勁的談你的弱點，打擊你的內心，這時千萬不要亂了陣腳，不要把底線出賣了。既然面試官一直和你聊，那就證實你在他眼中是有價值的。薪資方面該怎麼要就怎麼要。

Ø  你給本身評個等級，初，中，高，你最次也要說中級，好一點說中級偏上。

Ø  談薪資：這一步你能多拿1000-2000元，你想：對方都和你談薪資了，證實你這我的有可用價值。 Eg.對方說給你8K，你徹底能再多要1-2K，公司不差那點錢，只要你能給公司帶來N多K的利益。

Ø  態度很重要：沒人查我的背景(這點不用太擔憂，大不了從新找)；上班後勤勉工做，最好不要泡在QQ上，不懂趕忙問，別拖延時間，轉正期也是適應期多，花點時間在工做上，工做態度很是很是重要

 

Ø  不見得你會這項技術就錄用你，也不見得你不會某項技術就不錄用你。面試中要注意和麪試官交流，在交流中讓對方感觸到你基礎不錯，你有潛力，你邏輯思惟不錯。以上這些你作到了，若是不是那家公司只招一個某個專項技術的人，那你百分之八九十會被錄用的。

 

5.4 面試中須要注意的問題

Ø  音量大小

Ø  語速控制

Ø  不說「我想一想」，「好像是」，「可能」，「應該」，「估計」。。。等不願定的語彙

Ø  用講故事的方式主導面試官司的思惟

Ø  面試的基本流程

1)        自我介紹

姓名、年齡、哪年畢業、哪年哪月入職第一家公司第一個項目開始介紹。。。

爲什麼離職？介紹到最後一個項目的時候開始拿出來演示

2)        技術面試

用項目中的實例來回答面試官的問題

3)        談薪

上家公司的薪資是多少？指望薪資是多少？

 

常見排序算法的時間複雜度,空間複雜度

移動端性能優化
▪ 儘可能使用css3動畫，開啓硬件加速。
▪ 適當使用touch事件代替click事件。
▪ 避免使用css3漸變陰影效果。
▪ 能夠用transform: translateZ(0)來開啓硬件加速。
▪ 不濫用Float。Float在渲染時計算量比較大，儘可能減小使用
▪ 不濫用Web字體。Web字體須要下載，解析，重繪當前頁面，儘可能減小使用。
▪ 合理使用requestAnimationFrame動畫代替setTimeout
▪ CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引起手機過耗電增長
▪ PC端的在移動端一樣適用，相關閱讀：如何作到一秒渲染一個移動頁面

1：爲什麼選擇前端這個方向和對前端的理解

爲何：

第一的話就是對前端很感興趣，以前也接觸過其餘的語言，可是直到接觸到前端才發現真的有興趣作下去，興趣是一我的最好的老師，

第二的話前端頗有前途，像如今nodejs，rn，微信小程序這類工具和框架可讓前端進行後端和移動開發，因此我以爲前端的前途會更多一點。

理解：

首先前端工程師最核心的技能仍是：Html、CSS、JS。前端負責的是用戶能夠看到的部分，因此也是最接近用戶的工程師。同時在產品研發流程中前端要同時與產品、設計、後端等不少人合做。

對本身將來的規劃是怎樣的

對於剛畢業的人來講，前兩年是很重要的，先打好基礎，多提高js能力。三至四年在提高JS能力的同時，開始要往多方面發展，前端工程師遠遠不只是JS而已。製做一個性能高、交互好、視覺美的頁面，須要從前端框架選型、架構設計、構建工具，到後端通訊機制、設計與交互、網絡和瀏覽器優化等各方面的知識。一專多長才是前端工程師的終極目標。

（內容2）——————

稍微比較全的面試題，還在總結中！

HTML+CSS
1.對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性；

2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不一樣：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。

3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規範（html/Xhtml）通常爲 嚴格 過分 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改成IE5.5 擁有IE5.5的bug

4.行內元素有哪些？塊級元素有哪些？CSS的盒模型？
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入 
區別 ：同時加載
前者無兼容性，後者CSS2.1如下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可

6.CSS選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和important哪一個優先級高？
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先級高

7.前端頁面有哪三層構成，分別是什麼？做用是什麼？
結構層 Html 表示層 CSS 行爲層 js

8.css的基本語句構成是？
選擇器{屬性1:值1;屬性2:值2;……}

9.你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?
Ie(Ie內核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

10.寫出幾種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默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

11.<img>標籤上title與alt屬性的區別是什麼？
Alt 當圖片不顯示是 用文字表明。
Title 爲該屬性提供信息

12.描述css reset的做用和用途。
Reset重置瀏覽器的css默認屬性 瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一

13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量

14.瀏覽器標準模式和怪異模式之間的區別是什麼？
盒子模型 渲染模式的不一樣
使用 window.top.document.compatMode 可顯示爲何模式

15.你如何對網站的文件和資源進行優化？期待的解決方案包括：
文件合併
文件最小化/文件壓縮
使用CDN託管
緩存的使用

16.什麼是語義化的HTML？
直觀的認識標籤 對於搜索引擎的抓取有好處

17.清除浮動的幾種方式，各自的優缺點
浮動的表現，元素排成了一行
元素內容超出了容器邊框，高度坍塌
1.在浮動元素後給空標籤清除浮動 clear:both（理論上能清除任何浮動，弊端是增長無心義的標籤），或者用afert僞元素+clear:both組合法清除浮動(用於非IE瀏覽器)
2.給浮動元素添加樣式float:none
3.經過使父標籤浮動也能夠清理子類浮動，將空間撐開。例如讓父標籤生成BFC（IE8+），display:block、overflow:auto/hidden、zoom:1（觸發haslayout(IE6/IE7) 兼容IE）
zoom:1的做用： 觸發IE下的hasLayout。zoom是IE瀏覽器專有屬性，能夠設置或檢索對象的縮放比例。 當設置了zoom的值以後，所設置的元素就會擴大或縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發生從新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。
4.父元素設置適合的height

浮動有什麼用？
浮動是讓某個div元素脫離標準流，漂浮在標準流之上，經常使用來文字環繞或佈局效果。
浮動過程原理就一句話：浮動元素會脫離文檔流並向左/向右浮動，直到碰到父元素或者另外一個浮動元素。
浮動怎樣產生的呢？
通常浮動是什麼狀況呢？通常是一個盒子裏使用了CSS float浮動屬性，致使父級對象盒子不能被撐開，這樣CSS float浮動就產生了。
浮動產生負做用
一、背景不能顯示
因爲浮動產生，若是對父級設置了（CSS background背景）CSS背景顏色或CSS背景圖片，而父級不能被撐開，因此致使CSS背景不能顯示。
二、邊框不能撐開
若是父級設置了CSS邊框屬性（css border），因爲子級裏使用了float屬性，產生浮動，父級不能被撐開，致使邊框不能隨內容而被撐開。
三、margin padding設置了值但無效，不能正確顯示

Javascript
1.javascript的typeof返回哪些數據類型
Object number function boolean underfind string

2.例舉3種強制類型轉換和2種隱式類型轉換？
強制（parseInt,parseFloat,number）
隱式（== - ===）

3.split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字符串

4.數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除

5.事件綁定和普通事件有什麼區別

普通添加事件的方法：

var btn = document.getElementById("hello");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}
執行上面的代碼只會alert 2

事件綁定方式添加事件：

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false);
執行上面的代碼會先alert 1 再 alert 2

普通添加事件的方法不支持添加多個事件，最下面的事件會覆蓋上面的，而事件綁定（addEventListener）方式添加事件能夠添加多個。

6.IE和DOM事件流的區別
1.執行順序不同、
2.參數不同
3.事件加不加on
4.this指向問題

7.IE和標準下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

列舉IE 與其餘瀏覽器不同的特性？

• IE支持currentStyle，FIrefox使用getComputStyle

• IE 使用innerText，Firefox使用textContent

• 濾鏡方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num

• 事件方面：IE：attachEvent：火狐是addEventListener

• 鼠標位置：IE是event.clientX；火狐是event.pageX

• IE使用event.srcElement；Firefox使用event.target

• IE中消除list的原點僅需margin:0便可達到最終效果；FIrefox須要設置margin:0;padding:0以及list-style:none

• CSS圓角：ie7如下不支持圓角

8.ajax請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裏面
有大小限制
安全問題
應用不一樣 一個是論壇等只須要請求的，一個是相似修改密碼的

9.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

二者在做用上是相同的，但在參數上有區別的。
對於第一個參數意義都同樣，但對第二個參數：
apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則做爲call的參數傳入（從第二個參數開始）。
如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3])

同時使用apply的好處是能夠直接將當前函數的arguments對象做爲apply的第二個參數傳入

10.ajax請求時，如何解析json數據
使用eval、JSON.parse 鑑於安全性考慮 使用parse更靠譜

13.事件委託是什麼
讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

//利用冒泡的原理，把事件加到父級上，觸發執行效果。
//1.能夠大量節省內存佔用，減小事件註冊。
//2.能夠方便地動態添加和修改元素，不須要由於元素的改動而修改事件綁定。
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); 
        } 
    } 
}); 

 

14.閉包是什麼，有什麼特性，對頁面有什麼影響，應用場景

閉包是指有權訪問另外一個函數做用域中的變量的函數. 建立閉包常見方式,就是在一個函數內部建立另外一個函數.

應用場景 設置私有變量和方法

不適合場景：返回閉包的函數是個很是大的函數

閉包的缺點就是常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。

受JavaScript鏈式做用域結構的影響，父級變量中沒法訪問到子級的變量值，爲了解決這個問題，才使用閉包這個概念

15.如何阻止事件冒泡和默認事件
canceBubble、return false

16.添加 刪除 替換 插入到某個接點的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

17.解釋jsonp的原理，以及爲何不是真正的ajax
動態建立script標籤，回調函數
Ajax是頁面無刷新請求數據操做

18.javascript的本地對象，內置對象和宿主對象
本地對象爲array obj regexp等能夠new實例化
內置對象爲gload Math 等不能夠實例化的
宿主爲瀏覽器自帶的document,window 等

19.document load 和document ready的區別
Document.onload 是在結構和樣式加載完才執行js
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

20.」==」和「===」的不一樣
前者會自動轉換類型
後者不會

21.javascript的同源策略
一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

 ::before 和:before有什麼區別？

相同點
均可以用來表示僞類對象，用來設置對象前的內容
:befor和::before寫法是等效的
不一樣點
:befor是Css2的寫法，::before是Css3的寫法
:before的兼容性要比::before好 ，不過在H5開發中建議使用::before比較好
加分項
僞類對象要配合content屬性一塊兒使用
僞類對象不會出如今DOM中，因此不能經過js來操做，僅僅是在 CSS 渲染層加入
僞類對象的特效一般要使用:hover僞類樣式來激活

.test:hover::before { /* 這時animation和transition才生效 */ }

 

（內容3）——————

http://bbs.blueidea.com/thread-3107428-1-1.html如下都是網上整理出來的JS面試題，答案僅供參考。

4，IE與FF腳本兼容性問題
obj.addEventListener(sEv, fn, false);
obj.attachEvent('on'+sEv,fn);
detachevet
removeEventListener
DOMContentLoaded
onreadystatechange complete
DOMMouseScroll FF
onmousewheel 非FF
event.wheelDelta 上滾120 下-120
event.detail 上滾-3 下3 
obj.getCurrentStyle[attr]
getComputedStyle(obj,false)[attr]
XMLHttpRequest
ActiveXObject('Mircorsoft.XMLHttp')
FF本地能設置讀取cookie 其餘不行
event ev
事件源
srcElement||target
toElement||relatedTarget
obj.setCapture();只有ie認
obj.releaseCapture();

5，規避javascript多人開發函數重名問題
命名空間
封閉空間
js模塊化mvc（數據層、表現層、控制層）
seajs
變量轉換成對象的屬性
對象化

6，javascript面向對象中繼承實現
function Person(name){
this.name = name;
}

Person.prototype.showName = function(){
alert(this.name);
}

function Worker(name, job){
Person.apply(this,arguments)
this.job = job;
}
for(var i in Person.prototype){
Worker.prototype = Person.prototype;
}
new Worker('sl', 'coders').showName();

js繼承方式及其優缺點
原型鏈繼承的缺點
一是字面量重寫原型會中斷關係，使用引用類型的原型，而且子類型還沒法給超類型傳遞參數。
借用構造函數（類式繼承）
借用構造函數雖然解決了剛纔兩種問題，但沒有原型，則複用無從談起。因此咱們須要原型鏈+借用構造函數的模式，這種模式稱爲組合繼承
組合式繼承
組合式繼承是比較經常使用的一種繼承方法，其背後的思路是 使用原型鏈實現對原型屬性和方法的繼承，而經過借用構造函數來實現對實例屬性的繼承。這樣，既經過在原型上定義方法實現了函數複用，又保證每一個實例都有它本身的屬性。

7，FF下面實現outerHTML
var oDiv = document.createElement('div');
var oDiv1 = document.getElementById('div1');
var oWarp = document.getElementById('warp');

oWarp.insertBefore(oDiv, oDiv1);
oDiv.appendChild(oDiv1);
var sOut = oDiv.innerHTML;
oWarp.insertBefore(oDiv1, oDiv);
oWarp.removeChild(oDiv);
alert(sOut);

8，編寫一個方法 求一個字符串的字節長度
假設一箇中文佔兩個字節
var str = '22兩是';

alert(getStrlen(str))

function getStrlen(str){
var json = {len:0};
var re = /[\u4e00-\u9fa5]/;
for (var i = 0; i < str.length; i++) {
if(re.test(str.charAt(i))){
json['len']++;
}
};
return json['len']+str.length;
}

 

10，寫出3個使用this的典型應用

事件： 如onclick this->發生事件的對象
構造函數 this->new 出來的object
call/apply 改變this

12，JavaScript中如何檢測一個變量是一個String類型？請寫出函數實現

typeof(obj) == 'string'
obj.constructor == String;

網站設計八步驟 https://zhidao.baidu.com/question/12980607.html
1、肯定網站主題 
2、蒐集材料 
3、規劃網站 
4、選擇合適的製做工具 
5、製做網頁 
6、上傳測試 
7、推廣宣傳 
8、維護更新

內容分析：分清展示在網絡中內容的層次和邏輯關係
結構設計：寫出合理的html結構代碼
佈局設計：使用html+css進行佈局
樣式設計：首先要使用reset.css
交互設計：鼠標特效
行爲設計：js代碼，ajax頁面行爲和從服務器獲取數據
最後：測試兼容性，優化性能；

2.1你能描述一下你製做網站 製做網站的基本流程嗎？

步驟http://jingyan.baidu.com/article/c275f6bac69f28e33d7567ef.html
a.網站內容的設計;
b.域名的申請註冊;
c.網站空間地址;
d.網站的運營維護;
e.網站的推廣;

3.你能描述一下漸進加強和優雅降級之間的不一樣嗎?

什麼是漸進加強（progressive enhancement）、優雅降級（graceful degradation）呢？
　　漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
　　
　　優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

　　區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

「優雅降級」觀點
「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。

「漸進加強」觀點
「漸進加強」觀點則認爲應關注於內容自己。
內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。

 

4. 請解釋一下什麼是語義化的HTML。
內容使用特定標籤，經過標籤就能大概瞭解總體頁面的佈局分佈

6. 你如何對網站的文件和資源進行優化？

這道題考察 雅虎軍規 1.儘量減小http請求次數，將css, js, 圖片各自合併 2.使用CDN，下降通訊距離 3.添加Expire/Cache-Control頭 4.啓用Gzip壓縮文件 5.將css放在頁面最上面 6.將script放在頁面最下面 7.避免在css中使用表達式 8.將css, js都放在外部文件中 9.減小DNS查詢 10.最小化css, js，減少文件體積 11.避免重定向 12.移除重複腳本 13.配置實體標籤ETag 14.使用AJAX緩存，讓網站內容分批加載，局部更新

什麼是Etag？

當發送一個服務器請求時，瀏覽器首先會進行緩存過時判斷。瀏覽器根據緩存過時時間判斷緩存文件是否過時。

情景一：若沒有過時，則不向服務器發送請求，直接使用緩存中的結果，此時咱們在瀏覽器控制檯中能夠看到 200 OK(from cache) ，此時的狀況就是徹底使用緩存，瀏覽器和服務器沒有任何交互的。

情景二：若已過時，則向服務器發送請求，此時請求中會帶上①中設置的文件修改時間，和Etag

而後，進行資源更新判斷。服務器根據瀏覽器傳過來的文件修改時間，判斷自瀏覽器上一次請求以後，文件是否是沒有被修改過；根據Etag，判斷文件內容自上一次請求以後，有沒有發生變化

情形一：若兩種判斷的結論都是文件沒有被修改過，則服務器就不給瀏覽器發index.html的內容了，直接告訴它，文件沒有被修改過，你用你那邊的緩存吧—— 304 Not Modified，此時瀏覽器就會從本地緩存中獲取index.html的內容。此時的狀況叫協議緩存，瀏覽器和服務器之間有一次請求交互。

情形二：若修改時間和文件內容判斷有任意一個沒有經過，則服務器會受理這次請求，以後的操做同①

 ① 只有get請求會被緩存，post請求不會

Expires和Cache-Control

Expires要求客戶端和服務端的時鐘嚴格同步。HTTP1.1引入Cache-Control來克服Expires頭的限制。若是max-age和Expires同時出現，則max-age有更高的優先級。

Cache-Control: no-cache, private, max-age=0

    ETag: abcde

    Expires: Thu, 15 Apr 2014 20:00:00 GMT

    Pragma: private

    Last-Modified: $now // RFC1123 format

 ETag應用:

Etag由服務器端生成，客戶端經過If-Match或者說If-None-Match這個條件判斷請求來驗證資源是否修改。常見的是使用If-None-Match。請求一個文件的流程可能以下：

====第一次請求===

1.客戶端發起 HTTP GET 請求一個文件；

2.服務器處理請求，返回文件內容和一堆Header，固然包括Etag(例如"2e681a-6-5d044840")(假設服務器支持Etag生成和已經開啓了Etag).狀態碼200

====第二次請求===

客戶端發起 HTTP GET 請求一個文件，注意這個時候客戶端同時發送一個If-None-Match頭，這個頭的內容就是第一次請求時服務器返回的Etag：2e681a-6-5d0448402.服務器判斷髮送過來的Etag和計算出來的Etag匹配，所以If-None-Match爲False，不返回200，返回304，客戶端繼續使用本地緩存；流程很簡單，問題是，若是服務器又設置了Cache-Control:max-age和Expires呢，怎麼辦

答案是同時使用，也就是說在徹底匹配If-Modified-Since和If-None-Match即檢查完修改時間和Etag以後，

服務器才能返回304.(不要陷入到底使用誰的問題怪圈)

爲何使用Etag請求頭?

Etag 主要爲了解決 Last-Modified 沒法解決的一些問題。

 

棧和隊列的區別?
棧的插入和刪除操做都是在一端進行的，而隊列的操做倒是在兩端進行的。
隊列先進先出，棧先進後出。
棧只容許在表尾一端進行插入和刪除，而隊列只容許在表尾一端進行插入，在表頭一端進行刪除

棧和堆的區別？
棧區（stack）— 由編譯器自動分配釋放 ，存放函數的參數值，局部變量的值等。
堆區（heap） — 通常由程序員分配釋放， 若程序員不釋放，程序結束時可能由OS回收。
堆（數據結構）：堆能夠被當作是一棵樹，如：堆排序；
棧（數據結構）：一種先進後出的數據結構。

 

7. 爲何利用多個域名來存儲網站資源會更有效？
確保用戶在不一樣地區能用最快的速度打開網站，其中某個域名崩潰用戶也能經過其餘域名訪問網站

8.請說出三種減低頁面加載時間的方法
a、壓縮css、js文件
b、合併js、css文件，減小http請求
c、外部js、css文件放在最底下
d、減小dom操做，儘量用變量替代沒必要要的dom操做
e、css sprite也算一種，多域名也算一種吧。

9.什麼是FOUC？你如何來避免FOUC？
因爲css引入使用了@import 或者存在多個style標籤以及css文件在頁面底部引入使得css文件加載在html以後致使頁面閃爍、花屏
用link加載css文件，放在head標籤裏面

10.文檔類型的做用是什麼？你知道多少種文檔類型？
影響瀏覽器對html代碼的編譯渲染
html2.0、xHtml、html5

11.瀏覽器標準模式和怪異模式之間的區別是什麼？
盒模型解釋不一樣

1.你使用過那些Javascript庫？
jquery seajs yui

2.哈希表
具備散列（映射）特性的數據模型

3.閉包
子函數能被外部調用到，則該做用連上的全部變量都會被保存下來。

4.請解釋什麼是Javascript的模塊模式，並舉出實用實例。
js模塊化mvc（數據層、表現層、控制層）
seajs
命名空間

5.你如何組織本身的代碼？是使用模塊模式，仍是使用經典繼承的方法？
對內：模塊模式
對外：繼承

用過哪些設計模式？
工廠模式：
主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是new關鍵字。將全部實例化的代碼集中在一個位置防止代碼重複。
工廠模式解決了重複實例化的問題 ，但還有一個問題,那就是識別問題，由於根本沒法 搞清楚他們究竟是哪一個對象的實例。

function createObject(name,age,profession){
//集中實例化的函數
var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () {
        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一個實例
var test2 = createObject('mike',25,'engineer');//第二個實例

構造函數模式
使用構造函數的方法 ，即解決了重複實例化的問題 ，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於：
1.構造函數方法沒有顯示的建立對象 (new Object());
2.直接將屬性和方法賦值給 this 對象;
3.沒有 renturn 語句。

9.你如何優化本身的代碼？
代碼重用
避免全局變量（命名空間，封閉空間，模塊化mvc..）
拆分函數避免函數過於臃腫
註釋

10.你能解釋一下JavaScript中的繼承是如何工做的嗎？
子構造函數中執行父構造函數，並用call\apply改變this
克隆父構造函數原型上的方法

11.useragent是什麼

User Agent中文名爲用戶代理，簡稱 UA，它是一個特殊字符串頭，使得服務器可以識別客戶使用的操做系統及版本、CPU 類型、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等。
一些網站經常經過判斷 UA 來給不一樣的操做系統、不一樣的瀏覽器發送不一樣的頁面，所以可能形成某些頁面沒法在某個瀏覽器中正常顯示，但經過假裝 UA 能夠繞過檢測。
瀏覽器的 UA 字串標準格式爲： 瀏覽器標識 (操做系統標識; 加密等級標識; 瀏覽器語言) 渲染引擎標識 版本信息

12.請儘量詳盡的解釋AJAX的工做原理。

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象. 

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息. 

(3)設置響應HTTP請求狀態變化的函數. 

(4)發送HTTP請求. 

(5)獲取異步調用返回的數據. 

(6)使用JavaScript和DOM實現局部刷新.

var xmlHttp = new XMLHttpRequest();
 
  xmlHttp.open('GET','demo.php','true');
 
  xmlHttp.send()
 
  xmlHttp.onreadystatechange = function(){
 
      if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
 
      }
 
  }
//使用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.readyState == 4) { 
                if (XHR.status  200) { 
                    try { 
                        var response = JSON.parse(XHR.responseText); 
                        resolve(response); 
                    } catch (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 沒找到頁面(not found)
403 禁止訪問(forbidden)
500 內部服務器出錯(internal service error)
200 一切正常(ok)
304 沒有被修改(not modified)(服務器返回304狀態，表示源文件沒有被修改）

ajax的缺點
一、ajax不支持瀏覽器back按鈕。

二、安全問題 AJAX暴露了與服務器交互的細節。

三、對搜索引擎的支持比較弱。

四、破壞了程序的異常機制。

五、不容易調試。

在IE瀏覽器下，若是請求的方法是GET，而且請求的URL不變，那麼這個請求的結果就會被緩存。解決這個問題的辦法能夠經過在URL末尾添加上隨機的時間戳參數('t'= + new Date().getTime())

講講304緩存的原理
服務器首先產生ETag，服務器可在稍後使用它來判斷頁面是否已經被修改。本質上，客戶端經過將該記號傳回服務器要求服務器驗證其（客戶端）緩存。
304是HTTP狀態碼，服務器用來標識這個文件沒修改，不返回內容，瀏覽器在接收到個狀態碼後，會使用瀏覽器已緩存的文件
客戶端請求一個頁面（A）。 服務器返回頁面A，並在給A加上一個ETag。 客戶端展示該頁面，並將頁面連同ETag一塊兒緩存。 客戶再次請求頁面A，並將上次請求時服務器返回的ETag一塊兒傳遞給服務器。 服務器檢查該ETag，並判斷出該頁面自上次客戶端請求以後還未被修改，直接返回響應304（未修改——Not Modified）和一個空的響應體。

19: 說說你還知道的其餘狀態碼，狀態碼的存在解決了什麼問題

302/307　　臨時重定向

301　永久重定向

藉助狀態碼,用戶能夠知道服務器端是正常處理了請求,仍是出現了什麼錯誤

38: 簡單介紹一下promise，他解決了什麼問題

Promise，就是一個對象，用來傳遞異步操做的消息。有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失敗）。

有了 Promise 對象，就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。

45： XSS和CSRF攻擊

xss：好比在一個論壇發帖中發佈一段惡意的JavaScript代碼就是腳本注入，若是這個代碼內容有請求外部服務器，那麼就叫作XSS

寫一個腳本將cookie發送到外部服務器這就是xss攻擊可是沒有發生csrf

防範：對輸入內容作格式檢查 輸出的內容進行過濾或者轉譯

CSRF：又稱XSRF，冒充用戶發起請求（在用戶不知情的狀況下）,完成一些違背用戶意願的請求 如惡意發帖，刪帖

好比在論壇發了一個刪帖的api連接 用戶點擊連接後把本身文章給刪了 這裏就是csrf攻擊沒有發生xss

防範：驗證碼 token 來源檢測

web開發中會話跟蹤的方法有哪些

1. cookie
2. session
3. url重寫
4. 隱藏input
5. ip地址

21: 說說content-box和border-box，爲何看起來content-box更合理，可是仍是常用border-box

content-box 是W3C的標準盒模型 元素寬度=內容寬度+padding+border

border-box 是ie的怪異盒模型  他的元素寬度等於內容寬度  內容寬度包含了padding和border

 好比有時候在元素基礎上添加內距padding或border會將佈局撐破 可是使用border-box就能夠輕鬆完成

常見web安全及防禦原理
sql注入原理
就是經過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。
總的來講有如下幾點：
1.永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙"-"進行轉換等。
2.永遠不要使用動態拼裝SQL，能夠使用參數化的SQL或者直接使用存儲過程進行數據查詢存取。
3.永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接。
4.不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息。

XSS原理及防範
Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裏插入惡意 html標籤或者javascript代碼。好比：攻擊者在論壇中放一個
看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，
當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點。

XSS防範方法
首先代碼裏對用戶輸入的地方和變量都須要仔細檢查長度和對」<」,」>」,」;」,」’」等字符作過濾；其次任何內容寫到頁面以前都必須加以encode，避免不當心把html tag 弄出來。這一個層面作好，至少能夠堵住超過一半的XSS 攻擊。
首先，避免直接在cookie 中泄露用戶隱私，例如email、密碼等等。
其次，經過使cookie 和系統ip 綁定來下降cookie 泄露後的危險。這樣攻擊者獲得的cookie 沒有實際價值，不可能拿來重放。
若是網站不須要再瀏覽器端對cookie 進行操做，能夠在Set-Cookie 末尾加上HttpOnly 來防止javascript 代碼直接獲取cookie 。
儘可能採用POST 而非GET 提交表單

XSS與CSRF有什麼區別嗎？
XSS是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。
要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：
1.登陸受信任網站A，並在本地生成Cookie。
2.在不登出A的狀況下，訪問危險網站B。
CSRF的防護
▪ 服務端的CSRF方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數。
▪ 經過驗證碼的方法

HTTP和HTTPS

HTTP協議一般承載於TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了咱們常說的HTTPS。

默認HTTP的端口號爲80，HTTPS的端口號爲443。

爲何HTTPS安全

由於網絡請求須要中間有不少的服務器路由器的轉發。中間的節點均可能篡改信息，而若是使用HTTPS，密鑰在你和終點站纔有。https之因此比http安全，是由於他利用ssl/tls協議傳輸。它包含證書，卸載，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer傳遞等。保障了傳輸過程的安全性

（內容4）——————

前端應聘者看過來，近一個星期面試總結

各個瀏覽器中css表現的差別性(瀏覽器兼容問題)：
(http://www.douban.com/group/topic/4629864/)
(http://blog.csdn.net/chuyuqing/article/details/37561313)
(http://www.iefans.net/ie-9-css-bug/)
1,各瀏覽器下，margin與padding顯示差別
解決辦法:CSS reset
2,block+float+水平margin,IE6裏的間距比超過設置的間距(橫向佈局)
解決辦法:diaplay:inline
(不用擔憂內聯元素無寬高，由於float會讓inline元素haslayout,讓inline元素表現的和inline-block元素同樣有寬高和垂直內外邊距)
[咱們最經常使用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候咱們一般都是用div float實現的，橫向的間距設置若是用margin實現，這就是一個必然會碰到的兼容性問題]
3,inline+(display:block)+float+水平margin,IE6裏的間距比超過設置的間距
說明:該狀況與上面的差很少,只是此處的元素一開始是內聯元素,加了display:block的CSS屬性.由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe
解決辦法:display:inline;display:table;
4,IE6對margin:0 auto;不會正確的進行解析
解決辦法：
在父元素中使用text-align:center,在元件中使用text-align:left
5,沒法設置微高(通常小於10px)：
說明:當設置元素高度小於10px時，IE6和IE7不受控制，超出設置的高度
產生緣由:IE不容許原件的高度小於字體的高度
解決辦法1:設置字體大小:font-size:0;
解決辦法2:給超出高度的標籤設置overflow:hidden
解決辦法3:設置行高line-height小於你設置的高度
6,子元件撐破父元件
緣由:父元件設置了overflow:auto屬性,子元件會從父元件中撐破出來
解決辦法:父元件中設置position:relative;
7,IE沒法解析min-height和min-width
解決辦法1:
selector{
min-height:150px;
height:auto !important;
height:150px;
}
解決辦法2：
selector{
min-height:150px;
height:150px;
}
heml>body selector{
height:auto;
}
8,使用ul li時,li與li之間會空行
解決辦法1:設置li selector{height:**px;}
解決辦法2:li selector{float:left;clear:left;}
解決辦法3:li{display:inline}

css sprite是什麼,有什麼優缺點

概念：將多個小圖片拼接到一個圖片中。經過background-position和元素尺寸調節須要顯示的背景圖案。

優勢：

1. 減小HTTP請求數，極大地提升頁面加載速度
2. 增長圖片信息重複度，提升壓縮比，減小圖片大小
3. 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現

缺點：

1. 圖片合併麻煩
2. 維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式

css hack原理及經常使用hack

原理：利用不一樣瀏覽器對CSS的支持和解析結果不同編寫針對特定瀏覽器樣式。常見的hack有1）屬性hack。2）選擇器hack。3）IE條件註釋

CSS hack:
+:IE6,IE7
_:IE6
\9:IE6,IE7,IE8
\0:IE8,IE9
\9\0:IE9
!important:All(IE6是有條件的支持)

經常使用的CSS reset:
(http://blog.bingo929.com/css-reset-collection.html)
margin:0;
padding:0;
border:0;
...

實現三個DIV等分排布在一行（考察border-box）

1.設置border-box width33.3%

2.flexbox flex：1 

設置width的flex元素，flex屬性值是多少

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫

flex-grow屬性定義項目的放大比例，默認爲0

flex-shrink屬性定義了項目的縮小比例，默認爲1

flex-basis屬性定義了項目的固定空間

怎麼實現從一個DIV左上角到右下角的移動，有哪些方法，都怎麼實現

改變left值爲window寬度-div寬度 top值爲window高度-div高度

jquery的animate方法

css3的transition

盒子模型

1）盒子模型有兩種，W3C和IE盒子模型
（1）W3C定義的盒子模型包括margin、border、padding、content ，元素的width=content的寬度

（2）IE盒子模型與W3C的盒子模型惟一區別就是元素的寬度，元素的width=content+padding+border

2）我的理解和心得，要記住在面試時，咱們和麪試官是平等的，並且面試官也很是欣賞喜歡交談的人，在面試的時候可以去表達本身的想法，每每會給面試官留下很是好的印象。例如上面的盒子模型，示範以下：
我我的認爲W3C定義盒子模型與IE定義的盒子模型，IE定義的比較合理，元素的寬度應該包含border（邊框）和padding（填充），這個和咱們現實生活的盒子是同樣的，W3C也認識到本身的問題了，因此在CSS3中新增了一個樣式box-sizing，包含兩個屬性content-box 和 border-box。
（1） content-box 元素的width=content+padding+border

.test1{ 
box-sizing:content-box; 
width:200px; 
padding:10px; 
border:15px solid #eee; 
} 

（2） border-box 元素的width=width（用樣式指定的寬度）

.test1{ 
box-sizing:border-box; 
width:200px; 
padding:10px; 
border:15px solid #eee; 
} 

加分項回答（本身比較獨到理解）

1.對於行級元素，margin-top和margin-bottom對於上下元素無效，margin-left和margin-right有效
2.對於相鄰的塊級元素margin-bottom和margin-top 取值方式
1） 都是正數： 取最大值
距離=Math.max(margin-bottom,margin-top)
2） 都是負數： 取最小值
距離=Math.min(margin-bottom,margin-top)
3）上面是正數，下面是負數或者 上面是負數，下面是正數： 正負相加
距離=margin-bottom+margin-top

對於盒子的選擇：

須要依靠最上面的Doctype來看,若是沒有聲明Doctype,則按照瀏覽器會根據本身的行爲去理解網頁;聲明後各瀏覽器會按照W3C標準去解釋你的盒子,網頁就能在各個瀏覽器中顯示一致了

JS的數據類型(http://blog.sina.com.cn/s/blog_6fd4b3c10101d0va.html)
基本數據類型(5)：string，number，null，undefined，boolean
引用類型：object，array，function；
數據類型 typeof
string string
number number
boolean boolean
undefined undefined
null object
object object
array object
function function
(NaN) (number)
(Error) (Function)
區分基本數據類型：typeof;
區分引用數據類型：instanceof（instanceof還能夠檢測到具體的是什麼實例，能夠檢測是不是正則表達式）
eg:[1,2,3,4] instanceof Array; //true
\d{3} instanceof RegExp; //true
區分各數據類型：
Object.prototype.toString.call(val).slice(8,-1)；
eg:Object.prototype.toString.call([1,2,3]).slice(8,-1); //Array
obj instanceof typeName;
eg:[1,2,3] instanceof Array; //true
obj.constructor.toString().indexof(typeName);
eg:[1,2,3].constructor.toString().indexof("Array"); 
//9(只要值不爲-1,即爲typeName類型)

會不會SEO(搜索引擎優化)
1,站內優化
使得網站在搜索引擎上的友好度和站內用戶的良好體驗度上升
讓網站在搜索引擎的排名靠前而且獲得很好的客戶轉換率
2,站外優化
經過SEO手段幫助網站和網站所屬企業進行品牌推廣

前端須要注意哪些SEO

1. 合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
2. 語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
3. 重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
4. 重要內容不要用js輸出：爬蟲不會執行js獲取內容
5. 少用iframe：搜索引擎不會抓取iframe中的內容
6. 非裝飾性圖片必須加alt
7. 提升網站速度：網站速度是搜索引擎排序的一個重要指標

html5新特性？
1，webStorage(sessionStorage,localStorage);
2，onmessage,postmessage解決跨域問題;
3，新的文檔類型 (New Doctype)：
以前的聲明文檔類型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">在H5中失效，H5只須要用
<!DOCTYPE html>便可完成文檔聲明
4，新增一系列語義化標籤：header,footer,figure+figcaption,article,nav等
5，新增屬性 ：
佔位符 (placeholder：
在HTML4或XHTML中，你須要用JavaScript來給文本框添加佔位符。
好比，你能夠提早設置好一些信息，當用戶開始輸入時，文本框中的文字就消失。而在HTML5中,新的「placeholder」就簡化了這個問題；
input新增屬性：required(必填項);pattern(正則限定輸入)；
6,audio(音頻)與video(視頻);
7,<script async="async">

事件模型

DOM事件模型是如何的,編寫一個EventUtil工具類實現事件管理兼容

• DOM事件包含捕獲（capture）和冒泡（bubble）兩個階段：捕獲階段事件從window開始觸發事件而後經過祖先節點一次傳遞到觸發事件的DOM元素上；冒泡階段事件從初始元素依次向祖先節點傳遞直到window
• 標準事件監聽elem.addEventListener(type, handler, capture)/elem.removeEventListener(type, handler, capture)：handler接收保存事件信息的event對象做爲參數，event.target爲觸發事件的對象，handler調用上下文this爲綁定監聽器的對象，event.preventDefault()取消事件默認行爲，event.stopPropagation()/event.stopImmediatePropagation()取消事件傳遞
• 老版本IE事件監聽elem.attachEvent('on'+type, handler)/elem.detachEvent('on'+type, handler)：handler不接收event做爲參數，事件信息保存在window.event中，觸發事件的對象爲event.srcElement，handler執行上下文this爲window使用閉包中調用handler.call(elem, event)可模仿標準模型，而後返回閉包，保證了監聽器的移除。event.returnValue爲false時取消事件默認行爲，event.cancleBubble爲true時取消時間傳播
• 一般利用事件冒泡機制託管事件處理程序提升程序性能。

事件綁定
(http://www.cnblogs.com/iloveyoucc/archive/2012/08/15/2639874.html)
1,綁定元素屬性:事件屬性名稱由事件類型外加一個on前綴構成
eg:<input type="button" name="myButton" onClick="myFunc()">
能夠支持開發者把參數傳遞給事件處理器函數
2,綁定對象屬性:
eg:document.forms[0].myButton.onclick = myFunc
沒有辦法向事件函數傳遞參數
3,綁定IE4+支持<script for="id" event="eventName">標識
for屬性的值必須是元素的id;必須把事件的名稱(onmouseover，onclick等等)分配給 event屬性
eg:<input type="button" name="myButton" id="button1"> 
<script for="button1" event="onclick">
// script statements here 
</script> 
標識中的語句能夠調用頁面上其它地方定義的任何函數(或者從.js文件中導入的函數)
這種綁定方式意味着您必須爲每個元素和每個事件建立一個<script for event>標識
4,IE5+支持:elemObject.attachEvent("eventName", functionReference);
eg:document.getElementById("").attachEvent("onclick",function(){...});
注意:不能在元素被載入瀏覽器以前執行這個語句;
該對象的引用在相應的 HTML 按鍵元素被瀏覽器建立以前，都是無效的;
要讓這樣的綁定語句或者在頁面的底部運行，或者在body元素的onLoad
事件處理器調用的函數中運行
5,W3C DOM的addEventListener()方法
eg:docuemnt.getElementById("").addEventListener("click",function(){...},false);
第三個參數表示是否在捕獲階段進行處理
【注意方法4和方法5中，事件的名字:IE中要加前綴"on",W3C不用加前綴】

jsonp&&跨域問題

很簡單，就是利用<script>標籤沒有跨域限制的「漏洞」（歷史遺蹟啊）來達到與第三方通信的目的。當須要通信時，本站腳本建立一個<script>元素，src指向地址，形如： 
<script src="http://www.example.net/api?param1=1&param2=2"></script> 
並提供一個回調函數來接收數據（函數名可約定，或經過地址參數傳遞）。 
callback({"name":"hax","gender":"Male"}) 

這樣瀏覽器會調用callback函數，並傳遞解析後json對象做爲參數。本站腳本可在callback函數裏處理所傳入的數據。 

優勢是兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊。缺點是隻支持GET請求。

JSONP：json+padding（內填充），顧名思義，就是把JSON填充到一個盒子裏

<script>
    function createJs(sUrl){

        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }
</script>

補充：「歷史遺蹟」的意思就是，若是在今天從新設計的話，也許就不會容許這樣簡單的跨域了嘿，好比可能像XHR同樣按照CORS規範要求服務器發送特定的http頭。

 

外邊距摺疊(collapsing margins)

什麼狀況下外邊距會合並
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。
合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

正則式（http://deerchao.net/tutorials/regex/regex.htm）

毗鄰的兩個或多個margin會合併成一個margin，叫作外邊距摺疊。規則以下：

1. 兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會摺疊
2. 浮動元素/inline-block元素/絕對定位元素的margin不會和垂直方向上的其餘元素的margin摺疊
3. 建立了塊級格式化上下文的元素，不會和它的子元素髮生margin摺疊
4. 元素自身的margin-bottom和margin-top相鄰時也會摺疊

stacking context,佈局規則

z軸上的默認層疊順序以下（從下到上）：

1. 根元素的邊界和背景
2. 常規流中的元素按照html中順序
3. 浮動塊
4. positioned元素按照html中出現順序

如何建立stacking context：

1. 根元素
2. z-index不爲auto的定位元素
3. a flex item with a z-index value other than 'auto'
4. opacity小於1的元素
5. 在移動端webkit和chrome22+，z-index爲auto，position: fixed也將建立新的stacking context

如何建立塊級格式化上下文(block formatting context),BFC有什麼用

如何理解bfc（http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html）
BFC:塊級格式化上下文【在css3中叫Flow Root】是一個獨立佈局環境，相鄰盒子margin垂直方向會重疊。

如何觸發生成一個BFC：

1. 根元素
2. 浮動元素（float不是none）
3. 絕對定位元素（position取值爲absolute或fixed）
4. 塊容器【block containers】display取值爲inline-block,table-cell, table-caption,flex, inline-flex之一的元素
5. 塊盒子【blok boxes】overflow不是visible的元素

做用：

1. 能夠包含浮動元素
2. 不被浮動元素覆蓋
3. 阻止父子元素的margin摺疊

HTTP的工做原理

客戶機與服務器創建鏈接後，發送一個請求給服務器，請求格式爲：統一資源標識符、協議版本號。服務器收到請求的信息（包括請求行，請求頭，請求體）。服務器接收到請求後，給予相應的響應信息，格式爲一個狀態行（包括響應行，響應頭，響應體）。
在internet上，http通信一般發生在TCP/IP鏈接之上。缺省端口是TCP的80端口。
基於HTTP協議的客戶/服務器模式的信息交換過程，分爲四個過程：創建鏈接、發送請求信息、發送響應信息、關閉鏈接。
服務器可能同時接受多個請求，這時就會產生多個sessoin，每一個session分別處理各自的請求。

一個HTTP請求的工做過程
一次HTTP操做稱爲一個事務，其工做整個過程以下：
1）、地址解析
如用客戶端瀏覽器請求這個頁面：http://localhost.com:8080/index.htm

從中分解出協議名、主機名、端口、對象路徑等部分，對於咱們的這個地址，解析獲得的結果以下：
協議名：http
主機名：localhost.com
端口：8080
對象路徑：/index.html

在這一步，須要域名系統DNS解析域名localhost.com,得主機的IP地址。
2）、封裝HTTP請求數據包
把以上部分結合本機本身的信息，封裝成一個HTTP請求數據包
3）封裝成TCP包，創建TCP鏈接（TCP的三次握手）
在HTTP工做開始以前，客戶機（Web瀏覽器）首先要經過網絡與服務器創建鏈接，該鏈接是經過TCP來完成的，該協議與IP協議共同構建Internet，即著名的TCP/IP協議族，所以Internet又被稱做是TCP/IP網絡。HTTP是比TCP更高層次的應用層協議，根據規則，只有低層協議創建以後才能，才能進行更層協議的鏈接，所以，首先要創建TCP鏈接，通常TCP鏈接的端口號是80。這裏是8080端口
4）客戶機發送請求命令
創建鏈接後，客戶機發送一個請求給服務器，請求方式的格式爲：統一資源標識符（URL）、協議版本號，後邊是MIME信息包括請求修飾符、客戶機信息和可內容。
5）服務器響應
服務器接到請求後，給予相應的響應信息，其格式爲一個狀態行，包括信息的協議版本號、一個成功或錯誤的代碼，後邊是MIME信息包括服務器信息、實體信息和可能的內容。
實體消息是服務器向瀏覽器發送頭信息後，它會發送一個空白行來表示頭信息的發送到此爲結束，接着，它就以Content-Type應答頭信息所描述的格式發送用戶所請求的實際數據
6）服務器關閉TCP鏈接
通常狀況下，一旦Web服務器向瀏覽器發送了請求數據，它就要關閉TCP鏈接，而後若是瀏覽器或者服務器在其頭信息加入了這行代碼
Connection:keep-alive
TCP鏈接在發送後將仍然保持打開狀態，因而，瀏覽器能夠繼續經過相同的鏈接發送請求。保持鏈接節省了爲每一個請求創建新鏈接所需的時間，還節約了網絡帶寬。
服務器將響應信息傳給客戶端，響應體中的內容多是一個html頁面，也多是一張圖片，經過輸入流將其讀出，並寫回到顯示器上。

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

分爲4個步驟：
    （1），當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。
    （2）， 瀏覽器與遠程`Web`服務器經過`TCP`三次握手協商來創建一個`TCP/IP`鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
    （3），一旦`TCP/IP`鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送`HTTP`的`GET`請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。
    （4），此時，`Web`服務器提供資源服務，客戶端開始下載資源。

請求返回後，瀏覽器會解析`HTML`生成`DOM Tree`，其次會根據CSS生成CSS Rule Tree，而`javascript`又能夠根據`DOM API`操做`DOM`

說說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，至此，完成四次揮手。

TCP和UDP的區別
TCP（Transmission Control Protocol，傳輸控制協議）是基於鏈接的協議，也就是說，在正式收發數據前，必須和對方創建可靠的鏈接。一個TCP鏈接必需要通過三次「對話」才能創建起來
UDP（User Data Protocol，用戶數據報協議）是與TCP相對應的協議。它是面向非鏈接的協議，它不與對方創建鏈接，而是直接就把數據包發送過去！ 
UDP適用於一次只傳送少許數據、對可靠性要求不高的應用環境。

關於Http 2.0 你知道多少？
HTTP/2引入了「服務端推（server push）」的概念，它容許服務端在客戶端須要數據以前就主動地將數據發送到客戶端緩存中，從而提升性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技術，容許多個消息在一個鏈接上同時交差。
它增長了頭壓縮（header compression），所以即便很是小的請求，其請求和響應的header都只會佔用很小比例的帶寬。

瀑布流佈局（基於多欄列表流體佈局實現）如何高性能的實現最優排序後的多欄列表佈局？

瀑布流的原理與實現

什麼是瀑布流?

瀑布流佈局由pinterest.com網站獨創，它的原理是：先經過計算出一排可以容納幾列元素，而後尋找各列之中全部元素高度之和的最小者，並將新的元素添加到該列上，而後繼續尋找全部列的各元素之和的最小者，繼續添加至該列上，如此循環下去，直至全部元素均可以按要求排列爲止；

瀑布流視圖與UITableView相似,可是相對複雜一點.UITableView只有一列,能夠有多個小節(section),每個小節(section)能夠有多行(row).

瀑布流呢,能夠有多列,每個item(單元格)的高度能夠不相同,可是寬度必須同樣.排列的方式是,從左往右排列,哪一列如今的總高度最小,就優先排序把item(單元格)放在這一列.這樣排完全部的單元格後,能夠保證每一列的總高度都相差不大,不至於,有的列很矮,有的列很高.這樣就很難看了.

 

絕對定位(css)+javascript+ajax+json。簡單一點若是不作滾動加載的話就是絕對定位(css)+javascript了，ajax和json是滾動加載更多內容的時候用到的。

實現思路：

一、計算頁面的寬度，計算出頁面可放數據塊的列數（如上圖所示就有6列）。

二、將各個數據塊的高度尺寸記入數組中（須要等全部圖片加載完成，不然沒法知道圖片的高度）。

三、用絕對定位先將頁面第一行填滿，由於第一行的top位置都是同樣的，而後用數組記錄每一列的總高度。

四、繼續用絕對定位將其餘數據塊定位在最短的一列的位置以後而後更新該列的高度。

五、當瀏覽器窗口大小改變時，從新執行一次上面1-4步以從新排放（列數隨頁面寬度而改變，於是須要從新排放）。

六、滾動條滾動到底部時加載新的數據進來後也是定位在最短的一列的位置以後而後更新該列的高度。

折騰:瀑布流佈局（基於多欄列表流體佈局實現） 

今天四處閒逛，看到迅雷UEDxwei兄寫了篇名爲「淺談我的在瀑布流網頁的實現中遇到的問題和解決方法」的文章，我兩隻沉沉的蘿蔔眼頓時放出無數閃亮的小星星。

原文重點以下：

瀑布流的排序算法，參考demo1，思路很是簡單，咱們把瀑布流拆成三個部分來看：容器、列、格子

1.先計算當前屏幕最多能容納幾列瀑布，其值爲 "向下取整(屏幕可見區域寬度/(格子寬度+間距))";

2.爲了保證容器的居中，將容器的寬度設置爲 列數* (格子寬度+間距) – 間距，這裏須要注意的是 當容器的寬度計算出來以後再顯示，不然會形成頁面寬度的抖動，影響體驗。;

3.排序開始，先把前N（N爲列數）個格子分別放到每一列中，而後每次尋找高度最小的一列，把格子放進去（left值爲列序號*(格子寬度+間距)，top值爲 列高+間距），並刷新列的高度，遍歷全部格子直到全部的格子都被排序。
 

最後將事件句柄綁定到window.onload和window.onresize上，一個瀑布流佈局的頁面就出來了。

 

這樣的排序算法看起來很美好，可真正結合異步加載數據應用到頁面裏還要解決如下幾個問題

1.當縮放瀏覽器窗口時會不斷地觸發事件，若是每次都響應的話會狂耗性能，須要在縮放動做結束後再執行重排方法。

第一個問題我是用setTimeout和clearTimeout來解決的，思路是窗口變化以後開始計時，若是窗口還在變換則重新開始計時，窗口再也不變化則延時（很短的時間）觸發重排事件。暫時只想到這個，這裏應該還有更好的方法。
代碼以下

var re;

window.onresize = function() {

    clearTimeout(re);

    re = setTimeout(resize,100);

};

 

2.頁面滾動到底部請求數據成功以後只對新增的節點重排。

第二個問題在於若是每次有新的數據加載，都要對整個容器內的節點進行重排，很是消耗性能。解決思路：

a.將列保存在全局數組中，每次重排或者新增格子以後更新數組的數據，這樣下次執行排序算法的時候能夠直接調用。
b.將新增格子保存在數組中做爲參數傳遞給排序算法，僅對新格子進行遍歷和操做。

3.若是服務器沒法給出圖片高度，須要在圖片加載完畢以後再進行重排。

第三個問題是若是服務器沒法給出圖片尺寸，那麼必須在圖片徹底加載完畢以後纔可進行排序(由於高度是實時獲取的，圖片不全高度有偏差)，這裏沒有什麼好辦法，只能遍歷圖片，每張圖片加載成功後執行一個回調函數，將加載成功的圖片數量+1，當加載成功的圖片數量等於圖片總數的時候執行排序方法。缺點是有一張圖片加載不成功就沒法看到全部的，真正項目中仍是須要在異步加載數據的時候獲取圖片尺寸。

好了，以上就是在此次瀑布流實現過程當中遇到的問題和解決方法，由一開始加載3-4屏就卡死到如今能夠無限加載(ff,chrome)，深感優化js的必要性和無限性。

pinterest以及上面迅雷UED xwei的瀑布流demo（至少在FireFox下仍是有致命的顯示bug的）都是採用的絕對定位實現的，有相對複雜的位置計算。

我一貫不喜歡吃別人嚼過的米飯，因而嘗試使用另外的原理實現。我是個流體佈局控，對絕對定位啊、浮動啊什麼的一貫沒什麼好感，因而，這裏要介紹的就是基於多欄列表流體佈局實現的瀑布流佈局效果。

大體結構、佈局見下面的手繪圖：

沒有複雜的位置計算，不須要知道里面元素的高度以及寬度，且易理解，關鍵是具體實現~~

4、原理

第一次進入的時候，根據瀏覽器寬度以及每列寬度計算出列表個數，而後無論三七二十一，每列先加載個5張圖片再說。

當滾動的時候，對每一列的底部位置作檢測，若是在屏幕中或屏幕上方，則當即append一個新圖片（注意：爲了簡化代碼，提升性能，同時便於演示等，這裏只append了一個）。由於，滾動時連續的，所以，咱們實際看到的效果是圖片不斷load出來。

當瀏覽器寬度改變的時候，頁面上有個id爲waterFallDetect空span標籤，這個標籤做用有兩個：一是實現兩端對齊效果，二是用來檢測瀑布流佈局是否須要刷新。

檢測原理以下：
該span標籤寬度與一個列表寬度一致，當瀏覽器寬度變小的時候，若是小到必定程度，顯然，瀏覽器最右邊的列表就會跑到下一行，把空span擠到後面去，空span發生較大的水平位移，顯然，能夠通知腳本，佈局須要刷新；當瀏覽器寬度變大的時候，若是變大的尺寸超過一列的寬度，顯然，這個空span灰跑到第一行去，一樣是發生較大的水平位移，所以，又能夠通知腳本刷新瀑布流佈局了。

這個方法的好處是幾乎沒有計算就能夠一點不差地知道什麼時候瀑布流佈局須要刷新。這顯然要比設置resize定時器+位置尺寸計算要簡單高性能地多。

滾動時的頁面刷新是基於HTML字符串的處理，而不是更改每一個DOM元素的位置（這是絕對定位實現的處理），所以，這裏的效率顯然更高。

5、總結：基於多欄列表流體佈局瀑布流效果優勢

1. 簡單：最大限度利用了瀏覽器的流體特性進行佈局，省去了不少計算的麻煩；新人更易懂和上手
2. 更好的性能：這個體如今多處，如瀏覽器寬度改變，瀑布流刷新時候的效率等
3. 無需知曉尺寸：若是是要絕對定位實現瀑布流，必須知道每一個小模塊的高度以及寬度（不然沒法定位），而基於列表的佈局則無需知道高寬

您能夠狠狠地點擊這裏：基於多欄列表瀑布流佈局demo

 歡迎各類滾動，縮放等測試。低版本IE瀏覽器也是兼容滴。問題嘛也是有滴，就是滾動到必定位置再F5刷新的時候，部分加載的內容有丟失，須要從新滾動加載。這個嘛，我我的以爲小小demo，不必折騰啦（實際上要實現也比較容易，改動以下：每次滾動不是append一個節點，而是連續回調直到加載到屏幕下方。不懂什麼意思？花點功夫看看JS實現原理就會明白了）~~

瀑布流佈局延伸：動態規劃算法

出處：經典算法（2）——0/1揹包問題（動態規劃法）

　　0-1揹包問題：有一個賊在偷竊一家商店時，發現有n件物品，第i件物品價值v_i 元，重w_i 磅，此處v_i 與w_i 都是整數。他但願帶走的東西越值錢越好，但他的揹包中至多隻能裝下W磅的東西，W爲一整數。應該帶走哪幾樣東西？這個問題之因此稱爲0-1揹包，是由於每件物品或被帶走；或被留下；小偷不能只帶走某個物品的一部分或帶走同一物品兩次。

　　在分數（部分）揹包問題（fractional knapsack problem) 中，場景與上面問題同樣，可是竊賊能夠帶走物品的一部分，而沒必要作出0-1的二分選擇。能夠把0-1揹包問題的一件物品想象成一個金錠，而部分問題中的一件物品則更像金沙。

　　兩種揹包問題都具備最優子結構性質。對0-1揹包問題，考慮重量不超過W而價值最高的裝包方案。若是咱們將商品j今後方案中刪除，則剩餘商品必須是重量不超過W-wj的價值最高的方案（小偷只能從不包括商品j的n-1個商品中選擇拿走哪些）。

　　雖然兩個問題類似，但咱們用貪心策略能夠求解揹包問題，而不能求解0-1揹包問題，爲了求解部分數揹包問題，咱們首先計算每一個商品的每磅價值v_i /w_{i。遵循貪心策略，小偷首先儘可能多地拿走每磅價值最高的商品，若是該商品已所有拿走而揹包未裝滿，他繼續儘可能多地拿走每磅價值第二高的商品，依次類推，直到達到重量上限W。所以，經過將商品按每磅價值排序，貪心算法的時間運行時間是O(nlgn)。}

　　爲了說明貪心這一貪心策略對0-1揹包問題無效，考慮下圖所示的問題實例。此例包含3個商品和一個能容納50磅重量的揹包。商品1重10磅，價值60美圓。商品2重20磅，價值100美圓。商品3重30磅，價值120美圓。所以，商品1的每磅價值爲6美圓，高於商品2的每磅價值5美圓和商品3的每磅價值4美圓。所以，上述貪心策略會首先拿走商品1。可是，最優解應該是商品2和商品3，而留下商品1。拿走商品1的兩種方案都是次優的。

　　可是，對於分數揹包問題，上述貪心策略首先拿走商品1，是能夠生成最優解的。拿走商品1的策略對0-1揹包問題無效是由於小偷沒法裝滿揹包，空閒空間下降了方案的有效每磅價值。在0-1揹包問題中，當咱們考慮是否將一個商品裝入揹包時，必須比較包含此商品的子問題的解與不包含它的子問題的解，而後才能作出選擇。這會致使大量的重疊子問題——動態規劃的標識。

 

 

例子 ：0-1揹包問題。總共有三件物品，揹包可容納5磅的東西，物品1重1磅，價值60元。物品2重2磅，價值100元，物品3重3磅，價值120元。怎麼才能最大化揹包所裝物品的價值。

解答 ：咱們能夠得出物品一每磅價值60元，大於物品二的每磅50元和物品3的每磅40元。若是按照貪心算法的話就要取物品1。然而最優解應該取的是物品2和3，留下了1.

　　　在0-1揹包問題中不該取物品1的緣由在於這樣沒法將揹包填滿，空餘的空間就下降了貨物的有效每磅價值。

　　　咱們能夠利用動態規劃來解0-1揹包問題。

　　　假設c[i]表示第i件物品的重量，w[i]表示第i件物品的價值，f[i][j]表示揹包容量爲j,可選物品爲物品1~i時，揹包能得到的最大價值。

　　   用動態規劃求解即先求出揹包容量較小時能得到的最大價值，而後根據揹包容量較小時的結果求出揹包容量較大時的結果，也就是一個遞推的填表過程。

　　　當沒有可選物品時，揹包能得到的最大價值爲0。即表格可初始化爲

　　　

　　　填表過程（即狀態轉移方程）是：

　　　

　　"j<c[i]"表示第i件物品的重量大於當前揹包的容量j，此時顯然不放第i件物品。下面解釋上述方程在「其它「狀況下的意義：」將前i件物品放入容量爲j揹包中「這個問題，若是隻考慮第i件物品放或者不放，那麼就能夠轉化爲只涉及前i-1件物品的問題，即：

　　　　1. 若是不放第i件物品，則問題轉化爲只涉及」前i-1件物品放入容量爲j的揹包中「

　　　　2. 若是放第i件物品，則問題轉化爲」前i-1件物品放入剩下的容量爲j-c[i]的揹包中「，此時能得到的最大價值就是f[i-1][j-c[i]]再加上經過放入第i件物品得到的價值得到的價值w[i]。

　　　　則在」其餘「狀況下，f[i][j]就是一、2中最大的那個值。

　　　　顯然，能夠從左下角利用狀態轉移方程依次逐行填表，獲得f[3][5]（表示可選物品爲一、二、3，且揹包容量爲5時，能得到的最大價值），可見動態規劃的確即爲一個遞推的過程。填表後以下表所示：

　　　　

　　　　代碼以下：

int N = 3,V = 5; //N是物品數量，V是揹包容量   int c[4] = {      0,      1,      2,      3 };   int w[4] = {      0.60.100.120 };   for  (i = 0; i <= V; i++) { //逐行填表，i表示當前可選物品數，j表示當前揹包的容量        f[i][0] = 0;        for  (j = 1; j <= V; j++) {            if  (j < c[i]) {              f[i][j] = f[i - 1][j];          } else  {              f[i][j] = max(f[i - 1][j], f[i - 1][j - c[i]] + w[i]);          }      } }

　　

揹包問題初始化

　　求最優解的揹包問題中，事實上有兩種不太相同的問法。有的題目要求」剛好裝滿揹包「時的最優解，有的題目則沒有要求必須把揹包裝滿。這兩種問法的區別是求解時的初始化不一樣。

　　若是是第一種問法，要求剛好裝滿揹包，那麼在初始化時除了f[0][0]爲0，其餘f[0][1~V]均設爲－∞ ，這樣就能夠包裝最終獲得的解釋一種剛好裝滿揹包的最優解。

　　若是並無要求必須是把揹包裝滿，而是隻但願價格儘可能大，初始化時應該將f[0][1~V]所有設爲0.

　　這是爲何呢？能夠這樣理解：初始化的f數組事實上就是在沒有任何物品能夠放入揹包時的合法狀態。若是要求揹包剛好裝滿，那麼此時只有容量爲0的揹包能夠在什麼也不裝且價值爲0的狀況下被」剛好裝滿「，其餘容量的揹包均沒有合法的解，屬於未定義的狀態，應該被賦值爲－∞。若是揹包並不是被必須裝滿，那麼任何容量的揹包都有一個合法解」什麼都不裝「，這個解的價值爲0，因此初始狀態的值也就所有爲0了。

如何水平居中一個元素

若是須要居中的元素爲常規流中inline元素，爲父元素設置text-align: center;便可實現

若是須要居中的元素爲常規流中block元素，1）爲元素設置寬度，2）設置左右margin爲auto。3）IE6下需在父元素上設置text-align: center;,再給子元素恢復須要的值

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */

        background: purple;
    }
</style>

　　

若是須要居中的元素爲浮動元素，1）爲元素設置寬度，2）position: relative;，3）浮動方向偏移量（left或者right）設置爲50%，4）浮動方向上的margin設置爲元素寬度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple;
    }
</style>

　　

若是須要居中的元素爲絕對定位元素，1）爲元素設置寬度，2）偏移量設置爲50%，3）偏移方向外邊距設置爲元素寬度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        left: 50%;
        margin-left: -400px;

        background-color: purple;
    }
</style>

 

若是須要居中的元素爲絕對定位元素，1）爲元素設置寬度，2）設置左右偏移量都爲0,3）設置左右外邊距都爲auto

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;

        background-color: purple;
    }
</style>
　　

　

如何豎直居中一個元素

參考資料：6 Methods For Vertical Centering With CSS。 盤點8種CSS實現垂直居中

須要居中元素爲單行文本，爲包含文本的元素設置大於font-size的line-height：

<p class="text">center text</p> 
<style> .text { line-height: 200px; } </style>

　　

儘量的提出實現水平居中和垂直居中的解決方案?

來源：用CSS/CSS3 實現 水平居中和垂直居中的完整攻略 

水平居中：行內元素解決方案

只須要把行內元素包裹在一個屬性display爲block的父層元素中，而且把父層元素添加以下屬性便可：

.parent {

    text-align:center;

}

 

水平居中：塊狀元素解決方案

.item {

    /* 這裏能夠設置頂端外邊距 */

    margin: 10px auto;

}

 

水平居中：多個塊狀元素解決方案 

將元素的display屬性設置爲inline-block，而且把父元素的text-align屬性設置爲center便可:

 .parent {

    text-align:center;

}

 

水平居中：多個塊狀元素解決方案 (使用flexbox佈局實現) 

使用flexbox佈局，只須要把待處理的塊狀元素的父元素添加屬性display:flex及justify-content:center便可:

.parent {

    display:flex;

    justify-content:center;

}

 

垂直居中：單行的行內元素解決方案

.parent {

    background: #222;

    height: 200px;

}

/* 如下代碼中，將a元素的height和line-height設置的和父元素同樣高度便可實現垂直居中 */

a {

    height: 200px;

    line-height:200px; 

    color: #FFF;

}

垂直居中：多行的行內元素解決方案 

組合使用display:table-cell和vertical-align:middle屬性來定義須要居中的元素的父容器元素生成效果，以下：

.parent {

    background: #222;

    width: 300px;

    height: 300px;

    /* 如下屬性垂直居中 */

    display: table-cell;

    vertical-align:middle;

}

垂直居中：已知高度的塊狀元素解決方案

.item{

    top: 50%;

    margin-top: -50px;  /* margin-top值爲自身高度的一半 */

    position: absolute;

    padding:0;

}

水平垂直居中：已知高度和寬度的元素解決方案1 

這是一種不常見的居中方法，可自適應，比方案2更智能，以下：

.item{

    position: absolute;

    margin:auto;

    left:0;

    top:0;

    right:0;

    bottom:0;

}

水平垂直居中：已知高度和寬度的元素解決方案2

.item{

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -75px;  /* 設置margin-left / margin-top 爲自身高度的一半 */

    margin-left: -75px;

}

 

水平垂直居中：未知高度和寬度元素解決方案3

.item{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);  /* 使用css3的transform來實現 */

}

 

水平垂直居中：使用flex佈局實現4

.parent{

    display: flex;

    justify-content:center;

    align-items: center;

    /* 注意這裏須要設置高度來查看垂直居中效果 */

    background: #AAA;

    height: 300px;

}

寫寫本身經常使用的CSS3特性:
1.選擇器
屬性選擇器（只有IE6不支持）
[att^="value"]
匹配包含以特定的值開頭的屬性的元素
eg:div[class^="item"]{background:yellow;}
[class以item開頭的元素的background屬性爲yellow]
[att$="value"]
匹配包含以特定的值結尾的屬性的元素
[att*="value"]
匹配包含含有特定的值的屬性的元素
2.連字符（全部瀏覽器都支持）
CSS3中惟一新引入的連字符是通用的兄弟選擇器（同級）。它針對一個元素的有同一個父級節點的全部兄弟級別元素。
好比，給某個特定的div的同級的圖片添加一個灰色的邊框(div和圖片應該有同一個父級節點)，在樣式表中定義下面的樣式就足夠了：
div~img { 
border: 1px solid #ccc; 
}
3.僞類
:nth-child(n)
讓你基於元素在父節點的子元素的列表位置來指定元素。你能夠是用數字、數字表達式或odd 和even 關鍵詞(對斑馬樣式的列表很完美)。因此若是你想匹配在第四個元素以後的一個3個元素的分組，你能夠簡單的這樣使用：
:nth-child(3n+4) { }/*匹配第4,7,10,13,16,19...個元素*/
:nth-last-child(n)
與上個選擇器的思想一樣，可是從後面匹配元素（倒序），好比，爲了指定一個div裏面的最後兩個段落，咱們能夠使用下面的選擇器：
div p:nth-last-child(-n+2)
:last-child
匹配一個父節點下的最後一個子元素，等同於:nth-last-child(1)
:checked
匹配選擇的元素，好比複選框
:empty
匹配空元素（沒有子元素）。
:not(s)
匹配全部不符合指定聲明(s)的元素。好比，若是你想讓全部的沒有使用」lead」類的段落的顯示爲黑色，能夠這樣寫： 
p:not([class*="lead"]) { color: black; }

多欄佈局（火狐瀏覽器、谷歌瀏覽器，IE10+等支持）
使用多欄佈局時只能爲全部欄指定一個統一的高度，欄與欄之間的寬度不多是不同的，另外也不可能具體指定什麼欄中顯示什麼內容，所以比較適合使用在顯示文章內容的時候，不適合用於安排整個網頁中由各元素組成的網頁結構時。
1.多欄佈局第一個屬性：column-count
column-count屬性爲一個數字表示列數，不帶單位，含義是將一個元素中的內容分爲多欄進行顯示
.box {
width: 600px;
backgrond-color: #ddd;
column-count: 2;
}
2.多欄佈局的第二個屬性：column-gap
使用column-gap屬性來設定多欄之間的間隔距離。
.box {
width: 600px;
backgrond-color: #ddd;
column-count: 2;
column-gap: 60px;
}
3.多欄佈局第3個屬性：column-rule
column-rule屬性在欄與欄之間增長一條間隔線，而且設定該間隔線的寬度、樣式、顏色，該屬性的指定方法與css中的border屬性指定方法相同
.box {
width: 600px;
backgrond-color: #ddd;
column-count: 2;
column-gap: 60px;
column-rule: 5px dashed #000;
}
4.多欄佈局最後一個屬性：column-width
column-width能夠設置每一欄的寬度，可是在實際測試中發現並不像描述的那麼簡單，遂列舉出如下幾個問題：
在設定column-width的同時必須設置盒子的width，不然盒子寬度默認爲100%，每欄寬度按照欄數平均分。
盒子每欄寬度必須大於等於column-width設定的值，不然就會減小欄數來增長每欄寬度，例如盒子寬度400px，一共2欄，那麼每欄寬度就是200px，若是設置column-width: 210px的話盒子就會變成1欄以保證每欄寬度大於等於column-width:210px;，可是若是每欄寬度大於column-width的值時每欄寬度也不會強制等於column-width，這麼看column-width的個性有點像min-width。
【CSS3規範裏描述的是，各列的高度是均衡的，瀏覽器會自動調整每列裏填充多少文本、均分文本，來使各列的高度保持均衡一致】

CSS3屬性Word Wrap
(http://www.w3chtml.com/css3/properties/text/word-wrap.html)
對於文字過長會致使文字撐破容器出來:
word-wrap:break-word;內容將在邊界內換行,若是須要,單詞內部容許斷行.
word-wrap:normal;內容將會撐破容器盒子

彈性盒子模型：box-flex
CSS3中新的盒子模型——彈性盒子模型(Flexible Box Model)：
1.box-flex屬性(很適用於流體佈局),用來按比例分配父標籤的寬度或高度空間
eg: #one{box-flex:2;}
#two{box-flex:1;}
#three{box-flex:1;}
表示id分別爲one，two，three的元素把父標籤按照2:1:1的比例分割;
2.父標籤須要聲明爲
father{display:box;}
father{display:inline-box;}
【注意:目前而言,僅Firefox/Chrome/Safari瀏覽器支持彈性盒子模型(IE9不詳,Opera還沒有),且使用的時候，須要附帶私有前綴。就是諸如-moz-, -webkit-前綴】
3.當子元素中有寬度值的時候，此元素就定寬處理，剩下的空間再按比例分配
eg：#one{box-flex:2;}
#two{box-flex:1;}
#three{width:200px;}
three寬度爲200像素，one和two把剩下的空間按2:1分
4.彈性盒子模型下的爸爸(父標籤)實際上是頗有貨的。爸爸肚子中的貨有：box-orient, box-direction, box-align, box-pack, box-lines. 如今依次講講這裏box打頭的屬性都是幹嗎用的。
5.box-orient用來肯定子元素的方向。是橫着排仍是豎着走：
inline-axis是默認值。且horizontal與inline-axis的表現彷佛一致的，讓子元素橫排；而vertical與block-axis的表現也是一致的，讓元素縱列
6.子元素除了box-flex屬性，還有兩個屬性，box-flex-group和box-ordinal-group，其中box-flex-group的做用不詳，貌似目前瀏覽器也不支持；box-ordinal-group的做用是拉幫結派。數值越小，位置就越靠前，這不難理解，第一組在最前嘛，隨後第二組，第三組… 
例如：box-ordinal-group:1的組就會在box-ordinal-group:2的組前面顯示。因而，咱們能夠利用這個屬性改變子元素的順序。

常見瀏覽器CSS前綴：
Webkit核心瀏覽器的(好比, Safari)， 它們以-webkit-開始，以及Gecko核心的瀏覽器(好比, Firefox)，以-moz-開始，還有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們本身的屬性擴展（目前只有IE8支持-ms-前綴）

css選擇器權重:
style:1000;
ID:100;
class:10;
tagName:1;
子選擇器(>)所有選擇(*):0;
[後面的這些權值只是定的一個相對參考，並非具體的值]

link和@import的區別：
頁面中使用CSS的方式主要有3種：
1，行內添加定義style屬性值
2，頁面頭部內嵌調用
3，外面連接調用其中外面引用有兩種：link和@import
區別：
1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；
@import屬於CSS範疇，只能加載CSS。
2：link引用CSS時，在頁面載入時同時加載；
@import須要頁面網頁徹底載入之後加載。
3：link是XHTML標籤，無兼容問題；
@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4：ink支持使用Javascript控制DOM去改變樣式；
而@import不支持。

繼承的幾種方式：
1，構造函數
2，原型鏈

數據傳遞的幾種方式：
get,post,本地存儲(localStorage)
[面試官問我，除了get和post方法還有什麼別的方法？我想了半天，面試官說，本地存儲啊~~(就是localStorage),其實我想說PUT,HEAD來着@_@]

worker主線程:

Web Workers 是 HTML5 提供的一個javascript多線程解決方案,咱們能夠將一些大計算量的代碼交由web Worker運行而不凍結用戶界面。

1.經過 worker = new Worker( url ) 加載一個JS文件來建立一個worker，同時返回一個worker實例。

    2.經過worker.postMessage( data ) 方法來向worker發送數據。

    3.綁定worker.onmessage方法來接收worker發送過來的數據。

    4.能夠使用 worker.terminate() 來終止一個worker的執行。

webSocket:
[http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html]
是下一代客戶端-服務器的異步通訊方法，該通訊取代了單個的TCP套接字，使用ws或wss協議，可用於任意的客戶端和服務器程序;並且有一個優秀的第三方API，名爲Socket.IO
服務器和客戶端能夠在給定的時間範圍內的任意時刻，相互推送信息;
與ajax的區別:
WebSocket並不限於以Ajax(或XHR)方式通訊，由於Ajax技術須要客戶端發起請求，而WebSocket服務器和客戶端能夠彼此相互推送信息；XHR受到域的限制，而WebSocket容許跨域通訊

// 建立一個Socket實例
var socket = new WebSocket('ws://localhost:8080'); //ws表示socket協議
// 打開Socket 
socket.onopen = function(event) { 
// 發送一個初始化消息
socket.send('I am the client and I\'m listening!'); 
// 監聽消息
socket.onmessage = function(event) { 
console.log('Client received a message',event); 
}; 
// 監聽Socket的關閉
socket.onclose = function(event) { 
console.log('Client notified socket has closed',event); 
}; 
// 關閉Socket.... 
socket.close() 
};

 

不用angularJS，如何實現雙向數據綁定

56：http請求頭

get post delete put head options trace connect

OPTIONS：返回服務器針對特定資源所支持的HTTP請求方法

57:nginx的好處？和node的比較

高併發 響應快

區別不是很大，一個更專業，一個更全面:
1.類似點:
1.1異步非阻塞I/O, 事件驅動;
2.不一樣點:
2.1Nginx 採用C編寫，更性能更高，可是它僅適合於作web服務器，用於反向代理或者負載均衡等服務；Nginx背後的業務層編程思路很仍是同步編程方式，例如PHP.
2.2NodeJs高性能平臺，web服務只是其中一塊，NodeJs在處理業務層用的是JS編寫,採用的是異步編程方式和思惟方式。

 

Flash、Ajax各自的優缺點，在使用中如何取捨？

• Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。

-Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。

• 共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操做DOM

 

如何獲取瀏覽器信息：
Navigator 對象包含有關瀏覽器的信息。

Navigator 對象屬性：

屬性 描述 IE F O
appCodeName 返回瀏覽器的代碼名。 4 1 9
appMinorVersion 返回瀏覽器的次級版本。 4 No No
appName 返回瀏覽器的名稱。 4 1 9
appVersion 返回瀏覽器的平臺和版本信息。 4 1 9
browserLanguage 返回當前瀏覽器的語言。 4 No 9
cookieEnabled 返回指明瀏覽器中是否啓用
cookie 的布爾值。 4 1 9
cpuClass 返回瀏覽器系統的 CPU 等級。 4 No No
onLine 返回指明系統是否處於脫機模式的布爾值。 
4 No No
platform 返回運行瀏覽器的操做系統平臺。4 1 9
systemLanguage 返回 OS 使用的默認語言。 4 No No
userAgent 返回由客戶機發送服務器的 
user-agent 頭部的值。 4 1 9
userLanguage 返回 OS 的天然語言設置。 4 No 9

 

數組操做：
toString(param):
null和undefined沒有toString()方法
把null或undefined變成字符串的方法：null+''或者String(null);
直接用(null).toString()會報錯。
param
是可選的，當須要把數值型數據轉換成相應的進制數時，param能夠進行設置；eg:把十進制8轉換成二進制：(8).toString(2);//"1000";
此處注意：必須是是number類型，如果("8").toString(2);//"8";
對於浮點數
若是小數點後面都是0，調用toString方法會把後面的0去掉
(10.00).toString();//"10";(10.01).toString();//"10.01";
對於object的toString()
返回"[object ObjectName]"，其中ObjectName是對象類型的名稱。
對於Date對象：
var date = new Date();
date.toString();//當前時間信息："Mon Oct 19 2015 19:55:55 GMT+0800 (中國標準時間)"
【思考點：如何將小數點後面都爲0的浮點數轉化爲字符串？
10.00+"";//"10"(如何獲得"10.00");
10.00+10.00;//20(爲何不是20.00)；
10.01+10.00;//20.009999999999998(爲何不是20.01)
】

String()與toString()的區別：
　　(1)null和undefined有String()轉換成字符串，而toString()不能；
　　(2)toString()能設定數值數據轉換的進制數，而String()不能；
　　(3)其餘狀況下：toString(val) === String(val)
join(seperator)：數組以分隔符seperator轉換成字符串

 

DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。
1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點
2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //並無insertAfter()
3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，
會獲得一個數組，其中包括id等於name值的)
getElementById() //經過元素Id，惟一性

selector：querySelector() | querySelectorAll()
(原生寫法，比jquery速度快，缺點是IE六、7不支持。)：
//接收的參數和CSS選擇器接收的參數同樣
　　baseElement.querySelector(selector);
　　baseElement.querySelectorAll(selector);
　　baseElement能夠是document，也能夠是DOM
　　eg:document.querySelectorAll("input[type='checkbox']");
　　document.querySelector === document.querySelectorAll[0];
注意：querySelector與querySelectorAll的區別：
　　(1)querySelector 用來獲取一個元素；
　　querySelectorAll 能夠獲取多個元素。
　　(2)querySelector將返回匹配到的第一個元素，若是沒有
　　匹配的元素則返回 NullquerySelectorAll 返回一個包
　　含匹配到的元素的數組，若是沒有匹配的元素則返回的數組爲空
document對象與querySelector的區別：
　　(1)getElement方法只能用於document,不能用於DOM,而querySelector能夠
　　(2)getElment只能根據name,id,tagName獲取DOM，而querySelector不受限制
關於querySelector的一些bug:
<div class= "test" id= "testId" >
<p><span>Test</span></p>
</div>
<script type= "text/javascript" > 
var testElement= document.getElementById( 'testId' ); 
var element = testElement.querySelector( '.test span' ); 
var elementList = document.querySelectorAll( '.test span' ); 
console.log(element); // <span>Test</span>
console.log(elementList); // 1 
</script>
按照W3C的來理解，這個例子應該返回：element：null；elementList：[];由於做爲baseElement的 testElement裏面根本沒有符合selectors的匹配子節點；但瀏覽器卻好像無視了baseElement，只在意selectors，也就是說此時baseElement近乎document；這和咱們的預期結果不合.
解決辦法：看網址裏面的內容吧，有點看不懂的感受

document.ready與window.onload：

(http://blog.sina.com.cn/s/blog_49fa034d01011lpc.html)Jquery中$(document).ready()的做用相似於傳統JavaScript中的window.onload方法，不過與window.onload方法仍是有區別的。

1.執行時間
window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

2.編寫個數不一樣window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個。$(document).ready()能夠同時編寫多個，而且均可以獲得執行

3.簡化寫法window.onload沒有簡化寫法。$(document).ready(function(){})能夠簡寫成$(function(){});
即：document.ready在window.onload前面執行

document對象：
每一個載入瀏覽器的HTML文檔都會成爲Document對象。
Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。
提示：Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問[window.document能夠獲得文檔的內容(源碼)]
document對象的屬性：
document.URL:當前頁面的url；
document.referrer:返回載入當前文檔的文檔的 URL；
(若是當前文檔不是經過超級連接訪問的，則爲null，該屬性容許客戶端JS
訪問HTTP引用頭部。)
document.title:當前頁面的title；
document.cookie:當前頁面全部的cookie；
document.lastModified:當前頁面最後的修改時間；
document.domain:當前頁面的域名；

使用iframe的優缺點

優勢:
1.程序調入靜態頁面比較方便;
2.頁面和程序分離;
缺點：
1.iframe有很差之處：樣式/腳本須要額外鏈入，會增長請求。
另外用js防盜鏈只防得了小偷，防不了大盜。
2.iframe好在可以把原先的網頁所有原封不動顯示下來,可是若是用在首頁,是搜索引擎最討厭的.那麼你
的網站即便作的在好,也排不到好的名次! 
若是是動態網頁，用include還好點！
可是必需要去除他的<html><head><title><body>標籤！ 
3.框架結構有時會讓人感到迷惑，特別是在多個框架中都出現上下、左右滾動條的時候。這些滾動條除了
會擠佔已經特別有限的頁面空間外，還會分散訪問者的留心力。訪問者遇到這種站點每每會馬上轉身離開
。他們會想，既然你的主頁如此混亂，那麼站點的其餘部分也許更不值得閱讀。
4.連接導航疑問。運用框架結構時，你必須保證正確配置全部的導航連接，如否則，會給訪問者帶來很大
的麻煩。好比被連接的頁面出如今導航框架內，這種狀況下訪問者便被陷住了，由於此時他沒有其餘地點
可去。
5.調用外部頁面,須要額外調用css,給頁面帶來額外的請求次數;

爲何少用iframe
iframes 提供了一個簡單的方式把一個網站的內容嵌入到另外一個網站中。但咱們須要慎重的使用iframe。iframe的建立比其它包括scripts和css的 DOM 元素的建立慢了 1-2 個數量級。
使用 iframe 的頁面通常不會包含太多 iframe，因此建立 DOM 節點所花費的時間不會佔很大的比重。但帶來一些其它的問題：onload 事件以及鏈接池(connection pool)。

1.Iframes 阻塞頁面加載

及時觸發 window 的 onload 事件是很是重要的。onload 事件觸發使瀏覽器的 「忙」 指示器中止，告訴用戶當前網頁已經加載完畢。當 onload 事件加載延遲後，它給用戶的感受就是這個網頁很是慢。

window 的 onload 事件須要在全部 iframe 加載完畢後(包含裏面的元素)纔會觸發。在 Safari 和 Chrome 裏，經過 JavaScript 動態設置 iframe 的 SRC 能夠避免這種阻塞狀況。

2.惟一的鏈接池

瀏覽器只能開少許的鏈接到web服務器。比較老的瀏覽器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能對一個域名(hostname)同時打開兩個鏈接。這個數量的限制在新版本的瀏覽器中有所提升。Safari 3+ 和 Opera 9+ 可同時對一個域名打開 4 個鏈接，Chrome 1+, IE 8 以及 Firefox 3 能夠同時打開 6 個。你能夠經過這篇文章查看具體的數據表：Roundup on Parallel Connections.

有人可能但願 iframe 會有本身獨立的鏈接池，但不是這樣的。絕大部分瀏覽器，主頁面和其中的 iframe 是共享這些鏈接的。這意味着 iframe 在加載資源時可能用光了全部的可用鏈接，從而阻塞了主頁面資源的加載。若是 iframe 中的內容比主頁面的內容更重要，這固然是很好的。但一般狀況下，iframe 裏的內容是沒有主頁面的內容重要的。這時 iframe 中用光了可用的鏈接就是不值得的了。一種解決辦法是，在主頁面上重要的元素加載完畢後，再動態設置 iframe 的 SRC。

美國前 10 大網站都使用了 iframe。大部分狀況下，他們用它來加載廣告。這是能夠理解的，也是一種符合邏輯的解決方案，用一種簡單的辦法來加載廣告服務。但請記住，iframe 會給你的頁面性能帶來衝擊。只要可能，不要使用 iframe。當確實須要時，謹慎的使用他們。

iframe和frame的區別

一、frame不能脫離frameSet單獨使用，iframe能夠；
二、frame不能放在body中；

以下能夠正常顯示：

<!--<body>-->
<frameset rows="50%,*">
<frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
<!--<body>-->

以下不能正常顯示：
<body>
<frameset rows="50%,*">
<frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
<body>

三、嵌套在frameSet中的iframe必需放在body中；
以下能夠正常顯示：
<body>
<frameset> 
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
</body>

以下不能正常顯示：

<!--<body>-->
<frameset> 
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
<!--</body>-->

四、不嵌套在frameSet中的iframe能夠隨意使用；
以下都可以正常顯示：

<body>
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</body>


<!--<body>-->
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
<!--</body>-->
五、frame的高度只能經過frameSet控制；iframe能夠本身控制，不能經過frameSet控制，如：

<!--<body>-->
<frameset rows="50%,*">
<frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
<!--</body>-->

<body>
<frameset>
<iframe height="30%" name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<iframe height="100" name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
</body>

 

六、若是在同一個頁面使用了兩個以上的iframe，在IE中能夠正常顯示，在firefox中只能顯示出第一個；使用兩個以上的frame在IE和firefox中都可正常

• html文件的渲染過程(性能優化的依據)：
• (http://blog.csdn.net/luckygll/article/details/7432713)
• (http://my.oschina.net/u/1414906/blog/357860)
• 客戶端發出請求---服務器響應將html文件返回給請求的客戶端瀏覽器中;
• 頁面開始加載;
• 加載從html標籤開始;
• 加載到head標籤時，若是標籤內有個外部樣式文件(.css)要加載;
• 客戶端向服務器發出一個請求加載CSS文件，服務器響應;
• CSS加載完成後，客戶端瀏覽器繼續加載html文件裏的body標籤(在CSS文件加載完畢後同時渲染頁面);
• 客戶端在body標籤發現img標籤而且引用了一張圖片,客戶端瀏覽器向服務器發出一次請求,瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼;
• img標籤中的圖片加載完了，要顯示出來，而圖片又要佔用必定的面積，又會影響到後面的佈局，瀏覽器不得不回來從新渲染這一部分;
• body標籤裏的標籤加載及渲染完成後，瀏覽器發現script標籤中的代碼,瀏覽器須要想服務器發出請求加載js文件，服務器響應;
• 瀏覽器解析執行js文件時發現裏面有一些對body文檔結構變化的操做(隱藏某段內容等),此時瀏覽器又須要從新去渲染這些內容;
• 知道瀏覽器發現 </html>標籤;
• 等等，還沒完。用戶點擊了一下界面中的換膚按鈕,js讓瀏覽器換了一下<link>的css標籤;
• 瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，「大夥兒收拾收拾行李，咱得從新來過……」，瀏覽器向服務器請求了新的CSS文件，從新渲染頁面。

頁面迴流與重繪（Reflow & Repaint）
若是你的HTML變得很大很複雜，那麼影響你JavaScript性能的可能並非JavaScript代碼的複雜度，而是頁面的迴流和重繪。
reflow(迴流):當render tree中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流(reflow)。每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。 
迴流如何出現：當該對象即將重繪時，瀏覽器會根據條件判斷該對象的重繪結果是否會依賴該對象的祖先元素。若是有則將該對象祖先元素也加入本次重繪。並一直向上      尋找，直到條件不匹配。
迴流：對某個區域、對象進行重繪，根據條件影響到它的祖先對象進入重繪（並可能無限遞歸直到頂級祖先對象）
(http://www.cnblogs.com/dujingjie/p/5784890.html)

致使瀏覽器reflow的一些因素:
一、添加或者刪除可見的DOM元素；
二、元素位置改變；
三、元素尺寸改變——邊距、填充、邊框、寬度和高度
四、內容改變——好比文本改變或者圖片大小改變而引發的計算值寬度和高度改變；
五、頁面渲染初始化；
六、瀏覽器窗口尺寸改變——resize事件發生時；

repaint(重繪):當render tree中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。則就叫稱爲重繪。
重繪：對某個區域、對象的從新渲染表現
重繪如何出現：改變對象的形狀、座標、表現以及內容都會引起該對象被從新渲染，這種現象即爲重繪。

如何減小回流、重繪
1. 直接改變className，若是動態改變樣式，則使用cssText（考慮沒有優化的瀏覽器）

2. 讓要操做的元素進行」離線處理」，處理完後一塊兒更新
 a) 使用DocumentFragment進行緩存操做,引起一次迴流和重繪；
 b) 使用display:none技術，只引起兩次迴流和重繪；
 c) 使用cloneNode(true or false) 和 replaceChild 技術，引起一次迴流和重繪；
3.不要常常訪問會引發瀏覽器flush隊列的屬性，若是你確實要訪問，利用緩存
4. 讓元素脫離動畫流，減小回流的Render Tree的規模

避免大量頁面迴流的手段也有不少，其本質都是儘可能減小引發迴流和重繪的DOM操做。
(http://itindex.net/detail/54285-迴流-reflow-repaint)

最後總結：
   一、重繪可能引起迴流
   二、迴流一定引起重繪

頁面渲染原理是什麼？
渲染引擎是幹什麼的
渲染引擎能夠顯示html、xml文檔及圖片，它也能夠藉助插件（一種瀏覽器擴展）顯示其餘類型數據，例如使用PDF閱讀器插件能夠顯示PDF格式。
渲染引擎
不一樣的瀏覽器有不一樣的渲染引擎，對於渲染引擎的使用總結以下：
Trident(MSHTML)內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上
Webkit內核：Safari,Chrome等
渲染主流程

渲染引擎首先經過網絡得到所請求文檔的內容，一般以8K分塊的方式完成。下面是渲染引擎在取得內容以後的基本流程：

解析html以構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹

步驟詳細解釋
第一步：渲染引擎開始解析html，根據標籤構建DOM節點
第二步：根據css樣式構建渲染樹，包括元素的大小、顏色，隱藏的元素不會被構建到該樹中。
第三步：根據css樣式構建佈局樹，主要是肯定元素要顯示的位置。
第四步：根據前面的信息，繪製渲染樹。

js的阻塞特性：(解決:使用異步加載的方式:在script標籤中添加async屬性)
   其中js是阻塞式的加載，瀏覽器在加載js時，當瀏覽器在執行js代碼時，不會作其餘的事情，即<script>的每次出現都會讓頁面等待腳本的解析和執行，js代碼執行後，纔會繼續渲染頁面。新一代瀏覽器雖然支持並行下載。可是js下載仍會阻塞其餘資源的下載（好比圖片）。因此應該把js放到頁面的底部。

js的優化：
1.要使用高效的選擇器。
2.將選擇器保存爲局部變量
3.先操做再顯示

47:offsetHeight, scrollHeight, clientHeight，scrollTop分別表明什麼

clientHeight：內部可視區域大小。包括內容可見部分的高度，可見的padding；不包括border，水平方向的scrollbar，margin。

offsetHeight：整個可視區域大小。包括內容可見部分的高度，border，可見的padding，水平方向的scrollbar（若是存在）；不包括margin。

scrollHeight：元素內容的高度。包括內容的高度（可見與不可見），padding（可見與不可見）；不包括border，margin。
scrollTop：元素內容向上滾動了多少像素。

50：rem和em的區別

em相對於父元素，rem相對於根元素

51：嚴格模式的特性

嚴格模式對Javascript的語法和行爲，都作了一些改變。

全局變量必須顯式聲明。

對象不能有重名的屬性

函數必須聲明在頂層

• 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
• 消除代碼運行的一些不安全之處，保證代碼運行的安全；
• 提升編譯器效率，增長運行速度；
• 爲將來新版本的Javascript作好鋪墊。

66.zepto和jquery區別

zepto比jquery體積小不少，移動端的兼容性不須要要考慮不少，jquery中的不少功能都沒有。

width()和height()不同  解決用.css('width')

你以爲jQuery或zepto源碼有哪些寫的好的地方
(答案僅供參考)
jQuery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入window對象參數，能夠使window對象做爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入undefined參數，能夠縮短查找undefined時的做用域鏈。

(function( window, undefined ) {

         //用一個函數域包起來，就是所謂的沙箱

         //在這裏邊var定義的變量，屬於這個函數域內的局部變量，避免污染全局

         //把當前沙箱須要的外部變量經過函數參數引入進來

         //只要保證參數對內提供的接口的一致性，你還能夠隨意替換傳進來的這個參數

        window.jQuery = window.$ = jQuery;

    })( window );

jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法。
有一些數組或對象的方法常常能使用到，jQuery將其保存爲局部變量以提升訪問速度。
jquery實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率。

67.css3動畫和jquery動畫的差異

1.css3中的過渡和animation動畫都是基於css實現機制的，屬於css範疇以內，並無涉及到任何語言操做。效率略高與jQuery中的animate()函數，但兼容性不好。

2.jQuery中的animate()函數能夠簡單的理解爲css樣式的「逐幀動畫」，是css樣式不一樣狀態的快速切換的結果。效率略低於css3動畫執行效率，可是兼容性好。‍

68.如何解決ajax沒法後退的問題

HTML5裏引入了新的API，即：history.pushState, history.replaceState

能夠經過pushState和replaceState接口操做瀏覽器歷史，而且改變當前頁面的URL。

onpopstate監聽後退

70.分域名請求圖片的緣由和好處

瀏覽器的併發請求數目限制是針對同一域名的，超過限制數目的請求會被阻塞

瀏覽器併發請求有個數限制，分域名能夠同時併發請求大量圖片

 

71.頁面的加載順序

html順序加載，其中js會阻塞後續dom和資源的加載，css不會阻塞dom和資源的加載可是會阻塞js的加載。

瀏覽器會使用prefetch對引用的資源提早下載

1.沒有 defer 或 async，瀏覽器會當即加載並執行指定的腳本

2.有 async，加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行(下載異步，執行同步，加載完就執行)。

3.有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

73.計算機網絡的分層概述

tcp/ip模型：從下往上分別是鏈路層，網絡層，傳輸層，應用層

osi模型：從下往上分別是物理層，鏈路層，網絡層，傳輸層，會話層，表示層，應用層。

73.瀏覽器js、css緩存問題

瀏覽器緩存的意義在於提升了執行效率，可是也隨之而來帶來了一些問題，致使修改了js、css，客戶端不能更新

都加上了一個時間戳做爲版本號

<script type=」text/javascript」 src=」{JS文件鏈接地址}?version=XXXXXXXX」></script>

74.setTimeout,setInterval,requestAnimationFrame之間的區別

setInterval若是函數執行的時間很長的話，第二次的函數會放到隊列中，等函數執行完再執行第二次，致使時間間隔發生錯誤。

而settimeout必定是在這個時間定時結束以後,它纔會執行

requestAnimationFrame是爲了作動畫專用的一個方法，這種方法對於dom節點的操做會比較頻繁。

75.webpack經常使用到哪些功能

設置入口  設置輸出目 設置loader  extract-text-webpack-plugin將css從js代碼中抽出併合並 處理圖片文字等功能 解析jsx解析bable

76.介紹sass

&定義變量 css嵌套 容許在代碼中使用算式 支持if判斷for循環

77.websocket和ajax輪詢

Websocket是HTML5中提出的新的協議，注意，這裏是協議，能夠實現客戶端與服務器端的通訊，實現服務器的推送功能。

其優勢就是，只要創建一次鏈接，就能夠接二連三的獲得服務器推送的消息，節省帶寬和服務器端的壓力。

ajax輪詢模擬長鏈接就是每一個一段時間（0.5s）就向服務器發起ajax請求，查詢服務器端是否有數據更新

其缺點顯而易見，每次都要創建HTTP鏈接，即便須要傳輸的數據很是少，因此這樣很浪費帶寬

78.tansition和margin的百分比根據什麼計算

transition是相對於自身,margin相對於參照物

84.移動端兼容問題

IOS移動端click事件300ms的延遲響應

一些狀況下對非可點擊元素如(label,span)監聽click事件，ios下不會觸發，css增長cursor:pointer就搞定了

85.bootstrap的柵格系統如何實現的

box-sizing: border-box;
container row column設置百分比

XML和JSON的區別？

(1).數據體積方面。

JSON相對於XML來說，數據的體積小，傳遞的速度更快些。

(2).數據交互方面。

JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。

(3).數據描述方面。

JSON對數據的描述性比XML較差。

(4).傳輸速度方面。

JSON的速度要遠遠快於XML。

請你談談Cookie的弊端
cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但仍是有不少侷限性的。
第一：每一個特定的域名下最多生成20個cookie
1.IE6或更低版本最多20個cookie
2.IE7和以後的版本最後能夠有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有作硬性限制
IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。
cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。
IE 提供了一種存儲能夠持久化用戶數據，叫作userdata，從IE5.0就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，那麼會一直存在。
優勢：極高的擴展性和可用性
1.經過良好的編程，控制保存在cookie中的session對象的大小。
2.經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。
3.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。
缺點：
1.`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉.
2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。
3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

跨域:
協議,域名,端口號有一個不一樣就被稱爲跨域

prototype與__proto__
(http://www.cnblogs.com/snandy/archive/2012/09/01/2664134.html)
prototype:每個函數對象都有一個顯示的prototype屬性,它表明了對象的原型
__proto__:內部原型(IE6/7/8/9不支持),每一個對象都有一個名爲__proto__的內部隱藏屬性，指向於它所對應的原型對象,
IE9中能夠使用Object.getPrototypeOf(obj)獲取對象的內部原型;
[原型鏈是基於__proto__才得以造成]
全部對象__proto__都指向其構造器的prototype,包括自定義的構造器
[注意:構造器能夠直接用構造器的名字,也能夠用實例對象的constructor屬性得到]

做用域與做用域鏈

做用域：變量的做用域有全局做用域和局部做用域兩種http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html
做用域鏈：函數也是對象，實際上，JavaScript裏一切都是對象。函數對象和其它對象同樣，擁有能夠經過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被建立的做用域中對象的集合，這個集合被稱爲函數的做用域鏈，它決定了哪些數據能被函數訪問。改變做用域鏈

函數每次執行時對應的運行期上下文都是獨一無二的，因此屢次調用同一個函數就會致使建立多個運行期上下文，當函數執行完畢，執行上下文會被銷燬。每個運行期上下文都和一個做用域鏈關聯。通常狀況下，在運行期上下文運行的過程當中，其做用域鏈只會被 with 語句和 catch 語句影響。

介紹一下你所瞭解的做用域鏈,做用域鏈的盡頭是什麼，爲何

每個函數做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的。

javascript模塊化是什麼及其優缺點介紹

現在backbone、emberjs、spinejs、batmanjs 
等MVC框架侵襲而來。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模塊化的JavaScript撲面而來。web前端已經演變成大前端，web前端的發展速度之快。 
1)咱們來看看什麼是模塊化？ 
  模塊化是一種將系統分離成獨立功能部分的方法，可將系統分割成獨立的功能部分，嚴格定義模塊接口、模塊間具備透明性。javascript中的模塊在一些C、PHP、java中比較常見: 
 c中使用include 包含.h文件;php中使用require_once包含.php文件 
 java使用import導入包 
此中都有模塊化的思想。 

2)模塊化的優缺點：
a>優勢： 
 可維護性 
 1.靈活架構，焦點分離 
 2.方便模塊間組合、分解 
 3.方便單個模塊功能調試、升級 
 4.多人協做互不干擾 
 可測試性 
 1.可分單元測試 
b>缺點： 
性能損耗 
 1.系統分層，調用鏈會很長 
 2.模塊間通訊,模塊間發送消息會很耗性能 
 3)最近的項目中也有用到模塊化，
 使用的是seajs,可是當引用到jquery,jquery easyui/或者jquery 
 UI組件時,有可能會用到不少jquery插件，那這樣要是實現一個很複雜的交互時，模塊間的依賴會不少，使用define（）方法引入模塊會不少，不知
有麼有什麼好的方法？

4)附： 
內聚度 
內聚度指模塊內部實現，它是信息隱藏和局部化概念的天然擴展，它標誌着一個模塊內部各成分彼此結合的緊密程度。好處也很明顯，當把相關的任務分組後去閱讀就容易多了。 設計時應該儘量的提升模塊內聚度，從而得到較高的模塊獨立性。 
耦合度 
耦合度則是指模塊之間的關聯程度的度量。耦合度取決於模塊之間接口的複雜性，進入或調用模塊的位置等。與內聚度相反，在設計時應儘可能追求鬆散耦合的系統。

跳出循環體
break:跳出最內層循環或者退出一個switch語句
continue:跳出當前循環繼續下一個循環
return:跳出循環,即便函數主體中還有其餘語句,函數執行也會中止

 

（內容5）——————

10個最多見的 HTML5 面試題及答案

一、新的 HTML5 文檔類型和字符集是？

HTML5 文檔類型很簡單：<!doctype html>

HTML5 使用 UTF-8 編碼示例：

<meta charset=」UTF-8″>

二、HTML5 中如何嵌入音頻？

HTML5 支持 MP三、Wav 和 Ogg 格式的音頻，下面是在網頁中嵌入音頻的簡單示例：

<audio controls>
    <source src=」jamshed.mp3″ type=」audio/mpeg」>
    Your browser does’nt support audio embedding feature.
</audio>

三、HTML5 中如何嵌入視頻？

和音頻相似，HTML5 支持 MP四、WebM 和 Ogg 格式的視頻，下面是簡單示例：

1 2 3 4

<video width=」450″ height=」340″ controls>    <source src=」jamshed.mp4″ type=」video/mp4″>     Your browser does’nt support video embedding feature. </video>

四、除了 audio 和 video，HTML5 還有哪些媒體標籤？

HTML5 對於多媒體提供了強有力的支持，除了 audio 和 video 標籤外，還支持如下標籤：

<embed> 標籤訂義嵌入的內容，好比插件。

1	<embed type=」video/quicktime」 src=」Fishing.mov」>

<source> 對於定義多個數據源頗有用。

1 2 3 4

<video width=」450″ height=」340″ controls>       <source src=」jamshed.mp4″ type=」video/mp4″>       <source src=」jamshed.ogg」 type=」video/ogg」> </video>

<track> 標籤爲諸如 video 元素之類的媒介規定外部文本軌道。 用於規定字幕文件或其餘包含文本的文件，當媒介播放時，這些文件是可見的。

1 2 3 4 5 6

<video width=」450″ height=」340″ controls>       <source src=」jamshed.mp4″ type=」video/mp4″>       <source src=」jamshed.ogg」 type=」video/ogg」>       <track kind=」subtitles」 label=」English」 src=」jamshed_en.vtt」 srclang=」en」  default ></track>        <track kind=」subtitles」 label=」Arabic」 src=」jamshed_ar.vtt」 srclang=」ar」></track> </video>

五、HTML5 Canvas 元素有什麼用？

Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於能夠直接在 HTML 上進行圖形操做，

1 2	<canvas id=」canvas1″ width=」300″ height=」100″> </canvas>

六、HTML5 存儲類型有什麼區別？

HTML5 可以本地存儲數據，在以前都是使用 cookies 使用的。HTML5 提供了下面兩種本地存儲方案：

• localStorage 用於持久化的本地存儲，數據永遠不會過時，關閉瀏覽器也不會丟失。
• sessionStorage 同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲

七、HTML5 有哪些新增的表單元素？

HTML5 新增了不少表單元素讓開發者構建更優秀的 Web 應用程序。

• datalist
• datetime
• output
• keygen 
• date 
• month 
• week
• time
• color
• number 
• range 
• email 
• url

八、HTML5 廢棄了哪些 HTML4 標籤？

HTML5 廢棄了一些過期的，不合理的 HTML 標籤：

• frame
• frameset
• noframe
• applet
• big
• center
• basefront

九、HTML5 標準提供了哪些新的 API？

HTML5 提供的應用程序 API 主要有：

• Media API
• Text Track API
• Application Cache API
• User Interaction
• Data Transfer API
• Command API
• Constraint Validation API
• History API

十、HTML5 應用程序緩存和瀏覽器緩存有什麼區別？

應用程序緩存是 HTML5 的重要特性之一，提供了離線使用的功能，讓應用程序能夠獲取本地的網站內容，例如 HTML、CSS、圖片以及 JavaScript。這個特性能夠提升網站性能，它的實現藉助於 manifest 文件，以下：

<!doctype html>
<html manifest=」example.appcache」>
…..
</html>

與傳統瀏覽器緩存相比，它不強制用戶訪問的網站內容被緩存。

 

（內容6）——————

前端開發面試題

 https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions

更新時間: 2015-10-9

HTML

Doctype做用？標準模式與兼容模式各有什麼區別?

（1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。

（2）、標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

HTML5 爲何只須要寫 <!DOCTYPE HTML>？

HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；

 而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

首先：CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，如div的display默認值爲「block」，則爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。

（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常見的空元素：
    <br> <hr> <img> <input> <link> <meta>
    不爲人知的是：
    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

頁面導入樣式時，使用link和@import有什麼區別？

（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

JS引擎則：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。      [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]

詳細文章：瀏覽器內核的解析和對比 - 依水間

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
      繪畫 canvas;
      用於媒介回放的 video 和 audio 元素;
      本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
      sessionStorage 的數據在瀏覽器關閉後自動刪除;
      語意化更好的內容元素，好比 article、footer、header、nav、section;
      表單控件，calendar、date、time、email、url、search;
      新的技術webworker, websockt, Geolocation;

  移除的元素：

      純表現的元素：basefont，big，center，font, s，strike，tt，u;
      對可用性產生負面影響的元素：frame，frameset，noframes；

* 支持HTML5新標籤：
     IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
     能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
     瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

     固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
     <!--[if lt IE 9]>
        <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
     <![endif]-->

* 如何區分： DOCTYPE聲明\新增的結構元素\功能元素

什麼是web語義化,有什麼好處

web語義化是指經過HTML標記表示頁面包含的信息，包含了HTML標籤的語義化和css命名的語義化。 HTML標籤的語義化是指：經過使用包含語義的標籤（如h1-h6）恰當地表示文檔結構 css命名的語義化是指：爲html標籤添加有意義的class，id補充未表達的語義，如Microformat經過添加符合規則的class描述信息 爲何須要語義化：

• 去掉樣式後頁面呈現清晰的結構
• 盲人使用讀屏器更好地閱讀
• 搜索引擎更好地理解頁面，有利於收錄
• 便團隊項目的可持續運做及維護

HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。


如何使用：
一、頁面頭部像下面同樣加入一個manifest的屬性；
二、在cache.manifest文件的編寫離線存儲的資源；
    CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
三、在離線狀態時，操做window.applicationCache進行需求實現。

詳細的使用請參考：有趣的HTML5：離線存儲

瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
離線的狀況下，瀏覽器就直接使用離線存儲的資源。

詳細的使用請參考：有趣的HTML5：離線存儲

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。


存儲大小：
    cookie數據大小不能超過4k。
    sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間：
    localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
    sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
    cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。

Label的做用是什麼？是怎麼用的？

label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。

<label for="Name">Number:</label> <input type=「text「name="Name" id="Name"/> 

<label>Date:<input type="text" name="B" /></label>

HTML5的form如何關閉自動完成功能？

給不想要提示的 form 或下某個input 設置爲 autocomplete=off。

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

調用localstorge、cookies等本地存儲方式

webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR

CSS

介紹一下CSS的盒子模型？

（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

*   1.id選擇器（ # myid）
    2.類選擇器（.myclassname）
    3.標籤選擇器（div, h1, p）
    4.相鄰選擇器（h1 + p）
    5.子選擇器（ul > li）
    6.後代選擇器（li a）
    7.通配符選擇器（ * ）
    8.屬性選擇器（a[rel = "external"]）
    9.僞類選擇器（a: hover, li: nth - child）

*   可繼承的樣式： font-size font-family color, UL LI DL DD DT;

*   不可繼承的樣式：border padding margin width height ;

*   優先級就近原則，同權重狀況下樣式定義最近者爲準;

*   載入樣式以最後載入的定位爲準;

優先級爲:

!important >  id > class > tag

   important 比 內聯優先級高

CSS3新增僞類舉例：

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled  :disabled 控制表單控件的禁用狀態。
:checked        單選框或複選框被選中。

如何居中div？如何居中一個浮動元素？

給div設置一個寬度，而後添加margin:0 auto屬性

div{
    width:200px;
    margin:0 auto;
 }

居中一個浮動元素

肯定容器的寬高 寬500 高 300 的層
  設置層的外邊距

 .div {
  Width:500px ; height:300px;//高度能夠不設
  Margin: -150px 0 0 -250px;
  position:relative;相對定位
  background-color:pink;//方便看效果
  left:50%;
  top:50%;
}

列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？

1.
  block 象塊類型元素同樣顯示。
  none 缺省值。象行內元素類型同樣顯示。
  inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
  list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

  2.
  *absolute
        生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

  *fixed （老IE不支持）
        生成絕對定位的元素，相對於瀏覽器窗口進行定位。

  *relative
        生成相對定位的元素，相對於其正常位置進行定位。

  * static  默認值。沒有定位，元素出如今正常的流中
  *（忽略 top, bottom, left, right z-index 聲明）。

  * inherit 規定從父元素繼承 position 屬性的值。

CSS3有哪些新特性？

CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
  對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
  增長了更多的CSS選擇器  多背景 rgba

一個滿屏 品 字佈局 如何設計?

 

display: block;和display: inline;的區別
block元素特色：
1.處於常規流中時，若是width沒有設置，會自動填充滿父容器
2.能夠應用margin/padding 
3.在沒有設置高度的狀況下會擴展高度以包含常規流中的子元素
4.處於常規流中時佈局時在先後元素位置之間（獨佔一個水平空間）
5.忽略vertical-align

inline元素特色
1.水平方向上根據direction依次佈局
2.不會在元素先後進行換行
3.受white-space控制
4.margin/padding在豎直方向上無效，水平方向上有效
5.width/height屬性對非替換行內元素無效，寬度由元素內容決定
6.非替換行內元素的行框高由line-height肯定，替換行內元素的行框高由height,margin,padding,border決定
6.浮動或絕對定位時會轉換爲block 
7.vertical-align屬性生效

display:none和visibility:hidden的區別？

display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。
visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。  

position:absolute和float屬性的異同
共同點：對內聯元素設置float和absolute屬性，可讓元素脫離文檔流，而且能夠設置其寬高。
不一樣點：float仍會佔據位置，absolute會覆蓋文檔流中的其餘元素。

介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。
content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高
border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content
標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。

常見兼容性問題？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

  浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

 這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

  漸進識別的方式，從整體中逐漸排除局部。

  首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
  接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
       background-color:#f1ee18;/*全部識別*/
      .background-color:#00deff\9; /*IE六、七、8識別*/
      +background-color:#a200ff;/*IE六、7識別*/
      _background-color:#1e0bd1;/*IE6識別*/
      }

*  IE下,能夠使用獲取常規屬性的方法來獲取自定義屬性,
   也能夠使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性.
   解決方法:統一經過getAttribute()獲取自定義屬性.

* IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;
  Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
  可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

爲何要初始化CSS樣式。

- 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

- 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

淘寶的樣式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

absolute的containing block計算方式跟正常流有什麼不一樣？

position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

對BFC規範的理解？

（W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其餘元素的關 系和相互做用。）

css定義的權重

如下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，如下例子是演示各類定義的權重值：

/*權重爲1*/
div{
}
/*權重爲10*/
.class1{
}
/*權重爲100*/
#id1{
}
/*權重爲100+1=101*/
#id1 div{
}
/*權重爲10+1=11*/
.class1 div{
}
/*權重爲10+10+1=21*/
.class1 .class2 div{
}

若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現

用過媒體查詢，針對移動端的佈局嗎？

使用 CSS 預處理器嗎？喜歡那個？

SASS

若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

display:inline-block 何時會顯示間隙？(攜程)

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

JavaScript

函數防抖和函數節流

函數防抖是指頻繁觸發的狀況下，只有足夠的空閒時間，才執行代碼一次

函數防抖的要點，也是須要一個setTimeout來輔助實現。延遲執行須要跑的代碼。
若是方法屢次觸發，則把上次記錄的延遲執行代碼用clearTimeout清掉，從新開始。
若是計時完畢，沒有方法進來訪問觸發，則執行代碼。

//函數防抖
var timer = false
document.getElementById("debounce").onScroll = function() {
        clearTimeout(timer)  
        timer = setTimeout(function(){
                console.log(‘函數防抖’) 
  }, 300)     
}

函數節流是指必定時間內js方法只跑一次

函數節流的要點是，聲明一個變量當標誌位，記錄當前代碼是否在執行。
若是空閒，則能夠正常觸發方法執行。
若是代碼正在執行，則取消此次方法執行，直接return。

//函數節流
var canScroll = true;
document.getElementById('throttle').onScroll = function() {
               if (!canScroll) {
                return;
               }
                canScroll = false;
                setTimeout(function(){
                   console.log('函數節流');
                   canScroll = true;
                },300)       
}

說幾條寫JavaScript的基本規範？

1.不要在同一行聲明多個變量。
2.請使用 ===/!==來比較true/false或者數值
3.使用對象字面量替代new Array這種形式
4.不要使用全局函數。
5.Switch語句必須帶有default分支
6.函數不該該有時候有返回值，有時候沒有返回值。
7.For循環必須使用大括號
8.If語句必須使用大括號
9.for-in循環中的變量 應該使用var關鍵字明確限定做用域，從而避免做用域污染。

eval是作什麼的？

它的功能是把對應的字符串解析成JS代碼並運行；
應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

null，undefined 的區別？

null是一個表示」無」的對象，轉爲數值時爲0；undefined是一個表示」無」的原始值，轉爲數值時爲NaN。
當聲明的變量還未被初始化時，變量的默認值爲undefined。
undefined表示」缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：
（1）變量被聲明瞭，但沒有賦值時，就等於undefined。
（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
（3）對象沒有賦值的屬性，該屬性的值爲undefined。
（4）函數沒有返回值時，默認返回undefined。
null表示」沒有對象」，即該處不該該有值。典型用法是：
（1） 做爲函數的參數，表示該函數的參數不是對象。
（2） 做爲對象原型鏈的終點。

 http響應中content-type包含哪些內容

請求中的消息主體是用何種方式編碼

application/x-www-form-urlencoded

這是最多見的 POST 提交數據的方式 按照 key1=val1&key2=val2 的方式進行編碼

application/json

告訴服務端消息主體是序列化後的 JSON 字符串

 瀏覽器緩存有哪些，一般緩存有哪幾種方式

強緩存 強緩存若是命中，瀏覽器直接從本身的緩存中讀取資源，不會發請求到服務器。

協商緩存 當強緩存沒有命中的時候，瀏覽器必定會發送一個請求到服務器，經過服務器端依據資源的另一些http header驗證這個資源是否命中協商緩存，若是協商緩存命中，服務器會將這個請求返回（304），若未命中請求，則將資源返回客戶端，並更新本地緩存數據（200）。

HTTP頭信息控制緩存

Expires（強緩存）+過時時間   Expires是HTTP1.0提出的一個表示資源過時時間的header，它描述的是一個絕對時間

Cache-control（強緩存） 描述的是一個相對時間，在進行緩存命中的時候，都是利用客戶端時間進行判斷 管理更有效，安全一些 Cache-Control: max-age=3600

Last-Modified/If-Modified-Since（協商緩存） 標示這個響應資源的最後修改時間。Last-Modified是服務器相應給客戶端的，If-Modified-Sinces是客戶端發給服務器，服務器判斷這個緩存時間是不是最新的，是的話拿緩存。

Etag/If-None-Match（協商緩存） etag和last-modified相似，他是發送一個字符串來標識版本。

Node.js的適用場景？

高併發、聊天、實時消息推送

new Vue({...})實例化過程當中發生了什麼？

每一個 Vue 應用都是經過 Vue 函數建立一個新的 Vue 實例開始的

參考：

05-Vue入門系列之Vue實例詳解與生命週期

https://cn.vuejs.org/v2/guide/instance.html

Vue生命週期總結

簡單總結爲三個步驟：初始化建立vue實例->編譯模版掛載到dom->銷燬vue實例

每一個 Vue 實例呢，在被建立以前都要通過一系列的初始化過程。

過程以下：

首先根據傳入的選項對象建立Vue實例

var vm = new Vue({

// 選項

})

立刻設置數據監聽$data:f()，它向 Vue 的響應式系統中加入了其  data 對象中能找到的全部的屬性。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值，雙向綁定概念。

而後建立初始化Vue內部事件、實例的函數等等，例如：編譯模板template:f(），vue本身寫的編譯器會生成將vue指令語法解析後數據和模版結合後的html

接着掛載實例到 DOM mounted:f()，若是選項中有爲$el綁定設值自動啓動mounted，不然須要手動啓動

而後Virtual Dom開始管理在數據變化時更新 DOM (wathc:f()、compute:f()、$data內的屬性)等。

最後在須要時執行銷燬實例。

整個過程當中同時也會運行一些叫作生命週期鉤子的函數，事件鉤子如建立先後beforeCreate、created，掛載先後beforeMonuted、monuted，Virtual Dom數據監控到變化先後beforeUpdate、updated，銷燬先後beforeDestroy、destroyed等待。給予機會在一些特定的場景下添加他們本身的代碼參與到生命過程發生內。

生命週期圖示：

 

Vue雙向綁定概念

雙向綁定是指：HTML標籤與數據對象互綁。許多遵循MVVM模型的框架如Vue、angular都有此功能。好處是簡寫了代碼提高了開發效率，變革了以前Dom的開發方式，主導開發方式變成了前端由數據驅動的開發時代。

vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者（文本節點則是做爲訂閱者），在收到消息後執行相應的更新操做。

compile主要作的事情是解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。

AngularJS 採用「髒值檢測」的方式，數據發生變動後，對於全部的數據和視圖的綁定關係進行一次檢測，識別是否有數據發生了改變。

生命週期有哪些, 怎麼用?

beforecreated：el 和 data 並未初始化
　　created:完成了 data 數據的初始化，el沒有
　　beforeMount：完成了 el 和 data 初始化
　　mounted ：完成掛載　　updated；destroyed

　　react：初始化階段、運行中階段、銷燬階段

　　初始化getDefaultProps()和getInitialState()初始化
componentWillMount() 在組件即將被渲染到頁面

　　render() 組件渲染
componentDidMount() 組件被渲染到頁面上，

　　運行中shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate()
　　銷燬componentWillUnmount()

 

父子組件怎麼通訊的?

vue：父組件是經過props屬性給子組件通訊  在子組件裏面emit,在父組件監聽

　　react：props傳遞  父給子傳一個回調函數 將數據傳給父親處理
兄弟組件怎麼通訊的?　　
vuex 創建一個vue實例 emit觸發事件 on監聽事件　　
redux  子A -> 父 -> 子B

介紹一下你對webpack的理解，和gulp有什麼不一樣

Webpack是模塊打包工具，他會分析模塊間的依賴關係，而後使用loaders處理它們，最後生成一個優化而且合併後的靜態資源。

gulp是前端自動化工具 可以優化前端工做流程，好比文件合併壓縮

 

webpack打包速度慢，你以爲可能的緣由是什麼，該如何解決

模塊太多

Webpack 能夠配置 externals 來將依賴的庫指向全局變量，從而再也不打包這個庫

 

Node，Koa用的怎麼樣

koa是一個相對於express來講,更小,更健壯,更富表現力的Web框架，不用寫回調

koa是從第一個中間件開始執行，遇到next進入下一個中間件，一直執行到最後一箇中間件，在逆序

async await語法的支持

 

UMD規範和ES6模塊化，Commonjs的對比

CommonJS是一個更偏向於服務器端的規範。用於NodeJS 是同步的

AMD是依賴前置的

CMD推崇依賴就近，延遲執行。能夠把你的依賴寫進代碼的任意一行

AMD和CMD都是用difine和require，可是CMD標準傾向於在使用過程當中提出依賴，就是無論代碼寫到哪忽然發現須要依賴另外一個模塊，那就在當前代碼用require引入就能夠了，規範會幫你搞定預加載，你隨便寫就能夠了。可是AMD標準讓你必須提早在頭部依賴參數部分寫好（沒有寫好？ 倒回去寫好咯）。這就是最明顯的區別。

UMD寫一個文件須要兼容不一樣的加載規範

ES6經過import、export實現模塊的輸入輸出。其中import命令用於輸入其餘模塊提供的功能，export命令用於規定模塊的對外接口。

commonjs 同步 順序執行

AMD 提早加載，無論是否調用模塊，先解析全部模塊 requirejs 速度快 有可能浪費資源

CMD 提早加載，在真正須要使用(依賴)模塊時才解析該模塊 seajs 按需解析 性能比AMD差

 

如何評價AngularJS和BackboneJS
backbone具備依賴性，依賴underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一個AngularJS 多出了2 次HTTP請求.
Backbone的Model沒有與UI視圖數據綁定，而是須要在View中自行操做DOM來更新或讀取UI數據。AngularJS與此相反，Model直接與UI視圖綁定，Model與UI視圖的關係，經過directive封裝，AngularJS內置的通用directive，就能實現大部分操做了，也就是說，基本沒必要關心Model與UI視圖的關係，直接操做Model就好了，UI視圖自動更新。
AngularJS的directive，你輸入特定數據，他就能輸出相應UI視圖。是一個比較完善的前端MVW框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等全部功能，模板功能強大豐富，而且是聲明式的，自帶了豐富的 Angular 指令。

react和vue有哪些不一樣 說說你對這兩個框架的見解

都用了virtual dom的方式, 性能都很好

ui上都是組件化的寫法，開發效率很高

vue是雙向數據綁定，react是單項數據綁定，當工程規模比較大時雙向數據綁定會很難維護

vue適合不會持續的  小型的web應用，使用vue.js能帶來短時間內較高的開發效率. 不然採用react

介紹js的基本數據類型。

number,string,boolean,object,undefined

Javascript如何實現繼承？

經過原型和構造器

["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN] 由於 parseInt 須要兩個參數 (val, radix)，其中 radix 表示解析時用的基數。map 傳了 3 個 (element, index, array)，對應的 radix 不合法致使解析失敗。

如何建立一個對象? （畫出此對象的內存圖）

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sing = function() { alert(this.name) }
  }

談談This對象的理解。

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。

可是有一個總原則，那就是this指的是調用函數的那個對象。

this通常狀況下：是全局對象Global。 做爲方法調用，那麼this就是指這個對象

事件是？IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。
 2. 事件處理機制：IE是事件冒泡、火狐是 事件捕獲；
 3. ev.stopPropagation();

什麼是閉包（closure），爲何要用它？

執行say667()後,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在.使得Javascript的垃圾回收機制GC不會收回say667()所佔用的資源，由於say667()的內部函數的執行須要依賴say667()中的變量。這是對閉包做用的很是直白的描述.

  function say667() {
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() { alert(num); }
    num++;
    return sayAlert;
}

 var sayAlert = say667();
 sayAlert()//執行結果應該彈出的667

"use strict";是什麼意思 ? 使用它的好處和壞處分別是什麼？

如何判斷一個對象是否屬於某個類？

使用instanceof （待完善）

   if(a instanceof Person){
       alert('yes');
   }

new操做符具體幹了什麼呢?

new共經歷了四個過程。

var fn = function () { };
var fnObj = new fn();
一、建立了一個空對象
var obj = new object();
二、設置原型鏈
obj._proto_ = fn.prototype;
三、讓fn的this指向obj，並執行fn的函數體
var result = fn.call(obj);
四、判斷fn的返回值類型，若是是值類型，返回obj。若是是引用類型，就返回這個引用類型的對象。
if (typeof(result) == "object"){  
    fnObj = result;  
} else {  
    fnObj = obj;
}  

 

Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

hasOwnProperty

JSON 的瞭解？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小
{"age":"12", "name":"back"}

js延遲加載的方式有哪些？

defer和async、動態建立DOM方式（用得最多）、按需異步載入js

ajax 是什麼?

同步和異步的區別?

如何解決跨域問題?

跨域通訊：js進行DOM操做、通訊時若是目標與當前窗口不知足同源條件，瀏覽器爲了安全會阻止跨域操做。跨域通訊一般有如下方法

若是是log之類的簡單單項通訊，新建<img>,<script>,<link>,<iframe>元素，經過src，href屬性設置爲目標url。實現跨域請求

若是請求json數據，使用<script>進行jsonp請求 現代瀏覽器中多窗口通訊使用HTML5規範的targetWindow.postMessage(data, origin);其中data是須要發送的對象，origin是目標窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage發送來的數據，event.origin是發送窗口的origin，event.source是發送消息的窗口引用

flash，內部服務器設置代理頁面 經過修改document.domain來跨域。將子域和主域的document.domain設爲同一個主域.前提條件：這兩個域名必須屬於同一個基礎域名!並且所用的協議，端口都要一致，不然沒法利用document.domain進行跨域

跨域請求數據，現代瀏覽器可以使用HTML5規範的CORS功能，只要目標服務器返回HTTP頭部**Access-Control-Allow-Origin: ***便可像普通ajax同樣訪問跨域資源

window.name（既不復雜，也能兼容到幾乎全部瀏覽器）

模塊化怎麼作？

當即執行函數,不暴露私有成員

var module1 = (function(){
    　　　　var _count = 0;
    　　　　var m1 = function(){
    　　　　　　//...
    　　　　};
    　　　　var m2 = function(){
    　　　　　　//...
    　　　　};
    　　　　return {
    　　　　　　m1 : m1,
    　　　　　　m2 : m2
    　　　　};
    　　})();

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

異步加載的方式有哪些？

(1) defer，只支持IE

  (2) async：

  (3) 建立script，插入到DOM中，加載完畢後callBack

documen.write和 innerHTML的區別

　　　　document.write只能重繪整個頁面

　　　　innerHTML能夠重繪頁面的一部分

.call() 和 .apply() 的區別？

例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4);

  注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。

    function add(a,b)
    {
        alert(a+b);
    }

    function sub(a,b)
    {
        alert(a-b);
    }

    add.call(sub,3,1);

Jquery與jQuery UI 有啥區別？

*jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

*jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。
 提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等

JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？

JQuery的end()方法是什麼功能？

 大多數 jQuery 的選擇器方法會返回一個當前選擇器匹配到元素集對象。end()是返回前選擇器匹配到後、剩下的元素集合。

jquery 中的deferred()方法是什麼？

 jq實現異步編程promise規範的API，用它能解決傳統異步編程代碼執行結構不清晰的問題。

傳統的異步編程會帶來的一些問題：

1.序列化異步操做致使的問題

　　1），延續傳遞風格Continuation Passing Style (CPS)

      2），深度嵌套

     3），回調地獄

2.並行異步操做的困難

jquery 中如何將數組轉化爲json字符串，而後再轉化回來？

　　　jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：

$.fn.stringifyArray = function(array) {
        return JSON.stringify(array)
    }

    $.fn.parseArray = function(array) {
        return JSON.parse(array)
    }

    而後調用：
    $("").stringifyArray(array)

針對 jQuery 的優化方法？

*基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。

*頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。
 好比：var str=$("a").attr("href");

*for (var i = size; i < arr.length; i++) {}
 for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可讓循環跑得更快：
 for (var i = size, length = arr.length; i < length; i++) {}

JavaScript中的做用域與變量聲明提高？

那些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

Javascript垃圾回收方法
標記清除（mark and sweep）
這是JavaScript最多見的垃圾回收方式，當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將其標記爲「進入環境」，當變量離開環境的時候（函數執行結束）將其標記爲「離開環境」。
垃圾回收器會在運行的時候給存儲在內存中的全部變量加上標記，而後去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成以後仍存在標記的就是要刪除的變量了
引用計數(reference counting)
在低版本IE中常常會出現內存泄露，不少時候就是由於其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每一個值被使用的次數，當聲明瞭一個 變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1，若是該變量的值變成了另一個，則這個值得引用次數減1，當這個值的引用次數變爲0的時 候，說明沒有變量在使用，這個值無法被訪問了，所以能夠將其佔用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。
在IE中雖然JavaScript對象經過標記清除的方式進行垃圾回收，但BOM與DOM對象倒是經過引用計數回收垃圾的， 
也就是說只要涉及BOM及DOM就會出現循環引用問題。

JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

jQuery鏈式操做如何實現以及爲何要用鏈式操做？

鏈式寫法原理經過調用對象上的方法最後 return this 把對象再返回回來，return、prototype是其原理實現的核心點。

jq是如何實現鏈式寫法的呢？

//jquery源碼
jQuery = function (selector, context) {
    return new jQuery.fn.init(selector, context, rootjQuery);
 },
jQuery.fn = jQuery.prototype = {}
jQuery.fn.init.prototype = jQuery.fn;

這幾行代碼實現了JQ的鏈式寫法定義一個函數，return 一個實例，實例對象的init函數裏進行了處理初始化操做，好比選擇器，拼接字符串等等，這裏不一一介紹。 最後再將jq的prototype 賦值給init方法的prototype。這就是jq用起來簡單方便的黑魔法原理所在

爲何要用鏈式操做呢？通常的解釋是節省代碼量，代碼看起來更優雅，其實用鏈式操做的好處是解決了異步編程模型的執行流程不清晰的問題，提高了更好的異步編程體驗。jQuery中$(document).ready就很是好的闡釋了這一理念。

DOMCotentLoaded是一個事件，在DOM並未加載前，jQuery的大部分操做都不會奏效，但jQuery的設計者並無把他當成事件同樣來處理，而是轉成一種「選其對象，對其操做」的思路。$選擇了document對象，ready是其方法進行操做。這樣子流程問題就很是清晰了，在鏈條越後位置的方法就越後執行。

CommonJS中的異步編程模型也延續了這一想法，每個異步任務返回一個Promise對象，該對象有一個then方法，容許指定回調函數。 因此咱們能夠這樣寫： f1().then(f2).then(f3); 這種方法咱們無需太過關注實現，也不太須要理解異步，只要懂得經過函數選對象，經過then進行操做，就能進行異步編程。

如何判斷當前腳本運行在瀏覽器仍是node環境中？（阿里）

經過判斷Global對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中

其餘問題

你遇到過比較難的技術問題是？你是如何解決的？

常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

頁面重構怎麼操做？

列舉IE 與其餘瀏覽器不同的特性？

99%的網站都須要被重構是那本書上寫的？

什麼叫優雅降級和漸進加強？

WEB應用從服務器主動推送Data到客戶端有那些方式？

對Node的優勢和缺點提出了本身的見解？

*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，
  所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。
  此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
  所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，
  並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

如何進行網站性能優化，雅虎軍規24條！

雅虎Best Practices for Speeding Up Your Web Site：

content方面

減小HTTP請求：合併文件、CSS精靈、inline Image 減小DNS查詢：DNS查詢完成以前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分佈到恰當數量的主機名，平衡並行下載和DNS查詢 避免重定向：多餘的中間訪問 使Ajax可緩存 非必須組件延遲加載 將來所需組件預加載 減小DOM元素數量 將資源放到不一樣的域下：瀏覽器同時從一個域下載資源的數目有限，增長域能夠提升並行下載量 減小iframe數量 不要404

Server方面

使用CDN 添加Expires或者Cache-Control響應頭 對組件使用Gzip壓縮 配置ETag Flush Buffer Early Ajax使用GET進行請求 避免空src的img標籤

Cookie方面

減少cookie大小 引入資源的域名不要包含cookie

css方面

將樣式表放到頁面頂部 不使用CSS表達式 使用不使用@import 不使用IE的Filter

Javascript方面

將腳本放到頁面底部 將javascript和css從外部引入 壓縮javascript和css 刪除不須要的腳本 減小DOM訪問 合理設計事件監聽器

圖片方面

優化圖片：根據實際顏色須要選擇色深、壓縮 優化css精靈 不要在HTML中拉伸圖片 保證favicon.ico小而且可緩存

移動方面

保證組件小於25k Pack Components into a Multipart Document

對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO。向前端優化指的是，在不影響功能和體驗的狀況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減小數據庫操做指減小更新次數、緩存結果減小查詢次數、將數據庫執行的操做盡量的讓你的程序完成（例如join查詢），減小磁盤IO指儘可能不使用文件系統做爲緩存、減小讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是沒法「優化」的。

http狀態碼有那些？分別表明是什麼意思？

100-199 用於指定客戶端應相應的某些動做。
200-299 用於表示請求成功。
300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。
400-499 用於指出客戶端的錯誤。400    一、語義有誤，當前請求沒法被服務器理解。401   當前請求須要用戶驗證 403  服務器已經理解請求，可是拒絕執行它。
500-599 用於支持服務器錯誤。 503 – 服務不可用

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

查找瀏覽器緩存
    DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
    進行HTTP協議會話
    客戶端發送報頭(請求報頭)
    服務器回饋報頭(響應報頭)
    html文檔開始下載
    文檔樹創建，根據標記請求所需指定MIME類型的文件
    文件顯示
    [
    瀏覽器這邊作的工做大體分爲如下幾步：

    加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。

    解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（好比HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）
    }

除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？

你經常使用的開發工具是什麼，爲何？

對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。
    一、實現界面交互
    二、提高用戶體驗
    三、有了Node.js，前端能夠實現服務端的一些事情


前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

 參與項目，快速高質量完成實現效果圖，精確到1px；

 與團隊成員，UI設計，產品經理的溝通；

 作好的頁面結構，頁面重構和用戶體驗；
 處理hack，兼容、寫出優美的代碼格式；


 針對服務器的優化、擁抱最新前端技術。

加班的見解？

加班就像借錢，原則應當是------救急不救窮

平時如何管理你的項目？

先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；

        編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

        標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

        頁面進行標註（例如 頁面 模塊 開始和結束）；

        CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；

        JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。

        圖片採用整合的 images.png png8 格式文件使用 儘可能整合在一塊兒使用方便未來的管理

如何設計突發大規模併發架構？

說說最近最流行的一些東西吧？常去哪些網站？

Node.js、Mongodb、npm、MVVM、MEAN、three.js

移動端（Android IOS）怎麼作好用戶體驗?

清晰的視覺縱線、信息的分組、極致的減法、
    利用選擇代替輸入、標籤及文字的排布方式、
    依靠明文確認密碼、合理的鍵盤利用、

你在如今的團隊處於什麼樣的角色，起到了什麼明顯的做用？

你認爲怎樣纔是全端工程師（Full Stack developer）？

介紹一個你最得意的做品吧？

你的優勢是什麼？缺點是什麼？

如何管理前端團隊?

最近在學什麼？能談談你將來3，5年給本身的規劃嗎？

想問公司的問題？

問公司問題：
    目前關注哪些最新的Web前端技術（將來的發展方向）？
    前端團隊如何工做的（實現一個產品的流程）？
    公司的薪資結構是什麼樣子的？

前端學習網站推薦

1. 極客標籤：     http://www.gbtags.com/
2. 掘金：     　　https://juejin.im/
3. 前端週刊：     http://www.feweekly.com/issues
4. 慕課網：       http://www.imooc.com/
5. Segmentfault：https://segmentfault.com/
6. Hacker News： https://news.ycombinator.com/news
7. InfoQ：       http://www.infoq.com/
8. w3cplus：     http://www.w3cplus.com/
9. Stack Overflow： http://stackoverflow.com/
10.w3school：    http://www.w3school.com.cn/
11.mozilla：     https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

文檔推薦

1. jQuery 基本原理

2. JavaScript 祕密花園

3. CSS參考手冊

（內容7）——————