樓主總結(jié)了一些關(guān)于前端面試時(shí)技能點(diǎn)的知識(shí)點(diǎn)：里面的知識(shí)都是從互聯(lián)網(wǎng)上找到的。

1、熟練使用HTML/CSS，能夠手寫符合W3C標(biāo)準(zhǔn)的頁面，能夠兼容主流瀏覽器，可以精確還原設(shè)計(jì)圖；

瀏覽器兼容問題：

瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同

問題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

解決方案：CSS里 *{margin:0;padding:0;}

備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會(huì)用通配符*來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0。

瀏覽器兼容問題二：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大

問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>

碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁面都會(huì)碰到，float布局最常見的瀏覽器兼容問題）

解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性

備注：我們最常用的就是div+CSS布局了，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會(huì)碰到的兼容性問題。

瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度

問題癥狀：IE6、7和遨游里這個(gè)標(biāo)簽的高度不受控制，超出自己設(shè)置的高度

碰到頻率：60%

解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。

備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高。

瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug

問題癥狀：IE6里的間距比超過設(shè)置的間距

碰到幾率：20%

解決方案：在display:block;后面加入display:inline;display:table;

備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽，所以我們?cè)偌由蟙isplay:inline的話，它的高寬就不可設(shè)了。這時(shí)候我們還需要在display:inline后面加入display:talbe。

瀏覽器兼容問題五：圖片默認(rèn)有間距

問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。

碰到幾率：20%

解決方案：使用float屬性為img布局

備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。去掉這個(gè)間距使用float是正道。（我的一個(gè)學(xué)生使用負(fù)margin，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）

瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容

問題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的CSS屬性，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容

碰到幾率：5%

解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

備注：在B/S系統(tǒng)前端開時(shí)，有很多情況下我們又這種需求。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)。容器的高度為300px；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)，容器高度被撐高，而不是出現(xiàn)滾動(dòng)條。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問題。

瀏覽器兼容問題七：透明度的兼容CSS設(shè)置

做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當(dāng)然熟練到一定的程度就沒這么麻煩了。建議經(jīng)常會(huì)碰到兼容性問題的新手使用。很多兼容性問題都是因?yàn)闉g覽器對(duì)標(biāo)簽的默認(rèn)屬性解析不同造成的，只要我們稍加設(shè)置都能輕松地解決這些兼容問題。如果我們熟悉標(biāo)簽的默認(rèn)屬性的話，就能很好的理解為什么會(huì)出現(xiàn)兼容問題以及怎么去解決這些兼容問題。

• /* CSS hack*/

我很少使用hacker的，可能是個(gè)人習(xí)慣吧，我不喜歡寫的代碼IE不兼容，然后用hack來解決。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分為3類：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）

◆IE6認(rèn)識(shí)的hacker 是下劃線_ 和星號(hào) *

◆IE7 遨游認(rèn)識(shí)的hacker是星號(hào) *

比如這樣一個(gè)CSS設(shè)置：

• height:300px;*height:200px;_height:100px;

IE6瀏覽器在讀到height:300px的時(shí)候會(huì)認(rèn)為高時(shí)300px；繼續(xù)往下讀，他也認(rèn)識(shí)heihgt， 所以當(dāng)IE6讀到height:200px的時(shí)候會(huì)覆蓋掉前一條的相沖突設(shè)置，認(rèn)為高度是200px。繼續(xù)往下讀，IE6還認(rèn)識(shí)_height,所以他又會(huì)覆蓋掉200px高的設(shè)置，把高度設(shè)置為100px；

IE7和遨游也是一樣的從高度300px的設(shè)置往下讀。當(dāng)它們讀到*height200px的時(shí)候就停下了，因?yàn)樗鼈儾徽J(rèn)識(shí)_height。所以它們會(huì)把高度解析為200px，剩下的瀏覽器只認(rèn)識(shí)第一個(gè)height:300px;所以他們會(huì)把高度解析為300px。因?yàn)閮?yōu)先級(jí)相同且想沖突的屬性設(shè)置后一個(gè)會(huì)覆蓋掉前一個(gè)，所以書寫的次序是很重要的。

關(guān)于透明度兼容：
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高級(jí)特性（如OOP、繼承、原型鏈、閉包等），了解ES6新特性

OOP：面向?qū)ο笫且环N編程思想，用一句話來說，就是抽象封裝繼承多態(tài)。

繼承：有四種：
1、原型鏈繼承
2、構(gòu)造函數(shù)繼承
3、組合繼承
4、冒充對(duì)象繼承

原型鏈：
有限的實(shí)例對(duì)象和原型之間組成有限鏈，就是用來實(shí)現(xiàn)共享屬性和繼承的

閉包：
1、有權(quán)訪問另一個(gè)函數(shù)作用域內(nèi)變量的函數(shù)都是閉包
2、閉包的作用:
（1）、形成隔離的封閉空間
（2）、延長變量的生命周期（正常情況下，函數(shù)調(diào)用結(jié)束之后，那么函數(shù)內(nèi)部的變量都會(huì)被銷毀）
（3）、緩存數(shù)據(jù)
3、缺點(diǎn)：
（1）消耗內(nèi)存
（2）內(nèi)存泄漏：閉包，全局變量，沒有清理的DOM元素引用，被遺忘的定時(shí)器回調(diào)

ES6新特性：
（1）塊級(jí)作用域
（2）關(guān)鍵字
（3）變量解構(gòu)賦值
（4）字符串的擴(kuò)展
（5）數(shù)組擴(kuò)展
（6）函數(shù)擴(kuò)展

3、熟練使用Ajax進(jìn)行前后臺(tái)數(shù)據(jù)交互，熟練使用JSONP解決瀏覽器常見的跨域請(qǐng)求問題

var xhr =null;//創(chuàng)建對(duì)象
if(window.XMLHttpRequest){
 xhr = new XMLHttpRequest();
}else{
 xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
 xhr.open(“方式”,”地址”,”標(biāo)志位”);//初始化請(qǐng)求
 xhr.setRequestHeader(“”,””);//設(shè)置http頭信息
 xhr.onreadystatechange =function(){}//指定回調(diào)函數(shù)
 xhr.send();//發(fā)送請(qǐng)求

Ajax原生代碼：
// 1.實(shí)例化對(duì)象
var xhr = new XMLHttpRequest();

// 2.設(shè)置請(qǐng)求行(請(qǐng)求方式,請(qǐng)求地址)  要使用open方法來設(shè)置
// false代表不是異步 是同步  已經(jīng)被棄用
xhr.open('post','./anync.php',true);

// 3.設(shè)置請(qǐng)求頭(post請(qǐng)求必須寫這樣的請(qǐng)求頭)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 4.設(shè)置請(qǐng)求正文 格式:key=value&key=value  

xhr.send('username=wanlum&password=1314520');

// 5.監(jiān)聽并處理響應(yīng)
// xhr.onreadystatechange=function(){
//   if(xhr.readyState == 4 && xhr.status== 200){
//     // document.querySelector('p').innerHTML +=xhr.responseText;
//     console.log(xhr.responseText);
//   }

1. 創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象
2. 創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息
3. 設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)
4. 發(fā)送HTTP請(qǐng)求
5. 獲取異步調(diào)用返回的數(shù)據(jù)
6. 使用JavaScript和DOM實(shí)現(xiàn)局部刷新
   優(yōu)點(diǎn)：
   Ajax可以實(shí)現(xiàn)異步通信效果，實(shí)現(xiàn)頁面局部刷新，帶來更好的用戶體驗(yàn)；按需獲取數(shù)據(jù)，節(jié)約帶寬資源；
   缺點(diǎn)：
   1、ajax不支持瀏覽器back按鈕。
   2、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
   3、對(duì)搜索引擎的支持比較弱。
   4、破壞了程序的異常機(jī)制。
   get和post（ajax版本）

get一般用來進(jìn)行查詢操作，url地址有長度限制，請(qǐng)求的參數(shù)都暴露在url地址當(dāng)中，如果傳遞中文參數(shù)，需要自己進(jìn)行編碼操作，安全性較低。
post請(qǐng)求方式主要用來提交數(shù)據(jù)，沒有數(shù)據(jù)長度的限制，提交的數(shù)據(jù)內(nèi)容存在于http請(qǐng)求體中，數(shù)據(jù)不會(huì)暴漏在url地址中。

JSONP:
　Jsonp并不是一種數(shù)據(jù)格式，而json是一種數(shù)據(jù)格式，jsonp是用來解決跨域獲取數(shù)據(jù)的一種解決方案，具體是通過動(dòng)態(tài)創(chuàng)建script標(biāo)簽，然后通過標(biāo)簽的src屬性獲取js文件中的js腳本，該腳本的內(nèi)容是一個(gè)函數(shù)調(diào)用，參數(shù)就是服務(wù)器返回的數(shù)據(jù)，為了處理這些返回的數(shù)據(jù)，需要事先在頁面定義好回調(diào)函數(shù)，本質(zhì)上使用的并不是ajax技術(shù)

Ajax是全稱是asynchronous JavaScript andXML，即異步JavaScript和xml，用于在Web頁面中實(shí)現(xiàn)異步數(shù)據(jù)交互，實(shí)現(xiàn)頁面局部刷新。
優(yōu)點(diǎn)：可以使得頁面不重載全部內(nèi)容的情況下加載局部內(nèi)容，降低數(shù)據(jù)傳輸量，避免用戶不斷刷新或者跳轉(zhuǎn)頁面，提高用戶體驗(yàn)
缺點(diǎn)：對(duì)搜索引擎不友好；要實(shí)現(xiàn)ajax下的前后退功能成本較大；可能造成請(qǐng)求數(shù)的增加跨域問題限制；
JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，ECMA的一個(gè)子集
優(yōu)點(diǎn)：輕量級(jí)、易于人的閱讀和編寫，便于機(jī)器（JavaScript）解析，支持復(fù)合數(shù)據(jù)類型（數(shù)組、對(duì)象、字符串、數(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、熟悉流式布局和響應(yīng)式布局原理，熟悉Bootstrap前端框架，能夠開發(fā)響應(yīng)式頁面

模態(tài)框。分頁。字體。遮罩層。下拉框。TAB欄

響應(yīng)式布局是關(guān)于網(wǎng)頁制作的過程中讓不同的設(shè)備有不同的尺寸和不同的功能。響應(yīng)式設(shè)計(jì)是讓所有的人能在這些設(shè)備上讓網(wǎng)站運(yùn)行正常

5、對(duì)前端模塊化有一定的了解，對(duì)less等預(yù)處理有一定的了解

模塊化：
一個(gè)模塊就是實(shí)現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。

less和sass是動(dòng)態(tài)的樣式語言，是CSS預(yù)處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。
變量符不一樣，less是@，而Sass是$;
Sass支持條件語句，可以使用if{}else{},for{}循環(huán)等等。而Less不支持;
Sass是基于Ruby的，是在服務(wù)端處理的，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器

Less 是一門 CSS 預(yù)處理語言，它擴(kuò)充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。
6、熟悉主流模板引擎、并熟練操作arttemplate和xtemplate

客戶端渲染路線：1. 請(qǐng)求一個(gè)html -> 2. 服務(wù)端返回一個(gè)html -> 3. 瀏覽器下載html里面的js/css文件 -> 4. 等待js文件下載完成 -> 5. 等待js加載并初始化完成 -> 6. js代碼終于可以運(yùn)行，由js代碼向后端請(qǐng)求數(shù)據(jù)( ajax/fetch ) -> 7. 等待后端數(shù)據(jù)返回 -> 8. 客戶端從無到完整地，把數(shù)據(jù)渲染為響應(yīng)頁面

服務(wù)端渲染路線：2. 請(qǐng)求一個(gè)html -> 2. 服務(wù)端請(qǐng)求數(shù)據(jù)( 內(nèi)網(wǎng)請(qǐng)求快 ) -> 3. 服務(wù)器初始渲染（服務(wù)端性能好，較快） -> 4. 服務(wù)端返回已經(jīng)有正確內(nèi)容的頁面 -> 5. 客戶端請(qǐng)求js/css文件 -> 6. 等待js文件下載完成 -> 7. 等待js加載并初始化完成 -> 8. 客戶端把剩下一部分渲染完成( 內(nèi)容小，渲染快 )
7、使用git、gulp對(duì)代碼進(jìn)行管理和構(gòu)建，npm、bower等依賴管理工具

給遠(yuǎn)程倉庫地址起一個(gè)別名
git remote add abc ../../hello.git
這個(gè)克隆的名字默認(rèn)是origin。
克隆下的項(xiàng)目會(huì)自動(dòng)建立跟蹤分支（git push 或者 git pull）
git remote查看有哪些遠(yuǎn)程地址的別名
這時(shí)候如果為空則需要自己加
git remote add abc ../../hello.git
更新一下
git pull origin master
想要直接推
git push -u origin master這樣就建立了關(guān)聯(lián)。（-u的作用就是建立了跟蹤分支,只需要第一次使用，以后可以直接git push）
git remote show origin看出每一個(gè)別名的地址是什么

8、熟練使用Angular，理解MVC、MVVM開發(fā)模式和SPA程序開發(fā)

MVC是一種開發(fā)模式，由模型（Model）、視圖（View）、控制器（Controller）3部分構(gòu)成，采用這種開發(fā)模式為合理組織代碼提供了方便、降低了代碼間的耦合度、功能結(jié)構(gòu)清晰可見。

 模型（Model）一般用來處理數(shù)據(jù)（讀取/設(shè)置），一般指操作數(shù)據(jù)庫。
 視圖（View）一般用來展示數(shù)據(jù)，比如通過HTML展示。
 控制器（Controller）一般用做連接模型和視圖的橋梁。

單頁面應(yīng)用（SPA）：
SPA（Single Page Application）指的是通單一頁面展示所有功能，通過Ajax動(dòng)態(tài)獲取數(shù)據(jù)然后進(jìn)行實(shí)時(shí)渲染，結(jié)合CSS3動(dòng)畫模仿原生App交互，然后再進(jìn)行打包（使用工具把Web應(yīng)用包一個(gè)殼，這個(gè)殼本質(zhì)上是瀏覽器）變成一個(gè)“原生”應(yīng)用。

在PC端也有廣泛的應(yīng)用，通常情況下使用Ajax異步請(qǐng)求數(shù)據(jù)，然后實(shí)現(xiàn)內(nèi)容局部刷新，局部刷新的本質(zhì)是動(dòng)態(tài)生成DOM，新生成的DOM元素并沒有真實(shí)存在于文檔中，所以當(dāng)再次刷新頁面時(shí)新添加的DOM元素會(huì)“丟失”，通過單頁面應(yīng)可以很好的解決這個(gè)問題。

9、熟練使用前端基礎(chǔ)類庫，如jQuery

（1）事件操作
（2）DOM樣式操作
（3）標(biāo)簽獲取

10、對(duì)Web前端技術(shù)有強(qiáng)烈興趣，對(duì)Node.js有一定的使用經(jīng)驗(yàn)；

NodeJS
是一個(gè)運(yùn)行環(huán)境，其使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式（異步） I/O的模型，使其輕量又高效

宿主環(huán)境
ECMAScript語法規(guī)則，需要不同版本實(shí)現(xiàn)。如果說ECMAScript運(yùn)行在瀏覽器，稱為javascript，簡稱JS。如果說ECMAScript運(yùn)行flash環(huán)境，稱為ActionScript，簡稱AS。如果ECMAScript運(yùn)行在Node環(huán)境，稱為Nodejs。這個(gè)環(huán)境就是宿主環(huán)境。必須依賴于某個(gè)環(huán)境，ECMAScript需要“寄生在某一宿主環(huán)境”。

11、熟練使用HTML5和CSS3相關(guān)技術(shù)開發(fā)移動(dòng)端和PC端前端應(yīng)用

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 元素，本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失，而sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除，此外，還新增了以下的幾大類元素。

內(nèi)容元素，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、了解瀏覽器和服務(wù)器的交互

譬如一個(gè)http://danYoo網(wǎng)站，以indexhtml為主頁，該主頁使用index.manifest文件為manifest文件，在該文件中請(qǐng)求本地緩存index.html、hello.js、hello.jpg、hello2.jpg這幾個(gè)資源文件。

1. 首次訪問http://danYoo網(wǎng)站時(shí)，它們的交互過程如下所示：
   ①瀏覽器請(qǐng)求訪問http://danYoo
   ②服務(wù)器返回index.html網(wǎng)頁
   ③瀏覽器解析index.html網(wǎng)頁，請(qǐng)求頁面上所有資源文件，包括HTML文件、圖像文件、CSS文件、JavaScript腳本文件，以及manifest文件
   ④服務(wù)器返回所有資源文件
   ⑤瀏覽器處理manifest文件，請(qǐng)求manifest中所有要求本地緩存的文件，包括index.html頁面本身，即使剛才已經(jīng)請(qǐng)求過這些文件。如果你要求本地緩存所有文件，這將是一個(gè)比較大的重復(fù)的請(qǐng)求過程。
   ⑥服務(wù)器返回所有要求本地緩存的文件
   ⑦瀏覽器對(duì)本地緩存進(jìn)行更新，存入包括頁面本身在內(nèi)的所有要求本地緩存的資源文件，并且觸發(fā)一個(gè)事件，通知本地緩存被更新。
2. 如果再次打開瀏覽器訪問http://danYoo網(wǎng)站，而且manifest文件沒有修改過
   ①瀏覽器再次請(qǐng)求訪問http://danYoo
   ②瀏覽器發(fā)現(xiàn)這個(gè)網(wǎng)頁被本地緩存，于是使用本地緩存中index.html頁面
   ③瀏覽器解析index.html頁面，使用所有本地緩存中的資源文件.
   ④瀏覽器向服務(wù)器請(qǐng)求manifest文件
   ⑤服務(wù)器返回一個(gè)304代碼，通知瀏覽器manifest沒有發(fā)生變化
   只要頁面上的資源文件被本地緩存過，下次瀏覽器打開這個(gè)頁面時(shí)，總是先使用本地緩存中的資源，然后請(qǐng)求manifest文件
3. 如果再次打開瀏覽器時(shí)manifest文件已經(jīng)被更新過了，那么瀏覽器與服務(wù)器之間的交互如下：
   ①瀏覽器再次請(qǐng)求訪問http://danYoo
   ②瀏覽器發(fā)現(xiàn)這個(gè)頁面被本地緩存，于是使用本地緩存中的index.html頁面
   ③瀏覽器解析index.html頁面，使用所有本地緩沖中的資源文件
   ④瀏覽器向服務(wù)器請(qǐng)求manifest文件
   ⑤服務(wù)器返回更新過的manifest文件
   ⑥瀏覽器處理manifest文件，發(fā)現(xiàn)該文件已被更新，于是請(qǐng)求所有要求進(jìn)行本地緩存的資源文件，包括indexhtml頁面本身
   ⑦瀏覽器返回要求進(jìn)行本地緩存的資源文件
   ⑧瀏覽器對(duì)本地緩存進(jìn)行更新，存入所以新的資源文件。并且觸發(fā)一個(gè)事件，通知本地緩存被更新
   需要注意的是，即使資源文件被修改過了，在上面的第3中已經(jīng)裝入的資源文件是不會(huì)發(fā)生變化的，譬如圖片不會(huì)突然變成新的圖片，腳本文件也不會(huì)突然使用新的腳本文件，也就是說，這時(shí)更新過后的本地緩存中的內(nèi)容還不能被使用，只有重新打開這個(gè)頁面的時(shí)候才會(huì)使用更新過后的資源文件。另外，如果你不想修改manifest文件中對(duì)于資源文件的設(shè)置，但是你對(duì)服務(wù)器上請(qǐng)求緩存的資源文件進(jìn)行了修改，那么你可以通過修改版本號(hào)的方式來讓瀏覽器認(rèn)為imanifest文件已經(jīng)被更新過了，以便重新下載修改過的資源文件。

額外：
12、H5C3快速搭建頁面布局

HTML5/CSS3響應(yīng)式布局介紹及設(shè)計(jì)流程，利用css3的media query媒體查詢功能。
確定需要兼容的設(shè)備類型、屏幕尺寸
專業(yè)技能整理1
制作線框原型
測(cè)試線框原型
視覺設(shè)計(jì)
前端實(shí)現(xiàn)

13、懶加載

1、大型的電商網(wǎng)站的一個(gè)頁面上有大量的圖片，加載很面。解決辦法：
（1）圖片懶加載，在頁面的未可是區(qū)域添加一個(gè)滾動(dòng)條事件。判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，有限加載
（2）如果為幻燈片、相冊(cè)等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。
（3）如果圖片為css圖片，可以使用CSSsprite、SVGsprite、Iconfont、Base64等技術(shù)。
（4）當(dāng)圖片過大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張亞索的特別厲害的縮略圖，以提高用戶體驗(yàn)。
（5）如果圖片展示區(qū)域小于圖片的真實(shí)大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后大小與展示一致。