HTML5面試題總結(jié)
1.基礎(chǔ)問題

1. = 和 == 和 === 的區(qū)別考赛？
   = : 用于賦值 == : 用于判斷 === : 用于判斷惕澎，必須類型
   和值
   同時(shí)相等才是等

2.有幾種方式清除浮動(dòng)？
父級(jí)元素 overflow: hidden;

浮動(dòng)元素后面的元素 clear: both;

偽元素選擇器: .clear:after { content: ''; display: block; clear: both; }

父級(jí)元素設(shè)置高度

父級(jí)元素 display: table;

3.請(qǐng)解釋JS中的閉包颜骤？
閉包唧喉，一個(gè)概念，在一個(gè)函數(shù)中忍抽，返回另一個(gè)函數(shù)八孝，里面的函數(shù)即成為閉包 閉包限制了一定的作用域，保證變量不被釋放掉

// 示例代碼var add = (function () { var count = 0; return function () { return ++count; };})();?add(); // 1add(); // 2add(); // 3
4.常見兼容性問題鸠项？
1.png24位的圖片在iE6瀏覽器上出現(xiàn)背景干跛，解決方案是做成PNG8
2.瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的{margin:0;padding:0;}來統(tǒng)一祟绊。
3.IE6雙邊距bug:塊屬性標(biāo)簽float后楼入，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大牧抽。 浮動(dòng)ie產(chǎn)生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 10px;} 這種情況之下IE會(huì)產(chǎn)生20px的距離嘉熊，解決方案是在float的標(biāo)簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個(gè)符號(hào)只有ie6會(huì)識(shí)別) 漸進(jìn)識(shí)別的方式扬舒，從總體中逐漸排除局部阐肤。 首先，巧妙的使用“\9”這一標(biāo)記呼巴，將IE游覽器從所有情況中分離出來泽腮。 接著御蒲，再次使用“+”將IE8和IE7、IE6分離開來诊赊，這樣IE8已經(jīng)獨(dú)立識(shí)別厚满。 css.bb{background-color:#f1ee18;/所有識(shí)別/.background-color:#00deff\9;/IE6、7碧磅、8識(shí)別/+background-color:#a200ff;/IE6碘箍、7識(shí)別/_background-color:#1e0bd1;/IE6識(shí)別*/}
4.IE下,既可以使用獲取常規(guī)屬性的方法來獲取自定義屬性, 又可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
5.IE下,even對(duì)象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,event對(duì)象有pageX,pageY屬性,但是沒有x,y屬性. 解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。
6.Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust:none; 解決. 如果這一屬性也不成 使用 transform:scale 來實(shí)施
7.超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active樣式了 解決方法是改變CSS屬性的排列順序:LoVe-HA???link{}a:visited{}a:hover{}a:active{}

5.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間同域頁面的通信?
調(diào)用localstorge
鲸郊、cookies
等本地存儲(chǔ)方式

2.HTML相關(guān)問題
1.HTML5新標(biāo)簽丰榴？
nav
/ header
/ footer
/ section
/ article
/ aside
/ detail
/ summary

video
/ audio
/ source
/ canvas
/ figure
/ figcaption

time
/ progress
/ mark

2.HTML5新表單元素?
url
/ email
/ date
/ datetime
/ time
/ week
/ month
/ search
/ range
/ color

3.HTML5中有哪些新功能？
本地存儲(chǔ)： localStorage
/ sessionStorage

離線緩存： Manifest

新標(biāo)簽： canvas
/ video
/ audio

拖放API： drag drop

地理位置： geolocation

瀏覽器后臺(tái)執(zhí)行：web worker

4.請(qǐng)解釋Cookie秆撮、sessionStroage四濒、localStroage的區(qū)別？
Cookie
: 存儲(chǔ)數(shù)據(jù)量小职辨，可以設(shè)置存儲(chǔ)時(shí)間盗蟆，到期自動(dòng)刪除 sessionStroage
: 將數(shù)據(jù)臨時(shí)存儲(chǔ)，離開當(dāng)前頁面就刪除 localStroage
: 將數(shù)據(jù)保存到設(shè)備上舒裤，可以實(shí)現(xiàn)永久存儲(chǔ)喳资，需要主動(dòng)刪除

5.描述application cache更新的過程?
第一次訪問緩存manifest文件里列的文件，之后訪問先加載緩存腾供，在后臺(tái)加載manifest文件按字節(jié)對(duì)比看是否有變化仆邓，如果沒變化則說明緩存未失效，否則在后臺(tái)按列表更新緩存伴鳖，在下一次刷新頁面的時(shí)候使用新的資源

6.iframe有那些缺點(diǎn)?
1.iframe會(huì)阻塞主頁面的Onload事件
2.iframe和主頁面共享連接池节值，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁面的并行加載黎侈。 使用iframe之前需要考慮這兩個(gè)缺點(diǎn)察署。如果需要使用iframe，最好是通過javascript 動(dòng)態(tài)給iframe添加src屬性值峻汉，這樣可以可以繞開以上兩個(gè)問題贴汪。
3.iframe 會(huì)降低頁面整體性能， 之前QQ空間的數(shù)據(jù)是頁面每新增一個(gè)iframe休吠，性能下降10%扳埂。 更多詳細(xì)內(nèi)容， 參見知乎問答： http://www.zhihu.com/question/20653055

3.CSS相關(guān)問題
1.CSS3新屬性瘤礁？
更多的選擇器

彈性布局： flex

幀動(dòng)畫： keyframes
/ animations

過渡動(dòng)畫： transition

多列布局： column

背景漸變： linear-gradient
/ radial-gradient

背景屬性： background-image
/ background-size
/ background-clip
/ background-origin

邊框阳懂、陰影： border-image
/ border-radius
/ box-shadow

2D、3D變換： transform
/ transform-origin

用戶界面屬性添加： box-sizing
/ outline-offset
/ cursor更多屬性值

2.請(qǐng)簡(jiǎn)述flex布局？
CSS3中的新增的特性岩调，也稱為彈性布局巷燥。
使用flex布局，會(huì)更加快速與方便号枕，但是有一定的兼容問題（display: -webkit-flex）缰揪。
主要含有主軸
、交叉軸
的概念葱淳，通過彈性布局钝腺，可以非常方便的設(shè)置元素的左對(duì)齊
、右對(duì)齊
赞厕、上對(duì)齊
艳狐、下對(duì)齊
、居中對(duì)齊
等等各種對(duì)齊方式皿桑，快速實(shí)現(xiàn)頁面效果毫目。
常用屬性有: flex-direction
/ flex-wrap
/ justify-content
/ align-items
/ align-content
/ flex-grow
/ flex-shrink
/ flex-basis
/ align-self
/ 等等

3.rem如何使用？
CSS3中的一個(gè)新單位
和em的區(qū)別是rem單位只針對(duì)HTML根元素唁毒，而em是根據(jù)父標(biāo)簽的大小進(jìn)行計(jì)算
通常都是給html
標(biāo)簽設(shè)置好font-size
之后蒜茴，然后其它的單位都換算為rem
進(jìn)行使用星爪。這樣浆西，當(dāng)根標(biāo)簽的font-size
發(fā)生改變了之后，頁面中所有根據(jù)rem
設(shè)置的元素都會(huì)發(fā)生改變顽腾。
html的font-size
會(huì)根據(jù)屏幕的寬度進(jìn)行調(diào)整近零，可以使用媒體查詢，根據(jù)屏幕寬度進(jìn)行font-size
的設(shè)置抄肖。 或者使用JS共啃，根據(jù)屏幕寬度蝗罗，計(jì)算出html
的font-size
的大小

4.Less和Sass分別是什么？
CSS預(yù)處理工具
使用編程的思路編寫CSS代碼，更加高效颜阐、快速、便捷
可以使用變量
背桐、嵌套規(guī)則
米酬、混入（函數(shù)）
、參數(shù)混入
夭咬、運(yùn)算
啃炸、顏色功能
、作用域
等等類似編程中的功能
Sass在市面上有一些成熟的框架卓舵，比如說Compass南用，而且有很多框架也在使用Sass，比如說Foundation

5.什么是樣式重置文件（重置樣式表）？
reset.css

由于各個(gè)瀏覽器對(duì)標(biāo)簽的默認(rèn)樣式支持方式不同裹虫，所以樣子都不太一樣肿嘲。為了實(shí)現(xiàn)不同瀏覽器效果一致，開發(fā)者會(huì)主動(dòng)清掉默認(rèn)樣式筑公，這些代碼就放到reset.css文件中睦刃，叫樣式重置文件（重置樣式表）。

6.em和rem的區(qū)別十酣？
em
是相對(duì)于父級(jí)標(biāo)簽字體大小 rem
是CSS3新的單位涩拙，相對(duì)根標(biāo)簽(HTML)
字體大小，通常用來做移動(dòng)端適配

7.如何做水平垂直居中耸采？
方案一：已知寬高兴泥，設(shè)置position: absolute;
，然后left
和top
都設(shè)置為50%
虾宇，再根據(jù)margin的負(fù)值來調(diào)正 方案二：類似方案一搓彻，最后一步用transform:translate(-50%,-50%);
方案三：絕對(duì)定位，top
嘱朽、bottom
旭贬、left
、right
都設(shè)置為0
搪泳，設(shè)置好寬高稀轨，然后margin: auto;
方案四：display:table-cell;

• vertical-align:middle;
  方案五：使用flex
  彈性盒模型

8.transition、animation岸军、transform有什么區(qū)別?
transition
: 處理過渡效果 animation
: CSS3動(dòng)畫奋刽，和keyframes
一起使用 transform
: 處理元素的形變，位移
艰赞、旋轉(zhuǎn)
佣谐、縮放
、傾斜

9.display: inline-block;
顯示的縫隙如何去掉方妖？
1.移除空格 2.使用margin負(fù)值 3.使用font-size:0 4.letter-spacing 5.word-spacing 6.float

10.rgba()和opacity的透明效果有什么不同狭魂？
rgba()和opacity都能實(shí)現(xiàn)透明效果 但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度
而rgba()只作用于元素的顏色或其背景色党觅。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果４瞥巍）

11.inline、block仔役、inline-block的區(qū)別是什么掷伙？
inline
元素和其他inline元素在同一行展示，寬度由內(nèi)容決定又兵，無法設(shè)置寬度
block
元素在新行開始任柜，默認(rèn)寬度為容器的寬度卒废，可以設(shè)置寬度
inline-block
從外面看是inline，里面看是block宙地，可以設(shè)置寬度

12.display:none與visibility:hidden的區(qū)別是什么摔认？
display
: 隱藏對(duì)應(yīng)的元素但不擠占該元素原來的空間 visibility
:隱藏對(duì)應(yīng)的元素并且擠占該元素原來的空間
即是，使用CSS display:none;
屬性后宅粥，HTML元素（對(duì)象）的寬度参袱、高度等各種屬性值都將“丟失”;而使用 visibility:hidden;
屬性后，HTML元素（對(duì)象）僅僅是在視覺上看不見（完全透明）秽梅，而它所占據(jù)的空間位置仍然存在

13.知道css有個(gè)content屬性嗎抹蚀？有什么作用？有什么應(yīng)用企垦？
css的content屬性專門應(yīng)用在 before/after偽元素上环壤，用于來插入生成內(nèi)容
最常見的應(yīng)用是利用偽類清除浮動(dòng)
一種常見利用偽類清除浮動(dòng)的代碼

.clearfix::after { content: ".";//這里利用到了content屬性 display: block; height: 0; visibility: hidden; clear: both;}.clearfix { *zoom: 1;}
14.有幾種方式可以對(duì)一個(gè)DOM設(shè)置它的CSS樣式？
外部樣式表
钞诡，引入一個(gè)外部css文件
內(nèi)部樣式表
郑现，將css代碼放在 標(biāo)簽內(nèi)部
內(nèi)聯(lián)樣式
，將css樣式直接定義在 HTML 元素內(nèi)部

15.什么是Css Hack接箫？ie6,7,8的hack分別是什么？
針對(duì)不同的瀏覽器寫不同的CSS code的過程辛友，就是CSS hack

test{ width:300px; height:300px; background-color:blue; /firefox/ background-color:red\9; /all ie/ background-color:yellow; /ie8/ +background-color:pink; /ie7/ _background-color:orange; /ie6/} :root #test { background-color:purple\9; /ie9/} @media all and (min-width:0px) { #test { background-color: black; /opera/ } } @media screen and (-webkit-min-device-pixel-ratio:0) { #test { background-color: gray; /chrome and safari/ } }

16.CSS中l(wèi)ink和@import的區(qū)別?
link
屬于html標(biāo)簽诈铛，而@import
是CSS中提供的
在頁面加載的時(shí)候循签，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)在頁面加載完成后才會(huì)加載引用的CSS
@import只有在ie5以上才可以被識(shí)別疙咸，而link是html標(biāo)簽县匠，不存在瀏覽器兼容性問題
link引入樣式的權(quán)重大于@import的引用（@import是將引用的樣式導(dǎo)入到當(dāng)前的頁面中）

4.JavaScript相關(guān)問題
1.說說你了解的ES6新特性？
let關(guān)鍵字

模板字符串

箭頭函數(shù)

函數(shù)默認(rèn)值的設(shè)置

for..of.. 更多內(nèi)容參照博客：http://es6.ruanyifeng.com/

2.JQ如何擴(kuò)展插件撒轮？
jQuery.extend()
: 給JQuery對(duì)象本身擴(kuò)展方法

jQuery.fn.extend()
: 給JQ元素?cái)U(kuò)展方法

3.AJAX兼容問題乞旦？
AJAX用于請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)
正常情況下使用XMLHttpRequest
對(duì)象即可，但是在IE瀏覽器下需要使用ActiveXObject
對(duì)象處理兼容問題
如果使用JQ题山，則直接使用$.get()
/ $.post()
/ $.getJSON()
/ $.ajax()
即可處理網(wǎng)絡(luò)請(qǐng)求問題

4.JQ和Zepto的區(qū)別杆查？
Zepto更加的輕量級(jí)，專為移動(dòng)端開發(fā)
Zepto并不是包含JQ所有的功能臀蛛，只是封裝JQ常用的一些方法
Zepto內(nèi)部劃分模塊亲桦，不同的功能放到了不同的文件中，需要使用的時(shí)候引入浊仆，否則不引入客峭。
JQ則是所有功能都放到一個(gè)文件中。JQ會(huì)更加占用項(xiàng)目體積抡柿，而Zepto的使用率更高

5.JQ的優(yōu)勢(shì)舔琅？
代碼簡(jiǎn)介，語法簡(jiǎn)單

強(qiáng)大的選擇器支持

封裝了常用功能洲劣，例如：slideUp()
备蚓、$.each()
等等

很好的兼容處理

豐富強(qiáng)大的插件庫(kù)

完善的AJAX

鏈?zhǔn)秸Z法

完善的文檔、開源

6.JavaScript嚴(yán)格模式是什么囱稽？
ECMAScript5添加了“嚴(yán)格模式” 這種模式下JavaScript在更嚴(yán)格的條件下運(yùn)行
主要目的： 1.消除JavaScript語法的一些不合理郊尝，不嚴(yán)謹(jǐn)，減少一些怪異行為 2.消除代碼運(yùn)行的一些不安全之處战惊，保證代碼運(yùn)行的安全 3.提高編譯器效率流昏，增加運(yùn)行速度 4.為未來新版JavaScript做好鋪墊
注意： 同樣的代碼，在“嚴(yán)格模式下”吞获，可能會(huì)有不一樣的運(yùn)行結(jié)果况凉；一些“正常模式”可以運(yùn)行的語句，在嚴(yán)格模式下將不能運(yùn)行
“use strict”;
各拷，進(jìn)入嚴(yán)格模式的標(biāo)志刁绒，老版本瀏覽器會(huì)當(dāng)做一行普通字符串，加以忽略 將“use strict”;
放到第一行烤黍，則整個(gè)腳本都將以嚴(yán)格模式運(yùn)行知市。也可以放到函數(shù)中的第一行傻盟，則只作用當(dāng)前函數(shù)，

// 優(yōu)化寫法(function () { "use strict"; // some code ...})();
嚴(yán)格模式的一些限制： 1.全局變量必須顯示聲明 2.禁止this指向全局對(duì)象(構(gòu)造函數(shù)初狰，必須加new
) 3.函數(shù)不能有重復(fù)的形參名 4.保留字(let莫杈、interface、package奢入、private筝闹、protected、public腥光、static关顷、yield、implements)

7.JavaScript中常用的設(shè)計(jì)模式武福？
1.單例模式 2.原型模式 3.構(gòu)造函數(shù) 4.工廠模式 5.適配器模式 6.策略模式

8.什么是作用域鏈议双？
作用域的范圍是函數(shù)，函數(shù)嵌套函數(shù)捉片，查找變量從內(nèi)層函數(shù)依次向外層找平痰，最后找不到在window上找

9.解釋call、apply伍纫、bind的區(qū)別?
call
和apply
都是調(diào)用一個(gè)函數(shù)宗雇，并指定this和參數(shù)，call
和apply
第一個(gè)參數(shù)都是指定的this的值莹规，區(qū)別在于call
第二個(gè)參數(shù)開始的參數(shù)是替換的參數(shù)赔蒲，而apply
的第二個(gè)參數(shù)是一個(gè)數(shù)組。
bind
是由一個(gè)函數(shù)創(chuàng)建一個(gè)新函數(shù)良漱，并綁定this和部分參數(shù)舞虱，參數(shù)形式和call
類似

10.描述事件委派(delegate)的原理和優(yōu)點(diǎn)?
原理: 在容器節(jié)點(diǎn)上綁定事件，利用冒泡母市，判斷事件是否在匹配指定的選擇器的節(jié)點(diǎn)上被觸發(fā)
優(yōu)點(diǎn): 只用綁定一次矾兜，不用對(duì)每個(gè)目標(biāo)做綁定，還有對(duì)動(dòng)態(tài)插入的節(jié)點(diǎn)也生效窒篱，無需重新綁定

11.有哪些原生觸屏事件焕刮？
touchstart
，touchmove
墙杯，touchend
，touchcancel

12.為什么老版本的webkit的click事件有300ms延遲括荡？
為了支持雙擊放大高镐，如果300ms以內(nèi)有兩次點(diǎn)擊則觸發(fā)放大操作，而不是click畸冲。 chromium較新版本在沒有雙擊放大的頁面去掉了click事件的300ms延遲

13.ajax和jsonp哪個(gè)可以跨域嫉髓，原理是什么观腊？
ajax默認(rèn)無法跨域，xhr2新增的CORS讓ajax也可以跨域算行，需要輸出http頭(Access-Control-Allow-Origin)
jsonp可以跨域梧油，原理是script元素的src可以跨域

14.JavaScript基本數(shù)據(jù)類型？
基本數(shù)據(jù)類型： number
, string
, boolean
, undefined
, null

引用數(shù)據(jù)類型： object(Array
, Date
, RegExp
, Function
)

15.談?wù)凾his對(duì)象的理解?
this是JavaScript的一個(gè)關(guān)鍵字州邢，隨著函數(shù)使用場(chǎng)合不同儡陨，this的值會(huì)發(fā)生變化
但是有一個(gè)總原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象量淌。 this一般情況下：是全局對(duì)象Global骗村。 作為方法調(diào)用，那么this就是指這個(gè)對(duì)象

16.new操作符具體干了什么?
1.創(chuàng)建一個(gè)空對(duì)象呀枢，并且 this 變量引用該對(duì)象胚股，同時(shí)還繼承了該函數(shù)的原型 2.屬性和方法被加入到 this 引用的對(duì)象中 3.新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this

var obj = {};obj.proto = Base.prototype;Base.call(obj);
5.Other問題
1.AngularJS中與項(xiàng)目壓縮的問題裙秋？
在寫控制器的時(shí)候琅拌，有一種寫法，會(huì)在使用壓縮工具的時(shí)候出問題

// 在進(jìn)行代碼壓縮的時(shí)候摘刑，參數(shù)$scope/$css等服務(wù)名稱會(huì)被壓縮工具替換掉进宝，就造成無法使用的錯(cuò)誤app.controller("homeCtrl", function ($scope, $css) {?});?// 換成如下寫法即可：app.controller('homeCtrl', ['$scope', '$css', function ($scope, $css) {?}]);
2.什么是模塊化開發(fā)？AMD和CMD是什么泣侮？
NodeJS
實(shí)現(xiàn)了JavaScript語言編寫后臺(tái)即彪，其中使用CommonJS
規(guī)范實(shí)現(xiàn)了模塊化開發(fā)
模塊化開發(fā)其實(shí)就是讓JavaScript文件可以互相引用，每個(gè)文檔代表一個(gè)模塊活尊，提高代碼的使用頻率隶校。 在HTML中引入JS文件也會(huì)方便很多。 原生JavaScript中并不支持模塊化開發(fā)蛹锰，出現(xiàn)了一些規(guī)范深胳，就是所說的AMD
和CMD
，這兩種方式適合使用桌面端铜犬，可以進(jìn)行異步加載
舞终，而在NodeJS
中使用CommonJS
是同步的，所以CommonJS
并不適合桌面端
在require.js推廣的過程中癣猾，產(chǎn)生了一種模塊化規(guī)范敛劝，叫AMD

在sea.js推廣的過程中，產(chǎn)生了一種模塊化規(guī)范纷宇，叫CMD

sea.js
是淘寶的前端開發(fā)工程師夸盟，網(wǎng)名叫玉伯
的人編寫的。 require.js
而是國(guó)外朋友編寫像捶。 sea.js
是根據(jù)CommonJS
規(guī)范來編寫的上陕，和CommonJS
語法類似桩砰，而require.js
的寫法則教特殊一些

3.微信JSSDK是什么？以及使用流程释簿？
如果項(xiàng)目需要使用微信提供的一些功能亚隅，例如：分享、定位庶溶、掃一掃煮纵、支付、等渐尿，就需要借助微信JSSDK來實(shí)現(xiàn)這些功能
使用流程： 1.將自己項(xiàng)目的域名添加到微信公眾賬號(hào)中醉途，設(shè)置為安全域名 2.在代碼中引入JSSDK所需的js文件 3.進(jìn)行配置: wx.config({debug: true, appId: '', timestamp: '', nonceStr: '', signature: '', jsApiList: []}); 4.調(diào)用JSSDK提供的方法進(jìn)行調(diào)用

4.什么是SPA？
Single Page Application 單頁應(yīng)用程序
打開SPA項(xiàng)目的時(shí)候砖茸，通常只有一個(gè)主頁面隘擎，然后根據(jù)點(diǎn)擊不同的按鈕，切換主頁面中顯示的內(nèi)容凉夯。
通過點(diǎn)擊不同的按鈕(a標(biāo)簽)
货葬，來修改錨點(diǎn)
的值，然后使用路由
根據(jù)錨點(diǎn)劲够，實(shí)現(xiàn)加載不同的頁面 不需要進(jìn)行網(wǎng)頁跳轉(zhuǎn)震桶，即可切換頁面

5.什么是懶加載？什么是預(yù)加載?
懶加載 懶加載又稱延遲加載
征绎，當(dāng)圖片需要顯示到頁面上的時(shí)候蹲姐，才開始真正的發(fā)起圖片的網(wǎng)絡(luò)請(qǐng)求，否則不請(qǐng)求人柿。
懶加載原理： \1. 將圖片地址不寫入src
屬性柴墩，而是寫入其它的屬性(data-original)
中 \2. 頁面onload時(shí)候，根據(jù)圖片的offsetTop
值凫岖，判斷哪些圖片顯示在用戶視野范圍內(nèi)江咳，然后把這些圖片的地址從data-original
中取出，放到src
屬性中哥放，圖片會(huì)自動(dòng)請(qǐng)求 \3. 設(shè)置好onscroll
函數(shù)歼指，監(jiān)測(cè)屏幕的滾動(dòng)，如果有圖片即將進(jìn)入用戶視野甥雕，則同樣將圖片的地址從data-original
取出踩身，放到src
屬性中取出即可

預(yù)加載 在頁面正式顯示之前，先把所需要的圖片資源全部加載下來社露，然后再顯示界面惰赋，用戶就不會(huì)看到圖片加載的過程，提高了用戶體驗(yàn)
預(yù)加載原理 1.拿到所有圖片的地址呵哨，分別創(chuàng)建Image對(duì)象赁濒，并賦值給src 2.在imgObj.onload方法中，判斷是否所有圖片都已經(jīng)加載完畢 3.當(dāng)所有圖片加載完畢之后孟害，調(diào)用回調(diào)函數(shù)拒炎，處理頁面的顯示

6.如何提高網(wǎng)頁加載速度？（網(wǎng)站如何優(yōu)化挨务？）
上線的時(shí)候击你，使用壓縮后三方庫(kù)（帶有min的文件: jquery.min.js）

盡可能使用CDN來加載你的三方庫(kù)

選取圖片的時(shí)候，能選擇jpg就不選擇png（只有鏤空?qǐng)D才選擇png圖片）

圖片搞定之后谎柄，使用網(wǎng)站進(jìn)行二次壓縮（TinyPNG）

減少網(wǎng)路請(qǐng)求丁侄，比如使用懶加載等等

優(yōu)化代碼

7.如何解決跨域問題？
由于瀏覽器同源策略
的限制朝巫，訪問非同源的數(shù)據(jù)需要進(jìn)行跨域處理
實(shí)現(xiàn)跨域的幾種方式: \1. JSONP \2. 后臺(tái)設(shè)置訪問源限制 \3. 使用后臺(tái)代理

JSONP 實(shí)現(xiàn)跨域問題最常用的一種方式 利用了script標(biāo)簽src屬性沒有域的限制而完成 需要前端鸿摇、后臺(tái)
配合完成
JSONP使用步驟: \1. 動(dòng)態(tài)創(chuàng)建script標(biāo)簽 \2. 將目標(biāo)數(shù)據(jù)的地址放到script標(biāo)簽的src屬性中，并在請(qǐng)求地址中拼接callback參數(shù)并攜帶回調(diào)函數(shù)名 \3. 定義回調(diào)函數(shù)劈猿，當(dāng)數(shù)據(jù)請(qǐng)求成功之后拙吉，回調(diào)函數(shù)被調(diào)用 \4. 數(shù)據(jù)完成之后，移除script標(biāo)簽 注意：后臺(tái)返回的數(shù)據(jù)不是真正的JSON數(shù)據(jù)揪荣，而是一個(gè)函數(shù)調(diào)用筷黔，數(shù)據(jù)為參數(shù)的一段字符串。( callbackFun('jsonString'); )
如果使用JQ仗颈，直接使用$.getJSON()
函數(shù)即可進(jìn)行跨域請(qǐng)求佛舱，JQ已經(jīng)對(duì)跨域請(qǐng)求做了封裝。

后臺(tái)設(shè)置訪問源限制： 只需后臺(tái)做訪問源(Access-Control-Allow-Origin)
的設(shè)置挨决，前端就可以正常訪問跨域的數(shù)據(jù)请祖。
NodeJS設(shè)置方式: response.setHeader("Access-Control-Allow-Origin", "*");
*****號(hào)代表了所有域名，設(shè)置好之后代表任何域名都可以訪問凰棉，也可以對(duì)域名進(jìn)行單獨(dú)控制
此種方式不夠安全

使用后臺(tái)代理: 前端不直接訪問跨域的數(shù)據(jù)损拢，而是交給服務(wù)器去做 服務(wù)器去請(qǐng)求別的站點(diǎn)的數(shù)據(jù)，后臺(tái)服務(wù)器是沒有域的限制的撒犀，所以很方便 當(dāng)后臺(tái)獲取到數(shù)據(jù)之后福压，前端從自己的服務(wù)器請(qǐng)求到數(shù)據(jù)，無需做跨域處理 此種方式或舞，主要內(nèi)容都在后臺(tái)荆姆，前端進(jìn)行正常AJAX請(qǐng)求

8.請(qǐng)解釋baiduTemplate.js模板引擎？
模板引擎 根據(jù)數(shù)據(jù)映凳，快速生成HTML代碼片段胆筒，插入到HTML結(jié)構(gòu)中顯示
首先編寫結(jié)構(gòu)，可以將HTML和JavaScript混寫，然后賦值數(shù)據(jù)仆救，就可以生成HTML代碼片段

<script type="text/template" id="li"> <%for (var i = 0; i < data.length; i++) {%> <li><%= data[i] %></li> <%}%></script>?// 根據(jù)數(shù)據(jù)抒和，生成HTML代碼片段var data = ['小明', '小紅', '小黑'];var html = baidu.template('li', {data: data});document.getElementById("result").innerHTML = html;
和baiduTemplate相似模板引擎還有很多，還會(huì)使用artTemplate.js
彤蔽，語法相似 http://www.jq22.com/jquery-info1097

9.請(qǐng)解釋MVC和MVVM設(shè)計(jì)模式摧莽？
10.XSS是什么？
跨站腳本攻擊（Cross-site scripting, XSS）
是一種網(wǎng)站應(yīng)用程序的安全漏洞攻擊顿痪，是代碼注入的一種镊辕。允許用戶將惡意代碼注入到網(wǎng)頁上，影響網(wǎng)頁蚁袭。
這類攻擊通常包含了HTML以及用戶端腳本語言征懈。

11.移動(dòng)端性能優(yōu)化？
加載優(yōu)化 1.減少HTTP請(qǐng)求 2.壓縮JS揩悄、CSS卖哎、HTML靜態(tài)資源并在服務(wù)器設(shè)置gzip 3.首屏加載，不超過120k 4.壓縮圖片 5.避免重定向 6.異步加載第三方資源: async / 動(dòng)態(tài)創(chuàng)建script / defer 7.oneRequest: 首次內(nèi)聯(lián)CSS虏束，JavaScript棉饶，存localStroage，第二次讀取localStroage 8.按需加載: 滾動(dòng)加載镇匀、點(diǎn)擊加載
CSS優(yōu)化 1.層次不超過3 2.合并CSS規(guī)則照藻，合并margin、background等屬性 3.移除空的CSS規(guī)則 4.去掉0的單位 5.不要聲明過多的font-size
腳本執(zhí)行優(yōu)化 1.避免iframe汗侵、img等src為空 2.圖片盡量避免使用DataURI 3.避免重設(shè)圖片大小 4.點(diǎn)擊事件優(yōu)化 5.注意scroll resize事件綁定時(shí)機(jī)
渲染優(yōu)化 1.動(dòng)畫優(yōu)化: 使用CSS3動(dòng)畫幸缕、使用requestAnimationFrame替代setTimeout 2.高頻事件優(yōu)化: touch事件、scroll事件 3.圖片優(yōu)化: 壓縮圖片晰韵、webp優(yōu)于jpg发乔、png8優(yōu)于gif、對(duì)圖片使用lazyload雪猪、避免使用DataURI 4.GPU加速: 使用transition觸發(fā)栏尚、tranform觸發(fā)、opacity 5.DOM層次不宜過多 6.JS主動(dòng)的釋放內(nèi)存

12.Tween.JS如何使用只恨？
// 首先獲取所需要的4個(gè)數(shù)字var currentStep = 0; // 當(dāng)前步數(shù)var allStep = 100; // 總步數(shù)var startValue = $(window).scrollTop(); // 開始的值var changeValue = 0 - startValue; // 改變的值?// 使用定時(shí)器進(jìn)行改變var timer = setInterval(function () { // 當(dāng)前步數(shù)增加 currentStep++; // 判斷結(jié)束時(shí)間 if (currentStep > allStep) { clearInterval(timer); } // 四個(gè)參數(shù)（當(dāng)前步數(shù)译仗、開始值、變化值官觅、總步數(shù)） var v = Tween.Bounce.easeIn(currentStep, startValue, changeValue, allStep);? // 使用Tween.js實(shí)現(xiàn)效果 $(window).scrollTop(v);}, 10);
13.什么是Cordova纵菌？
hybrid App
開發(fā)平臺(tái) 一個(gè)工具，正常編寫HTML休涤、CSS咱圆、JavaScript代碼，即可通過Cordova生成各個(gè)平臺(tái)的Native App

可以通過編寫JavaScript代碼調(diào)用設(shè)備的功能
常用命令 1.cordova create ProjectPath com.lidaze.www HelloCordova
2.cordova platform add ios
3.cordova platform rm ios
4.cordova build ios
5.cordova emulate ios
6.cordova plugin add cordova-plugin-dialogs
7.cordova plugin remove cordova-plugin-dialogs

14.什么是Web App
? 什么是hybrid App
?
Web App
: 移動(dòng)App，通過編寫HTML序苏、CSS手幢、JavaScript實(shí)現(xiàn)Native App的功能外觀，還是運(yùn)行在瀏覽器中杠览。有時(shí)會(huì)被嵌入到Native App中
hybrid App
: 混合App弯菊，通過編寫HTML、CSS踱阿、JavaScript實(shí)現(xiàn)Navtive App的功能和外觀，可直接生成各個(gè)操作系統(tǒng)的Native App钦铁，可直接安裝到手機(jī)中

15.http狀態(tài)碼有那些软舌？分別代表是什么意思？
100-199 用于指定客戶端應(yīng)相應(yīng)的某些動(dòng)作
200-299 用于表示請(qǐng)求成功
300-399 用于已經(jīng)移動(dòng)的文件并且常被包含在定位頭信息中指定新的地址信息
400-499 用于指出客戶端的錯(cuò)誤牛曹。 400 語義有誤佛点，當(dāng)前請(qǐng)求無法被服務(wù)器理解。 401 當(dāng)前請(qǐng)求需要用戶驗(yàn)證 403 服務(wù)器已經(jīng)理解請(qǐng)求黎比，但是拒絕執(zhí)行它超营。
500-599 用于支持服務(wù)器錯(cuò)誤。 503 – 服務(wù)不可用

16.你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?
漸進(jìn)增強(qiáng)progressive enhancement
：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面阅虫，保證最基本的功能演闭，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
優(yōu)雅降級(jí)graceful degradation
：一開始就構(gòu)建完整的功能颓帝，然后再針對(duì)低版本瀏覽器進(jìn)行兼容米碰。
區(qū)別： 優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給购城，而漸進(jìn)增強(qiáng)則是從一個(gè)非陈雷基礎(chǔ)的，能夠起作用的版本開始瘪板，并不斷擴(kuò)充吴趴，以適應(yīng)未來環(huán)境的需要。 降級(jí)（功能衰減）意味著往回看侮攀；而漸進(jìn)增強(qiáng)則意味著朝前看锣枝，同時(shí)保證其根基處于安全地帶。
優(yōu)雅降級(jí)觀點(diǎn) “優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)魏身、最完善的瀏覽器來設(shè)計(jì)網(wǎng)站惊橱。而將那些被認(rèn)為“過時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開發(fā)周期的最后階段，并把測(cè)試對(duì)象限定為主流瀏覽器（如 IE箭昵、Mozilla 等）的前一個(gè)版本税朴。 在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無妨 (poor, but passable)” 的瀏覽體驗(yàn)。你可以做一些小的調(diào)整來適應(yīng)某個(gè)特定的瀏覽器正林。但由于它們并非我們所關(guān)注的焦點(diǎn)泡一，因此除了修復(fù)較大的錯(cuò)誤之外，其它的差異將被直接忽略觅廓。
漸進(jìn)增強(qiáng)觀點(diǎn) “漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身鼻忠。 內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它杈绸，有的則收集它帖蔓，有的尋求，有的操作瞳脓，還有的網(wǎng)站甚至?xí)陨系姆N種塑娇，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例劫侧。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級(jí)式瀏覽器支持 (Graded Browser Support)”策略的原因所在埋酬。

17.簡(jiǎn)述一下src與href的區(qū)別？
src用于替換當(dāng)前元素烧栋，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系写妥。
src是source的縮寫，指向外部資源的位置审姓，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置珍特；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本邑跪，img圖片和frame等元素次坡。
當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理画畅，直到將該資源加載砸琅、編譯、執(zhí)行完畢轴踱，圖片和框架等元素也如此症脂，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部淫僻。 href是Hypertext Reference的縮寫诱篷，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接雳灵，如果我們?cè)谖臋n中添加 那么瀏覽器會(huì)識(shí)別該文檔為css文件棕所，就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理。這也是為什么建議使用link方式來加載css悯辙，而不是使用@import方式琳省。

18.描述下重繪和回流是什么
瀏覽器在加載?個(gè)??的時(shí)候迎吵，會(huì)繪制?個(gè)節(jié)點(diǎn)樹，??中的標(biāo)簽等元素都會(huì)稱為節(jié)點(diǎn)樹的?部分针贬，當(dāng)這些元素的規(guī)模尺?击费，布局，隱藏等改變?需要重新構(gòu)建桦他。這就稱之為回流蔫巩。每個(gè)???少需要?次回流，就是在??第?次加載的時(shí)候快压。在回流的時(shí)候圆仔，瀏覽器會(huì)使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹嗓节，完成回流后荧缘，瀏覽器會(huì)重新繪制受影響的部分到屏幕中，該過程稱為重繪拦宣。例如：當(dāng)??中的部分或者全部元素改變寬度和?度、或者位置發(fā)?變化信姓、刪除或者增加某個(gè)或者某些元素時(shí)鸵隧、某個(gè)元素隱藏或者顯示時(shí)，這時(shí)??就需要重新加載了意推，這就叫做回流豆瘫。當(dāng)??中元素的可?性發(fā)?變化時(shí)，?如：背景顏?菊值，?字顏?等等外驱，就會(huì)形成重繪。需要注意的是回流必將引起重繪腻窒，?重繪不?定會(huì)引起回流

19. 對(duì)BFC理解嗎昵宇？
    應(yīng)該是 Block Formatting Context信息來源?絡(luò)，什么是Block Formatting Context儿子？當(dāng)涉及到可視化布局的時(shí)候瓦哎，Block Formatting Context提供了?個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照?定規(guī)則進(jìn)?布局柔逼。?個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局蒋譬。為了讓我們有個(gè)感性的認(rèn)識(shí)，舉個(gè)不太合適的例?愉适。你可以把?個(gè)??想象成?的集裝箱犯助，這個(gè)集裝箱?裝的貨物就是HTML元素。在現(xiàn)實(shí)?活中為了避免不同?的貨物相互混淆维咸，都是把貨物打好包裝再裝?集裝箱剂买，這樣的話?論你包裝??的貨物怎么擺放惠爽，都不會(huì)影響到其他?的貨物。那么這個(gè)包裝就可以被想象成Block Formatting Context雷恃。怎樣才能形成Block Formatting Context當(dāng)?個(gè)HTML元素滿?下?條件的任何?點(diǎn)疆股，都可以產(chǎn)?Block Formatting Context?float的值不為none。?overflow的值不為visible倒槐。?display的值為table-cell, table-caption, inline-block中的任何?個(gè)旬痹。?position的值不為relative和static

20.請(qǐng)用js實(shí)現(xiàn)一個(gè)繼承？
// ?類function Person(name, age) { this.name = name; this.age = age;}Person.prototype.say = function () { console.log('my name is ' + this.name);};// ?類function Student(name, age, gender) { Person.apply(this, arguments); this.gender = gender;}Student.prototype = new Person;Student.prototype.constructor = Student;

21.談?wù)勀銓?duì)閉包的理解
閉包讨越，?個(gè)概念两残，在?個(gè)函數(shù)中，返回另?個(gè)函數(shù)把跨，??的函數(shù)即成為閉包 閉包限制了?定的作?域人弓，保證變量不被釋放掉

// 示例代碼var add = (function () { var count = 0; return function () { return ++count; };})();?add(); // 1add(); // 2add(); // 3
22.JS做動(dòng)畫的方式有哪些？
使?setInterval/setTimeout類的定時(shí)期着逐，執(zhí)?元素的狀態(tài)改變

使?jQuery的animate/show/fade/slide等動(dòng)畫?法

使?requestAnimationFrame?法替代舊的定時(shí)器?法

5.非技術(shù)問題
1.使用過哪些開發(fā)工具崔赌？
編輯器:
Sublime Text

Atom (GitHub)

VS Code(微軟)

IDE（集成開發(fā)環(huán)境）:
HBuilder(國(guó)內(nèi))

WebStorm(國(guó)外）

2.前公司技術(shù)團(tuán)隊(duì)多少人？H5開發(fā)有幾個(gè)耸别？
3.談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO需要考慮什么健芭？
了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁 你需要知道一些搜索引擎的基本工作原理，各個(gè)搜索引擎之間的區(qū)別秀姐，搜索機(jī)器人（SErobot或叫webcrawler）如何進(jìn)行工作慈迈，搜索引擎如何對(duì)搜索結(jié)果進(jìn)行排序等等。
Meta標(biāo)簽優(yōu)化 主要包括主題（Title)省有，網(wǎng)站描述(Description)痒留，和關(guān)鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者）蠢沿，Category（目錄）伸头，Language（編碼語種）等。
如何選取關(guān)鍵詞并在網(wǎng)頁中放置關(guān)鍵詞 搜索就得用關(guān)鍵詞搏予。關(guān)鍵詞分析和選擇是SEO最重要的工作之一熊锭。首先要給網(wǎng)站確定主關(guān)鍵詞（一般在5個(gè)上下），然后針對(duì)這些關(guān)鍵詞進(jìn)行優(yōu)化雪侥，包括關(guān)鍵詞密度（Density）碗殷，相關(guān)度（Relavancy），突出性（Prominency）等等速缨。
了解主要的搜索引擎 雖然搜索引擎有很多锌妻，但是對(duì)網(wǎng)站流量起決定作用的就那么幾個(gè)。比如英文的主要有Google旬牲，Yahoo仿粹，Bing等搁吓；中文的有百度，搜狗吭历，有道等堕仔。不同的搜索引擎對(duì)頁面的抓取和索引、排序的規(guī)則都不一樣晌区。還要了解各搜索門戶和搜索引擎之間的關(guān)系摩骨，比如AOL網(wǎng)頁搜索用的是Google的搜索技術(shù)，MSN用的是Bing的技術(shù)朗若。
主要的互聯(lián)網(wǎng)目錄 OpenDirectory自身不是搜索引擎恼五，而是一個(gè)大型的網(wǎng)站目錄，他和搜索引擎的主要區(qū)別是網(wǎng)站內(nèi)容的收集方式不同哭懈。目錄是人工編輯的灾馒，主要收錄網(wǎng)站主頁；搜索引擎是自動(dòng)收集的遣总，除了主頁外還抓取大量的內(nèi)容頁面睬罗。
按點(diǎn)擊付費(fèi)的搜索引擎 搜索引擎也需要生存，隨著互聯(lián)網(wǎng)商務(wù)的越來越成熟旭斥，收費(fèi)的搜索引擎也開始大行其道傅物。最典型的有Overture和百度，當(dāng)然也包括Google的廣告項(xiàng)目GoogleAdwords琉预。越來越多的人通過搜索引擎的點(diǎn)擊廣告來定位商業(yè)網(wǎng)站，這里面也大有優(yōu)化和排名的學(xué)問蒿褂，你得學(xué)會(huì)用最少的廣告投入獲得最多的點(diǎn)擊圆米。
搜索引擎登錄 網(wǎng)站做完了以后，別躺在那里等著客人從天而降啄栓。要讓別人找到你娄帖，最簡(jiǎn)單的辦法就是將網(wǎng)站提交（submit）到搜索引擎。如果你的是商業(yè)網(wǎng)站昙楚，主要的搜索引擎和目錄都會(huì)要求你付費(fèi)來獲得收錄（比如Yahoo要299美元）近速，但是好消息是（至少到目前為止）最大的搜索引擎Google目前還是免費(fèi)，而且它主宰著60％以上的搜索市場(chǎng)堪旧。
鏈接交換和鏈接廣泛度（LinkPopularity） 網(wǎng)頁內(nèi)容都是以超文本（Hypertext）的方式來互相鏈接的削葱，網(wǎng)站之間也是如此。除了搜索引擎以外淳梦，人們也每天通過不同網(wǎng)站之間的鏈接來Surfing（“沖浪”）析砸。其它網(wǎng)站到你的網(wǎng)站的鏈接越多，你也就會(huì)獲得更多的訪問量爆袍。更重要的是首繁，你的網(wǎng)站的外部鏈接數(shù)越多作郭，會(huì)被搜索引擎認(rèn)為它的重要性越大，從而給你更高的排名弦疮。
合理的標(biāo)簽使用

4.“有什么想問我的夹攒？”， 面試官說胁塞。
目前關(guān)注哪些最新的Web前端技術(shù)（未來的發(fā)展方向）咏尝？
前端團(tuán)隊(duì)如何工作的（實(shí)現(xiàn)一個(gè)產(chǎn)品的流程）？
公司的薪資結(jié)構(gòu)是什么樣子的闲先？

一状土、webpack四個(gè)核心概念

1、入口【Entry】
webpack將創(chuàng)建所有應(yīng)用程序 依賴關(guān)系圖表伺糠。圖表的起點(diǎn)被稱之為 入口起點(diǎn)蒙谓。入口起點(diǎn)告訴webpack從哪里開始，并遵循著依賴關(guān)系圖表知道打包什么训桶±弁裕可以將您的應(yīng)用入口起點(diǎn)認(rèn)為是跟上下文或app的第一個(gè)啟動(dòng)文件。
const config = { entry: { app: './src/app.js' }}?module.exports = config;
2舵揭、出口【Output】
將所有資源打包在一起谤专，仍然告訴webpack在哪里打包我們的應(yīng)用，即將打包資源輸出到什么地方午绳。
const config = { entry: { app: './src/app.js' }, output: { filename: 'webpack.bundle.js', path: './dist' }}?module.exports = config;
3置侍、加載器【Loader】
webpack的目標(biāo)是，讓項(xiàng)目中的所有資源都成為webpack的關(guān)注點(diǎn)拦焚，而瀏覽器不需要考慮這些（這并不意味著資源都必須打包在一起）蜡坊。webpack把每個(gè)文件（.css, .html, .scss, .jpg, .etc）都作為模塊處理。然而webpack只了解JavaScript赎败，所有需要加載器來處理其它類型的文件秕衙。因?yàn)槲募驯惶砑拥搅艘蕾噲D表，所有webpack加載器會(huì)將這些文件轉(zhuǎn)換為模塊僵刮。loader屬性要實(shí)現(xiàn)的兩個(gè)目標(biāo)：（1）識(shí)別出應(yīng)該被特定的加載器轉(zhuǎn)換的文件据忘；（2）轉(zhuǎn)換能夠被添加到依賴圖表的文件（并且最終打包）
const config = { entry: { app: './src/app.js' }, output: { filename: 'webpack.bundle.js', path: './dist' }, module: { loaders: [ { test: /.(js|jsx)$/, loader: 'babel-loader' }, { test: /.css$/, loaders: ['style', 'css'] } ] }}?module.exports = config;
loader的兩個(gè)必選屬性test和loader告訴了webpack如下行為：webpack編譯器，當(dāng)你碰到在require()/import
語句中被解析為.js
或.jsx
的路徑時(shí)搞糕，在你把它們添加并打包之前勇吊，要先使用babel-loader去轉(zhuǎn)換。同理寞宫，css也是這個(gè)樣子萧福，只不過使用的loader模塊不同。
4辈赋、插件【Plugins]
加載器僅基于單個(gè)文件執(zhí)行轉(zhuǎn)換鲫忍，插件最常用于（但不限于）在打包模塊的“編譯”和“組塊”時(shí)執(zhí)行操作和自定義功能膏燕。webpack的插件系統(tǒng)極其強(qiáng)大和可定制。為了使用插件悟民，需要require它們坝辫，并且把它們添加到plugins數(shù)組助析。多數(shù)插件可以通過potion來自定義辨萍。由于你可以在一個(gè)配置多次使用插件用于不同的目的，因此你需要使用new來創(chuàng)建插件的實(shí)例嘱兼，并且調(diào)用插件智润。
const HtmlWebpackPlugin = require('html-webpack-plugin');const htmlWP = new HtmlWebpackPlugin({template: './src/index.html'});const config = { entry: { app: './src/app.js' }, output: { filename: 'webpack.bundle.js', path: './dist' }, module: { loaders: [ { test: /.(js|jsx)$/, loader: 'babel-loader' }, { test: /.css$/, loaders: ['style', 'css'] } ] }, plugins: [ htmlWP ]}?module.exports = config;
二及舍、webpack解析三種文件路徑
（1）絕對(duì)路徑（2）相對(duì)路徑（3）模塊路徑