樓主總結了一些關于前端面試時技能點的知識點：里面的知識都是從互聯(lián)網(wǎng)上找到的楞捂。
1、熟練使用HTML/CSS趋厉，能夠手寫符合W3C標準的頁面寨闹，能夠兼容主流瀏覽器，可以精確還原設計圖君账；
瀏覽器兼容問題：
瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同
問題癥狀：隨便寫幾個標簽繁堡，不加樣式控制的情況下，各自的margin 和padding差異較大乡数。
碰到頻率:100%
解決方案：CSS里 *{margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題帖蔓，幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。
瀏覽器兼容問題二：塊屬性標簽float后瞳脓，又有橫行的margin情況下塑娇，在IE6顯示margin比設置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>
碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備注：我們最常用的就是div+CSS布局了劫侧，而div就是一個典型的塊屬性標簽埋酬，橫向布局的時候我們通常都是用div float實現(xiàn)的，橫向的間距設置如果用margin實現(xiàn)烧栋，這就是一個必然會碰到的兼容性問題写妥。
瀏覽器兼容問題三：設置較小高度標簽（一般小于10px），在IE6审姓，IE7珍特，遨游中高度超出自己設置高度
問題癥狀：IE6、7和遨游里這個標簽的高度不受控制魔吐，超出自己設置的高度
碰到頻率：60%
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度扎筒。
備注：這種情況一般出現(xiàn)在我們設置小圓角背景的標簽里。出現(xiàn)這個問題的原因是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系統(tǒng)前端開時歪沃，有很多情況下我們又這種需求。當內容小于一個值（如300px）時嫌松。容器的高度為300px沪曙；當內容高度大于這個值時，容器高度被撐高萎羔，而不是出現(xiàn)滾動條液走。這時候我們就會面臨這個兼容性問題。
瀏覽器兼容問題七：透明度的兼容CSS設置
做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容贾陷，當然熟練到一定的程度就沒這么麻煩了缘眶。建議經(jīng)常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的昵宇，只要我們稍加設置都能輕松地解決這些兼容問題磅崭。如果我們熟悉標簽的默認屬性的話，就能很好的理解為什么會出現(xiàn)兼容問題以及怎么去解決這些兼容問題瓦哎。
- /* 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维咸；繼續(xù)往下讀剂买，他也認識heihgt惠爽， 所以當IE6讀到height:200px的時候會覆蓋掉前一條的相沖突設置，認為高度是200px瞬哼。繼續(xù)往下讀婚肆，IE6還認識_height,所以他又會覆蓋掉200px高的設置，把高度設置為100px坐慰；
IE7和遨游也是一樣的從高度300px的設置往下讀较性。當它們讀到*height200px的時候就停下了，因為它們不認識_height结胀。所以它們會把高度解析為200px赞咙，剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。因為優(yōu)先級相同且想沖突的屬性設置后一個會覆蓋掉前一個糟港，所以書寫的次序是很重要的攀操。
關于透明度兼容：
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 (不一定) */
2秸抚、深入理解JavaScript高級特性（如OOP速和、繼承、原型鏈耸别、閉包等）健芭，了解ES6新特性
OOP：面向對象是一種編程思想，用一句話來說秀姐，就是抽象封裝繼承多態(tài)慈迈。
繼承：有四種：
1、原型鏈繼承
2省有、構造函數(shù)繼承
3痒留、組合繼承
4、冒充對象繼承
原型鏈：
有限的實例對象和原型之間組成有限鏈蠢沿，就是用來實現(xiàn)共享屬性和繼承的
閉包：
1伸头、有權訪問另一個函數(shù)作用域內變量的函數(shù)都是閉包
2、閉包的作用:
（1）舷蟀、形成隔離的封閉空間
（2）恤磷、延長變量的生命周期（正常情況下，函數(shù)調用結束之后野宜，那么函數(shù)內部的變量都會被銷毀）
（3）扫步、緩存數(shù)據(jù)
3、缺點：
（1）消耗內存
（2）內存泄漏：閉包匈子，全局變量河胎，沒有清理的DOM元素引用，被遺忘的定時器回調
ES6新特性：
（1）塊級作用域
（2）關鍵字
（3）變量解構賦值
（4）字符串的擴展
（5）數(shù)組擴展
（6）函數(shù)擴展
3虎敦、熟練使用Ajax進行前后臺數(shù)據(jù)交互游岳，熟練使用JSONP解決瀏覽器常見的跨域請求問題
var xhr =null;//創(chuàng)建對象
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(“方式”,”地址”,”標志位”);//初始化請求
xhr.setRequestHeader(“”,””);//設置http頭信息
xhr.onreadystatechange =function(){}//指定回調函數(shù)
xhr.send();//發(fā)送請求
Ajax原生代碼：
// 1.實例化對象
var xhr = new XMLHttpRequest();
// 2.設置請求行(請求方式,請求地址) 要使用open方法來設置
// false代表不是異步 是同步 已經(jīng)被棄用
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.監(jiān)聽并處理響應
// xhr.onreadystatechange=function(){
// if(xhr.readyState == 4 && xhr.status== 200){
// // document.querySelector('p').innerHTML +=xhr.responseText;
// console.log(xhr.responseText);
// }
- 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調用對象
- 創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法政敢、URL及驗證信息
- 設置響應HTTP請求狀態(tài)變化的函數(shù)
- 發(fā)送HTTP請求
- 獲取異步調用返回的數(shù)據(jù)
- 使用JavaScript和DOM實現(xiàn)局部刷新
優(yōu)點：
Ajax可以實現(xiàn)異步通信效果，實現(xiàn)頁面局部刷新胚迫，帶來更好的用戶體驗喷户；按需獲取數(shù)據(jù)，節(jié)約帶寬資源晌区；
缺點：
1摩骨、ajax不支持瀏覽器back按鈕。
2朗若、安全問題 AJAX暴露了與服務器交互的細節(jié)恼五。
3、對搜索引擎的支持比較弱哭懈。
4灾馒、破壞了程序的異常機制。
get和post（ajax版本）
get一般用來進行查詢操作遣总，url地址有長度限制睬罗，請求的參數(shù)都暴露在url地址當中，如果傳遞中文參數(shù)旭斥，需要自己進行編碼操作容达，安全性較低。
post請求方式主要用來提交數(shù)據(jù)垂券，沒有數(shù)據(jù)長度的限制花盐，提交的數(shù)據(jù)內容存在于http請求體中，數(shù)據(jù)不會暴漏在url地址中菇爪。
JSONP:
Jsonp并不是一種數(shù)據(jù)格式算芯，而json是一種數(shù)據(jù)格式，jsonp是用來解決跨域獲取數(shù)據(jù)的一種解決方案凳宙，具體是通過動態(tài)創(chuàng)建script標簽熙揍，然后通過標簽的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數(shù)調用氏涩，參數(shù)就是服務器返回的數(shù)據(jù)届囚，為了處理這些返回的數(shù)據(jù)，需要事先在頁面定義好回調函數(shù)是尖，本質上使用的并不是ajax技術
Ajax是全稱是asynchronous JavaScript andXML奖亚，即異步JavaScript和xml，用于在Web頁面中實現(xiàn)異步數(shù)據(jù)交互析砸，實現(xiàn)頁面局部刷新。
優(yōu)點：可以使得頁面不重載全部內容的情況下加載局部內容爆袍，降低數(shù)據(jù)傳輸量首繁，避免用戶不斷刷新或者跳轉頁面作郭，提高用戶體驗
缺點：對搜索引擎不友好；要實現(xiàn)ajax下的前后退功能成本較大弦疮；可能造成請求數(shù)的增加跨域問題限制夹攒；
JSON是一種輕量級的數(shù)據(jù)交換格式，ECMA的一個子集
優(yōu)點：輕量級胁塞、易于人的閱讀和編寫咏尝，便于機器（JavaScript）解析，支持復合數(shù)據(jù)類型（數(shù)組啸罢、對象编检、字符串、數(shù)字）
原生代碼：
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前端框架，能夠開發(fā)響應式頁面
模態(tài)框衩匣。分頁蕾总。字體。遮罩層琅捏。下拉框生百。TAB欄
響應式布局是關于網(wǎng)頁制作的過程中讓不同的設備有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些設備上讓網(wǎng)站運行正常
5柄延、對前端模塊化有一定的了解蚀浆，對less等預處理有一定的了解
模塊化：
一個模塊就是實現(xiàn)特定功能的文件，有了模塊拦焚，我們就可以更方便地使用別人的代碼蜡坊，想要什么功能，就加載什么模塊赎败。
less和sass是動態(tài)的樣式語言秕衙，是CSS預處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS僵刮。
變量符不一樣据忘，less是@，而Sass是$;
Sass支持條件語句搞糕，可以使用if{}else{},for{}循環(huán)等等勇吊。而Less不支持;
Sass是基于Ruby的，是在服務端處理的窍仰，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器
Less 是一門 CSS 預處理語言汉规，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）针史、函數(shù)等功能晶伦，讓 CSS 更易維護、方便制作主題啄枕、擴充婚陪。
6、熟悉主流模板引擎频祝、并熟練操作arttemplate和xtemplate
客戶端渲染路線：1. 請求一個html -> 2. 服務端返回一個html -> 3. 瀏覽器下載html里面的js/css文件 -> 4. 等待js文件下載完成 -> 5. 等待js加載并初始化完成 -> 6. js代碼終于可以運行泌参，由js代碼向后端請求數(shù)據(jù)( ajax/fetch ) -> 7. 等待后端數(shù)據(jù)返回 -> 8. 客戶端從無到完整地，把數(shù)據(jù)渲染為響應頁面
服務端渲染路線：2. 請求一個html -> 2. 服務端請求數(shù)據(jù)( 內網(wǎng)請求快 ) -> 3. 服務器初始渲染（服務端性能好常空，較快） -> 4. 服務端返回已經(jīng)有正確內容的頁面 -> 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這樣就建立了關聯(lián)攘残。（-u的作用就是建立了跟蹤分支,只需要第一次使用，以后可以直接git push）
git remote show origin看出每一個別名的地址是什么
8为狸、熟練使用Angular歼郭，理解MVC、MVVM開發(fā)模式和SPA程序開發(fā)
MVC是一種開發(fā)模式辐棒，由模型（Model）病曾、視圖（View）、控制器（Controller）3部分構成漾根，采用這種開發(fā)模式為合理組織代碼提供了方便泰涂、降低了代碼間的耦合度、功能結構清晰可見辐怕。
模型（Model）一般用來處理數(shù)據(jù)（讀取/設置）逼蒙，一般指操作數(shù)據(jù)庫。
視圖（View）一般用來展示數(shù)據(jù)寄疏，比如通過HTML展示是牢。
控制器（Controller）一般用做連接模型和視圖的橋梁。
單頁面應用（SPA）：
SPA（Single Page Application）指的是通單一頁面展示所有功能陕截，通過Ajax動態(tài)獲取數(shù)據(jù)然后進行實時渲染驳棱，結合CSS3動畫模仿原生App交互，然后再進行打包（使用工具把Web應用包一個殼农曲，這個殼本質上是瀏覽器）變成一個“原生”應用社搅。
在PC端也有廣泛的應用，通常情況下使用Ajax異步請求數(shù)據(jù)，然后實現(xiàn)內容局部刷新罚渐，局部刷新的本質是動態(tài)生成DOM却汉，新生成的DOM元素并沒有真實存在于文檔中，所以當再次刷新頁面時新添加的DOM元素會“丟失”荷并，通過單頁面應可以很好的解決這個問題。
9青扔、熟練使用前端基礎類庫源织，如jQuery
（1）事件操作
（2）DOM樣式操作
（3）標簽獲取
10、對Web前端技術有強烈興趣微猖，對Node.js有一定的使用經(jīng)驗谈息；
NodeJS
是一個運行環(huán)境，其使用了一個事件驅動凛剥、非阻塞式（異步） I/O的模型侠仇，使其輕量又高效
宿主環(huán)境
ECMAScript語法規(guī)則，需要不同版本實現(xiàn)犁珠。如果說ECMAScript運行在瀏覽器逻炊，稱為javascript，簡稱JS犁享。如果說ECMAScript運行flash環(huán)境余素，稱為ActionScript，簡稱AS炊昆。如果ECMAScript運行在Node環(huán)境桨吊，稱為Nodejs。這個環(huán)境就是宿主環(huán)境凤巨。必須依賴于某個環(huán)境视乐，ECMAScript需要“寄生在某一宿主環(huán)境”。
11敢茁、熟練使用HTML5和CSS3相關技術開發(fā)移動端和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 長期存儲數(shù)據(jù)卷要，瀏覽器關閉后數(shù)據(jù)不丟失渣聚，而sessionStorage的數(shù)據(jù)在瀏覽器關閉后自動刪除，此外僧叉，還新增了以下的幾大類元素奕枝。
內容元素，article瓶堕、footer隘道、header、nav、section谭梗。
表單控件忘晤，calendar激捏、date设塔、time、email、url序六、search。
控件元素裁着，webworker, websockt, Geolocation繁涂。
移出的元素有下列這些：
顯現(xiàn)層元素：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網(wǎng)站倔矾，以indexhtml為主頁，該主頁使用index.manifest文件為manifest文件柱锹，在該文件中請求本地緩存index.html哪自、hello.js、hello.jpg禁熏、hello2.jpg這幾個資源文件壤巷。
- 首次訪問http://danYoo網(wǎng)站時，它們的交互過程如下所示：
①瀏覽器請求訪問http://danYoo
②服務器返回index.html網(wǎng)頁
③瀏覽器解析index.html網(wǎng)頁瞧毙，請求頁面上所有資源文件胧华，包括HTML文件寄症、圖像文件、CSS文件矩动、JavaScript腳本文件有巧，以及manifest文件
④服務器返回所有資源文件
⑤瀏覽器處理manifest文件，請求manifest中所有要求本地緩存的文件悲没，包括index.html頁面本身篮迎，即使剛才已經(jīng)請求過這些文件。如果你要求本地緩存所有文件檀训，這將是一個比較大的重復的請求過程柑潦。
⑥服務器返回所有要求本地緩存的文件
⑦瀏覽器對本地緩存進行更新，存入包括頁面本身在內的所有要求本地緩存的資源文件峻凫，并且觸發(fā)一個事件，通知本地緩存被更新览露。 - 如果再次打開瀏覽器訪問http://danYoo網(wǎng)站荧琼，而且manifest文件沒有修改過
①瀏覽器再次請求訪問http://danYoo
②瀏覽器發(fā)現(xiàn)這個網(wǎng)頁被本地緩存，于是使用本地緩存中index.html頁面
③瀏覽器解析index.html頁面差牛，使用所有本地緩存中的資源文件.
④瀏覽器向服務器請求manifest文件
⑤服務器返回一個304代碼命锄，通知瀏覽器manifest沒有發(fā)生變化
只要頁面上的資源文件被本地緩存過，下次瀏覽器打開這個頁面時，總是先使用本地緩存中的資源，然后請求manifest文件 - 如果再次打開瀏覽器時manifest文件已經(jīng)被更新過了剑肯，那么瀏覽器與服務器之間的交互如下：
①瀏覽器再次請求訪問http://danYoo
②瀏覽器發(fā)現(xiàn)這個頁面被本地緩存斟或，于是使用本地緩存中的index.html頁面
③瀏覽器解析index.html頁面，使用所有本地緩沖中的資源文件
④瀏覽器向服務器請求manifest文件
⑤服務器返回更新過的manifest文件
⑥瀏覽器處理manifest文件殊轴，發(fā)現(xiàn)該文件已被更新，于是請求所有要求進行本地緩存的資源文件，包括indexhtml頁面本身
⑦瀏覽器返回要求進行本地緩存的資源文件
⑧瀏覽器對本地緩存進行更新骗污，存入所以新的資源文件。并且觸發(fā)一個事件沈条，通知本地緩存被更新
需要注意的是需忿，即使資源文件被修改過了，在上面的第3中已經(jīng)裝入的資源文件是不會發(fā)生變化的蜡歹，譬如圖片不會突然變成新的圖片屋厘，腳本文件也不會突然使用新的腳本文件，也就是說月而，這時更新過后的本地緩存中的內容還不能被使用汗洒，只有重新打開這個頁面的時候才會使用更新過后的資源文件。另外景鼠，如果你不想修改manifest文件中對于資源文件的設置仲翎，但是你對服務器上請求緩存的資源文件進行了修改痹扇，那么你可以通過修改版本號的方式來讓瀏覽器認為imanifest文件已經(jīng)被更新過了，以便重新下載修改過的資源文件溯香。
額外：
12鲫构、H5C3快速搭建頁面布局
HTML5/CSS3響應式布局介紹及設計流程，利用css3的media query媒體查詢功能玫坛。
確定需要兼容的設備類型结笨、屏幕尺寸
專業(yè)技能整理1
制作線框原型
測試線框原型
視覺設計
前端實現(xiàn)
13、懶加載
1湿镀、大型的電商網(wǎng)站的一個頁面上有大量的圖片炕吸，加載很面。解決辦法：
（1）圖片懶加載勉痴，在頁面的未可是區(qū)域添加一個滾動條事件赫模。判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者蒸矛，有限加載
（2）如果為幻燈片瀑罗、相冊等，可以使用圖片預加載技術雏掠，將當前展示圖片的前一張和后一張優(yōu)先下載斩祭。
（3）如果圖片為css圖片，可以使用CSSsprite乡话、SVGsprite摧玫、Iconfont、Base64等技術绑青。
（4）當圖片過大诬像，可以使用特殊編碼的圖片，加載時會先加載一張亞索的特別厲害的縮略圖时迫，以提高用戶體驗颅停。
（5）如果圖片展示區(qū)域小于圖片的真實大小，則因在服務器端根據(jù)業(yè)務需要先行進行圖片壓縮掠拳，圖片壓縮后大小與展示一致癞揉。
