樓主總結了一些關於前端面試時技能點的知識點：里面的知識都是從互聯網上找到的。
1、熟練使用HTML/CSS，能夠手寫符合W3C標准的頁面，能夠兼容主流瀏覽器，可以精確還原設計圖；
瀏覽器兼容問題：
瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同
問題症狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 *{margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。
瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題症狀:常見症狀是IE6中后面的一塊被頂到下一行
碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
瀏覽器兼容問題三：設置較小高度標簽（一般小於10px），在IE6，IE7，遨游中高度超出自己設置高度
問題症狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度
碰到頻率：60%
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。
瀏覽器兼容問題四：行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug
問題症狀：IE6里的間距比超過設置的間距
碰到幾率：20%
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局並有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:talbe。
瀏覽器兼容問題五：圖片默認有間距
問題症狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）
瀏覽器兼容問題六：標簽最低高度設置min-height不兼容
問題症狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備注：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
瀏覽器兼容問題七：透明度的兼容CSS設置
做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這么麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的，只要我們稍加設置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話，就能很好的理解為什么會出現兼容問題以及怎么去解決這些兼容問題。
- /* CSS hack*/
我很少使用hacker的，可能是個人習慣吧，我不喜歡寫的代碼IE不兼容，然后用hack來解決。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分為3類：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）
◆IE6認識的hacker 是下划線_ 和星號 *
◆IE7 遨游認識的hacker是星號 *
比如這樣一個CSS設置：
- height:300px;*height:200px;_height:100px;
IE6瀏覽器在讀到height:300px的時候會認為高時300px；繼續往下讀，他也認識*heihgt， 所以當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認為高度是200px。繼續往下讀，IE6還認識_height,所以他又會覆蓋掉200px高的設置，把高度設置為100px；
IE7和遨游也是一樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px，剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。因為優先級相同且想沖突的屬性設置后一個會覆蓋掉前一個，所以書寫的次序是很重要的。
關於透明度兼容：
function setAlphaOpacity(elm,value){
elm=typeof elm=="string"?document.getElementById(elm):elm;
if(document.all){ //IE
elm.style.filter='alpha(opacity='+value+')';
}else{ //FF
elm.style.opacity=value/100;
}
}
瀏覽器引擎前綴(Vendor Prefix)有哪些？
-moz- /* 火狐等使用Mozilla瀏覽器引擎的瀏覽器 */
-webkit- /* Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器 */
-o- /* Opera瀏覽器(早期) */
-ms- /* Internet Explorer (不一定) */
-webkit- /* Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器 */
-o- /* Opera瀏覽器(早期) */
-ms- /* Internet Explorer (不一定) */
2、深入理解JavaScript高級特性（如OOP、繼承、原型鏈、閉包等），了解ES6新特性
OOP：面向對象是一種編程思想，用一句話來說，就是抽象封裝繼承多態。
繼承：有四種：
1、原型鏈繼承
2、構造函數繼承
3、組合繼承
4、冒充對象繼承
原型鏈：
有限的實例對象和原型之間組成有限鏈，就是用來實現共享屬性和繼承的
閉包：
1、有權訪問另一個函數作用域內變量的函數都是閉包
2、閉包的作用:
（1）、形成隔離的封閉空間
（2）、延長變量的生命周期（正常情況下，函數調用結束之后，那么函數內部的變量都會被銷毀）
（3）、緩存數據
3、缺點：
（1）消耗內存
（2）內存泄漏：閉包，全局變量，沒有清理的DOM元素引用，被遺忘的定時器回調
ES6新特性：
（1）塊級作用域
（2）關鍵字
（3）變量解構賦值
（4）字符串的擴展
（5）數組擴展
（6）函數擴展
3、熟練使用Ajax進行前后台數據交互，熟練使用JSONP解決瀏覽器常見的跨域請求問題
var xhr =null;//創建對象
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(“方式”,”地址”,”標志位”);//初始化請求
xhr.setRequestHeader(“”,””);//設置http頭信息
xhr.onreadystatechange =function(){}//指定回調函數
xhr.send();//發送請求
Ajax原生代碼：
// 1.實例化對象
var xhr = new XMLHttpRequest();
// 2.設置請求行(請求方式,請求地址) 要使用open方法來設置
// false代表不是異步 是同步 已經被棄用
xhr.open('post','./anync.php',true);
// 3.設置請求頭(post請求必須寫這樣的請求頭)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 4.設置請求正文 格式:key=value&key=value
xhr.send('username=wanlum&password=1314520');
// 5.監聽並處理響應
// xhr.onreadystatechange=function(){
// if(xhr.readyState == 4 && xhr.status== 200){
// // document.querySelector('p').innerHTML +=xhr.responseText;
// console.log(xhr.responseText);
// }
1. 創建XMLHttpRequest對象,也就是創建一個異步調用對象
2. 創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
3. 設置響應HTTP請求狀態變化的函數
4. 發送HTTP請求
5. 獲取異步調用返回的數據
6. 使用JavaScript和DOM實現局部刷新
優點：
Ajax可以實現異步通信效果，實現頁面局部刷新，帶來更好的用戶體驗；按需獲取數據，節約帶寬資源；
缺點：
1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務器交互的細節。
3、對搜索引擎的支持比較弱。
4、破壞了程序的異常機制。
get和post（ajax版本）
get一般用來進行查詢操作，url地址有長度限制，請求的參數都暴露在url地址當中，如果傳遞中文參數，需要自己進行編碼操作，安全性較低。
post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在於http請求體中，數據不會暴漏在url地址中。
JSONP:
Jsonp並不是一種數據格式，而json是一種數據格式，jsonp是用來解決跨域獲取數據的一種解決方案，具體是通過動態創建script標簽，然后通過標簽的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數調用，參數就是服務器返回的數據，為了處理這些返回的數據，需要事先在頁面定義好回調函數，本質上使用的並不是ajax技術
Ajax是全稱是asynchronous JavaScript andXML，即異步JavaScript和xml，用於在Web頁面中實現異步數據交互，實現頁面局部刷新。
優點：可以使得頁面不重載全部內容的情況下加載局部內容，降低數據傳輸量，避免用戶不斷刷新或者跳轉頁面，提高用戶體驗
缺點：對搜索引擎不友好；要實現ajax下的前后退功能成本較大；可能造成請求數的增加跨域問題限制；
JSON是一種輕量級的數據交換格式，ECMA的一個子集
優點：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支持復合數據類型（數組、對象、字符串、數字）
原生代碼：
function myJsonp(url,data,callback){
var fnName = "myJsonp_" + Math.random().toString().replace('.','');
window[fnName] = callback;
var querystring = '';
for(var attr in data){
querystring += attr + '=' + data[attr] + '&'
}
var script = document.createElement('script');
script.src = url + '?' + querystring + 'callback='+ fnName;
script.onload = function(){
document.body.removeChild(script);
}
document.body.appendChild(script);
}
4、熟悉流式布局和響應式布局原理，熟悉Bootstrap前端框架，能夠開發響應式頁面
模態框。分頁。字體。遮罩層。下拉框。TAB欄
響應式布局是關於網頁制作的過程中讓不同的設備有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些設備上讓網站運行正常
5、對前端模塊化有一定的了解，對less等預處理有一定的了解
模塊化：
一個模塊就是實現特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。
less和sass是動態的樣式語言，是CSS預處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。
變量符不一樣，less是@，而Sass是$;
Sass支持條件語句，可以使用if{}else{},for{}循環等等。而Less不支持;
Sass是基於Ruby的，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器
Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便制作主題、擴充。
6、熟悉主流模板引擎、並熟練操作arttemplate和xtemplate
客戶端渲染路線：1. 請求一個html -> 2. 服務端返回一個html -> 3. 瀏覽器下載html里面的js/css文件 -> 4. 等待js文件下載完成 -> 5. 等待js加載並初始化完成 -> 6. js代碼終於可以運行，由js代碼向后端請求數據( ajax/fetch ) -> 7. 等待后端數據返回 -> 8. 客戶端從無到完整地，把數據渲染為響應頁面
服務端渲染路線：2. 請求一個html -> 2. 服務端請求數據( 內網請求快 ) -> 3. 服務器初始渲染（服務端性能好，較快） -> 4. 服務端返回已經有正確內容的頁面 -> 5. 客戶端請求js/css文件 -> 6. 等待js文件下載完成 -> 7. 等待js加載並初始化完成 -> 8. 客戶端把剩下一部分渲染完成( 內容小，渲染快 )
7、使用git、gulp對代碼進行管理和構建，npm、bower等依賴管理工具
給遠程倉庫地址起一個別名
git remote add abc ../../hello.git
這個克隆的名字默認是origin。
克隆下的項目會自動建立跟蹤分支（git push 或者 git pull）
git remote查看有哪些遠程地址的別名
這時候如果為空則需要自己加
git remote add abc ../../hello.git
更新一下
git pull origin master
想要直接推
git push -u origin master這樣就建立了關聯。（-u的作用就是建立了跟蹤分支,只需要第一次使用，以后可以直接git push）
git remote show origin看出每一個別名的地址是什么
8、熟練使用Angular，理解MVC、MVVM開發模式和SPA程序開發
MVC是一種開發模式，由模型（Model）、視圖（View）、控制器（Controller）3部分構成，采用這種開發模式為合理組織代碼提供了方便、降低了代碼間的耦合度、功能結構清晰可見。
模型（Model）一般用來處理數據（讀取/設置），一般指操作數據庫。
視圖（View）一般用來展示數據，比如通過HTML展示。
控制器（Controller）一般用做連接模型和視圖的橋梁。
單頁面應用（SPA）：
SPA（Single Page Application）指的是通單一頁面展示所有功能，通過Ajax動態獲取數據然后進行實時渲染，結合CSS3動畫模仿原生App交互，然后再進行打包（使用工具把Web應用包一個殼，這個殼本質上是瀏覽器）變成一個“原生”應用。
在PC端也有廣泛的應用，通常情況下使用Ajax異步請求數據，然后實現內容局部刷新，局部刷新的本質是動態生成DOM，新生成的DOM元素並沒有真實存在於文檔中，所以當再次刷新頁面時新添加的DOM元素會“丟失”，通過單頁面應可以很好的解決這個問題。
9、熟練使用前端基礎類庫，如jQuery
（1）事件操作
（2）DOM樣式操作
（3）標簽獲取
10、對Web前端技術有強烈興趣，對Node.js有一定的使用經驗；
NodeJS
是一個運行環境，其使用了一個事件驅動、非阻塞式（異步） I/O的模型，使其輕量又高效
宿主環境
ECMAScript語法規則，需要不同版本實現。如果說ECMAScript運行在瀏覽器，稱為javascript，簡稱JS。如果說ECMAScript運行flash環境，稱為ActionScript，簡稱AS。如果ECMAScript運行在Node環境，稱為Nodejs。這個環境就是宿主環境。必須依賴於某個環境，ECMAScript需要“寄生在某一宿主環境”。
11、熟練使用HTML5和CSS3相關技術開發移動端和PC端前端應用
H5 C3的新屬性
HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio...
CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image,
border-color, transform...;
新增的元素有繪畫 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。
css3:
gradient：gradient(linear,0% 0%,100% 0%,form(red),to(balck))
transform
Transition：property duration timing-function delay
animation
12、了解瀏覽器和服務器的交互
譬如一個http://danYoo網站，以indexhtml為主頁，該主頁使用index.manifest文件為manifest文件，在該文件中請求本地緩存index.html、hello.js、hello.jpg、hello2.jpg這幾個資源文件。
1) 首次訪問http://danYoo網站時，它們的交互過程如下所示：
①瀏覽器請求訪問http://danYoo
②服務器返回index.html網頁
③瀏覽器解析index.html網頁，請求頁面上所有資源文件，包括HTML文件、圖像文件、CSS文件、JavaScript腳本文件，以及manifest文件
④服務器返回所有資源文件
⑤瀏覽器處理manifest文件，請求manifest中所有要求本地緩存的文件，包括index.html頁面本身，即使剛才已經請求過這些文件。如果你要求本地緩存所有文件，這將是一個比較大的重復的請求過程。
⑥服務器返回所有要求本地緩存的文件
⑦瀏覽器對本地緩存進行更新，存入包括頁面本身在內的所有要求本地緩存的資源文件，並且觸發一個事件，通知本地緩存被更新。
2) 如果再次打開瀏覽器訪問http://danYoo網站，而且manifest文件沒有修改過
①瀏覽器再次請求訪問http://danYoo
②瀏覽器發現這個網頁被本地緩存，於是使用本地緩存中index.html頁面
③瀏覽器解析index.html頁面，使用所有本地緩存中的資源文件.
④瀏覽器向服務器請求manifest文件
⑤服務器返回一個304代碼，通知瀏覽器manifest沒有發生變化
只要頁面上的資源文件被本地緩存過，下次瀏覽器打開這個頁面時，總是先使用本地緩存中的資源，然后請求manifest文件
3) 如果再次打開瀏覽器時manifest文件已經被更新過了，那么瀏覽器與服務器之間的交互如下：
①瀏覽器再次請求訪問http://danYoo
②瀏覽器發現這個頁面被本地緩存，於是使用本地緩存中的index.html頁面
③瀏覽器解析index.html頁面，使用所有本地緩沖中的資源文件
④瀏覽器向服務器請求manifest文件
⑤服務器返回更新過的manifest文件
⑥瀏覽器處理manifest文件，發現該文件已被更新，於是請求所有要求進行本地緩存的資源文件，包括indexhtml頁面本身
⑦瀏覽器返回要求進行本地緩存的資源文件
⑧瀏覽器對本地緩存進行更新，存入所以新的資源文件。並且觸發一個事件，通知本地緩存被更新
需要注意的是，即使資源文件被修改過了，在上面的第3中已經裝入的資源文件是不會發生變化的，譬如圖片不會突然變成新的圖片，腳本文件也不會突然使用新的腳本文件，也就是說，這時更新過后的本地緩存中的內容還不能被使用，只有重新打開這個頁面的時候才會使用更新過后的資源文件。另外，如果你不想修改manifest文件中對於資源文件的設置，但是你對服務器上請求緩存的資源文件進行了修改，那么你可以通過修改版本號的方式來讓瀏覽器認為imanifest文件已經被更新過了，以便重新下載修改過的資源文件。
------
額外：
12、H5C3快速搭建頁面布局
HTML5/CSS3響應式布局介紹及設計流程，利用css3的media query媒體查詢功能。
確定需要兼容的設備類型、屏幕尺寸
專業技能整理1
制作線框原型
測試線框原型
視覺設計
前端實現
13、懶加載
1、大型的電商網站的一個頁面上有大量的圖片，加載很面。解決辦法：
（1）圖片懶加載，在頁面的未可是區域添加一個滾動條事件。判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於后者，有限加載
（2）如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載。
（3）如果圖片為css圖片，可以使用CSSsprite、SVGsprite、Iconfont、Base64等技術。
（4）當圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張亞索的特別厲害的縮略圖，以提高用戶體驗。
（5）如果圖片展示區域小於圖片的真實大小，則因在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮后大小與展示一致。