常見試題

行內(nèi)元素：會在水平方向排列窜锯，不能包含塊級元素张肾，設(shè)置width無效，height無效(可以設(shè)置line-height)衬浑，margin上下無效捌浩，padding上下無效。
告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔工秩。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)尸饺。
link屬于XHTML標(biāo)簽，除了加載CSS外助币，還能用于定義RSS, 定義rel連接屬性等作用浪听；而@import是CSS提供的，只能用于加載CSS.link寫在html頁面中眉菱，@import寫在CSS頁面中
頁面被加載的時迹栓，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集俭缓，主要是關(guān)于圖像克伊，位置酥郭，存儲，多任務(wù)等功能的增加愿吹。
(1)繪畫 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數(shù)據(jù)不从，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
(5)語意化更好的內(nèi)容元素，比如 article犁跪、footer椿息、header、nav坷衍、section;
(6)表單控件寝优，calendar、date枫耳、time乏矾、email、url嘉涌、search;
(7)新的技術(shù)webworker, websocket, Geolocation;
this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）妻熊；如果有new關(guān)鍵字，this指向new出來的那個對象仑最；
null是一個表示"無"的對象，轉(zhuǎn)為數(shù)值時為0帆喇；undefined是一個表示"無"的原始值警医，轉(zhuǎn)為數(shù)值時為NaN。
性能優(yōu)化的方法：
（1） 減少http請求次數(shù)：CSS Sprites, JS坯钦、CSS源碼壓縮预皇、圖片大小控制合適；網(wǎng)頁Gzip婉刀，CDN托管吟温，data緩存 ，圖片服務(wù)器突颊。
（2） 前端模板 JS+數(shù)據(jù)鲁豪，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果律秃，每次操作本地變量爬橡，不用請求，減少請求次數(shù)
（3） 用innerHTML代替DOM操作棒动，減少DOM操作次數(shù)糙申，優(yōu)化javascript性能。
（4） 當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style船惨。
（5） 少用全局變量柜裸、緩存DOM節(jié)點查找的結(jié)果缕陕。減少IO讀取操作。
（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態(tài)屬性)疙挺。
（7） 圖片預(yù)加載扛邑，將樣式表放在頂部，將腳本放在底部 加上時間戳衔统。
內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在鹿榜。setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏锦爵。
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）舱殿。
cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞险掀。sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器沪袭，僅在本地保存。
cookie數(shù)據(jù)大小不能超過4k樟氢。sessionStorage和localStorage 雖然也有存儲大小的限制冈绊，但比cookie大得多，可以達到5M或更大埠啃。有期時間：
(1)localStorage 存儲持久數(shù)據(jù)死宣，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；
(2)sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除碴开。
(3)cookie 設(shè)置的cookie過期時間之前一直有效毅该，即使窗口或瀏覽器關(guān)閉
如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？
（1）map+area或者svg
（2）border-radius
（3）純js實現(xiàn) 需要求一個點在不在圓上簡單算法潦牛、獲取鼠標(biāo)坐標(biāo)等等
CSS優(yōu)先級為: !important > id > class > tag
display:none 隱藏對應(yīng)的元素眶掌，在文檔布局中不再給它分配空間，它各邊的元素會合攏巴碗，就當(dāng)他從來不存在朴爬。visibility:hidden 隱藏對應(yīng)的元素，但是在文檔布局中仍保留原來的空間橡淆。
absolute浮動定位是相對于父級中設(shè)置position為relative或者absolute最近的父級元素召噩，fixed浮動定位是相對于瀏覽器視窗的；
ajax過程：
(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象.
(2)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法明垢、URL及驗證信息.
(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實現(xiàn)局部刷新
一個頁面從輸入 URL 到頁面加載顯示完成蚣常，這個過程中都發(fā)生了什么？
（1）查找瀏覽器緩存
（2）DNS解析痊银、查找該域名對應(yīng)的IP地址抵蚊、重定向（301）、發(fā)出第二個GET請求
（3）進行HTTP協(xié)議會話
（4）客戶端發(fā)送報頭(請求報頭)
（5）服務(wù)器回饋報頭(響應(yīng)報頭)
（6）html文檔開始下載
（7）文檔樹建立，根據(jù)標(biāo)記請求所需指定MIME類型的文件
（8）文件顯示
對WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識
標(biāo)簽閉合贞绳、標(biāo)簽小寫谷醉、不亂嵌套、提高搜索機器人搜索幾率冈闭、使用外鏈css和js腳本俱尼、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快萎攒、內(nèi)容能被更多的用戶所訪問遇八、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件耍休，容易維護刃永、改版方便，不需要變動頁面內(nèi)容羊精、提供打印版本而不需要復(fù)制內(nèi)容斯够、提高網(wǎng)站易用性；
清除浮動的幾種方式喧锦，各自的優(yōu)缺點
1.使用空標(biāo)簽清除浮動 clear:both（理論上能清除任何標(biāo)簽读规，增加無意義的標(biāo)簽）
2.使用overflow:auto（空標(biāo)簽元素清除浮動而不得不增加無意代碼的弊端,使用zoom:1用于兼容IE）
3.是用afert偽元素清除浮動(用于非IE瀏覽器)
javascript的typeof返回哪些數(shù)據(jù)類型
Object number function boolean underfind
position的值， relative和absolute分別是相對于誰進行定位的燃少？
absolute :生成絕對定位的元素束亏， 相對于最近一級的 定位不是 static 的父元素來進行定位。
fixed （老IE不支持）生成絕對定位的元素阵具，通常相對于瀏覽器窗口或 frame 進行定位枪汪。
relative 生成相對定位的元素，相對于其在普通流中的位置進行定位怔昨。
static 默認(rèn)值。沒有定位宿稀，元素出現(xiàn)在正常的流中
sticky 生成粘性定位的元素趁舀，容器的位置根據(jù)正常文檔流計算得出
如何解決跨域問題？
jsonp祝沸，原理是：動態(tài)插入script標(biāo)簽矮烹，通過script標(biāo)簽引入一個js文件，這個js文件載入成功后會執(zhí)行我們在url參數(shù)中指定的函數(shù)罩锐，并且會把我們需要的json數(shù)據(jù)作為參數(shù)傳入奉狈。由于同源策略的限制，XmlHttpRequest只允許請求當(dāng)前源（域名涩惑、協(xié)議仁期、端口）的資源，為了實現(xiàn)跨域請求，可以通過script標(biāo)簽實現(xiàn)跨域請求跛蛋，然后在服務(wù)端輸出JSON數(shù)據(jù)并執(zhí)行回調(diào)函數(shù)熬的，從而解決了跨域的數(shù)據(jù)請求。
優(yōu)點是兼容性好赊级，簡單易用押框，支持瀏覽器與服務(wù)器雙向通信。缺點是只支持GET請求理逊。
JSONP：json+padding（內(nèi)填充）橡伞，顧名思義，就是把JSON填充到一個盒子里晋被。
創(chuàng)建ajax過程
(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象.
(2)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法兑徘、URL及驗證信息.
(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實現(xiàn)局部刷新.
談?wù)勀銓ebpack的看法
WebPack 是一個模塊打包工具，你可以使用WebPack管理你的模塊依賴墨微，并編繹輸出模塊們所需的靜態(tài)文件道媚。它能夠很好地管理、打包Web開發(fā)中所用到的HTML翘县、JavaScript最域、CSS以及各種靜態(tài)文件（圖片、字體等）锈麸，讓開發(fā)過程更加高效镀脂。對于不同類型的資源，webpack有對應(yīng)的模塊加載器忘伞。webpack模塊打包器會分析模塊間的依賴關(guān)系薄翅，最后 生成了優(yōu)化且合并后的靜態(tài)資源。
常見web安全及防護原理
1.sql注入原理
就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串氓奈，最終達到欺騙服務(wù)器執(zhí)行惡意的SQL命令翘魄。
永遠(yuǎn)不要信任用戶的輸入，要對用戶的輸入進行校驗舀奶，可以通過正則表達式暑竟，或限制長度，對單引號和雙"-"進行轉(zhuǎn)換等育勺。
永遠(yuǎn)不要使用動態(tài)拼裝SQL但荤，可以使用參數(shù)化的SQL或者直接使用存儲過程進行數(shù)據(jù)查詢存取。
永遠(yuǎn)不要使用管理員權(quán)限的數(shù)據(jù)庫連接涧至，為每個應(yīng)用使用單獨的權(quán)限有限的數(shù)據(jù)庫連接腹躁。
不要把機密信息明文存放，請加密或者h(yuǎn)ash掉密碼和敏感的信息南蓬。
2.XSS原理及防范
Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意 html標(biāo)簽或者JavaScript代碼纺非。比如：攻擊者在論壇中放一個看似安全的鏈接哑了，騙取用戶點擊后，竊取cookie中的用戶私密信息铐炫；或者攻擊者在論壇中加一個惡意表單垒手，當(dāng)用戶提交表單的時候，卻把信息傳送到攻擊者的服務(wù)器中倒信，而不是用戶原本以為的信任站點科贬。
首先代碼里對用戶輸入的地方和變量都需要仔細(xì)檢查長度和對”<”,”>”,”;”,”’”等字符做過濾；其次任何內(nèi)容寫到頁面之前都必須加以encode鳖悠，避免不小心把html tag 弄出來榜掌。這一個層面做好，至少可以堵住超過一半的XSS 攻擊乘综。首先憎账，避免直接在cookie 中泄露用戶隱私，例如email卡辰、密碼等等胞皱。其次，通過使cookie 和系統(tǒng)ip 綁定來降低cookie 泄露后的危險九妈。這樣攻擊者得到的cookie 沒有實際價值反砌，不可能拿來重放。如果網(wǎng)站不需要再瀏覽器端對cookie 進行操作萌朱，可以在Set-Cookie 末尾加上HttpOnly 來防止javascript 代碼直接獲取cookie 宴树。盡量采用POST 而非GET 提交表單。
3.CSRF
XSS是獲取信息晶疼，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包酒贬。CSRF是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數(shù)據(jù)包翠霍。要完成一次CSRF攻擊锭吨，受害者必須依次完成兩個步驟：
登錄受信任網(wǎng)站A，并在本地生成Cookie寒匙。
在不登出A的情況下耐齐，訪問危險網(wǎng)站B。
服務(wù)端的CSRF方式方法很多樣蒋情，但總的思想都是一致的，就是在客戶端頁面增加偽隨機數(shù)耸携。
HTTP和HTTPS
HTTP協(xié)議通常承載于TCP協(xié)議之上棵癣，在HTTP和TCP之間添加一個安全協(xié)議層（SSL或TSL），這個時候夺衍，就成了我們常說的HTTPS狈谊。
默認(rèn)HTTP的端口號為80适滓，HTTPS的端口號為443沟娱。
為什么HTTPS更安全
因為網(wǎng)絡(luò)請求需要中間有很多的服務(wù)器路由器的轉(zhuǎn)發(fā)。中間的節(jié)點都可能篡改信息，而如果使用HTTPS席镀，密鑰在你和終點站才有。https之所以比http安全揍很，是因為他利用ssl/tls協(xié)議傳輸融柬。它包含證書，卸載务甥，流量轉(zhuǎn)發(fā)牡辽，負(fù)載均衡，頁面適配敞临，瀏覽器適配态辛，refer傳遞等。保障了傳輸過程的安全性挺尿。
對前端模塊化的認(rèn)識
模塊化是指在解決某一個復(fù)雜問題或者一系列的雜糅問題時奏黑，依照一種分類的思維把問題進行系統(tǒng)性的分解以之處理。模塊化是一種處理復(fù)雜系統(tǒng)分解為代碼結(jié)構(gòu)更合理编矾，可維護性更高的可管理的模塊的方式熟史。可以想象一個巨大的系統(tǒng)代碼洽沟，被整合優(yōu)化分割成邏輯性很強的模塊時以故，對于軟件是一種何等意義的存在。對于軟件行業(yè)來說：解耦軟件系統(tǒng)的復(fù)雜性裆操，使得不管多么大的系統(tǒng)怒详，也可以將管理，開發(fā)踪区，維護變得“有理可循”昆烁。
AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
CMD 是 SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出缎岗。
AMD 是提前執(zhí)行静尼，CMD 是延遲執(zhí)行。
代碼層面的性能優(yōu)化
1.少用全局變量
2.避免全局查詢
3.多個變量聲明合并
4.盡量避免寫在HTML標(biāo)簽中寫Style屬性
移動端性能優(yōu)化
1.盡量使用css3動畫传泊，開啟硬件加速鼠渺。
2.CSS中的屬性（CSS3 transitions、CSS3 3D transforms眷细、Opacity拦盹、Canvas、WebGL溪椎、Video）會觸發(fā)GPU渲染普舆，請合理使用恬口。過渡使用會引發(fā)手機過耗電增加
3.不濫用Float。Float在渲染時計算量比較大沼侣，盡量減少使用
ES6的了解
1.新增模板字符串（為JavaScript提供了簡單的字符串插值功能）
2.箭頭函數(shù)（操作符左邊為輸入的參數(shù)祖能，而右邊則是進行的操作以及返回的值Inputs=>outputs。）
3.for-of（用來遍歷數(shù)據(jù)—例如數(shù)組中的值蛾洛。）arguments對象可被不定參數(shù)和默認(rèn)參數(shù)完美代替养铸。
4.ES6將promise對象納入規(guī)范，提供了原生的Promise對象雅潭。
5.增加了let和const命令揭厚，用來聲明變量。增加了塊級作用域扶供。let命令實際上就增加了塊級作用域筛圆。
6.ES6規(guī)定，var命令和function命令聲明的全局變量椿浓，屬于全局對象的屬性太援；let命令、const命令扳碍、class命令聲明的全局變量提岔，不屬于全局對象的屬性
7.還有就是引入module模塊的概念
你覺得jQuery或zepto源碼有哪些寫的好的地方?
(function( window, undefined ) {

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

    //在這里邊var定義的變量笋敞，屬于這個函數(shù)域內(nèi)的局部變量碱蒙，避免污染全局

    //把當(dāng)前沙箱需要的外部變量通過函數(shù)參數(shù)引入進來

    //只要保證參數(shù)對內(nèi)提供的接口的一致性，你還可以隨意替換傳進來的這個參數(shù)

    window.jQuery = window.$ = jQuery;

})( window );
defer和async
<script src="script.js"></script>
沒有 defer 或 async夯巷，瀏覽器會立即加載并執(zhí)行指定的腳本赛惩，“立即”指的是在渲染該 script 標(biāo)簽之 下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素趁餐，讀到就加載并執(zhí)行喷兼。
<script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）后雷。
<script defer src="myscript.js"></script>
有 defer季惯，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后臀突，DOMContentLoaded 事件觸發(fā)之前完成勉抓。
然后從實用角度來說呢，首先把所有腳本都丟到 之前是最佳實踐候学，因為對于舊瀏覽器來說這是唯一的優(yōu)化選擇琳状，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。
用過哪些設(shè)計模式盒齿？
1.工廠模式
主要好處就是可以消除對象間的耦合念逞，通過使用工程方法而不是new關(guān)鍵字。將所有實例化的代碼集中在一個位置防止代碼重復(fù)边翁。
function createObject(name,age,profession){//集中實例化的函數(shù)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');//第二個實例

2.構(gòu)造函數(shù)模式
使用構(gòu)造函數(shù)的方法翎承，即解決了重復(fù)實例化的問題 ，又解決了對象識別的問題符匾，該模式與工廠模式的不同之處在于：
1).構(gòu)造函數(shù)方法沒有顯示的創(chuàng)建對象 (new Object());
2).直接將屬性和方法賦值給 this 對象;
3).沒有 renturn 語句叨咖。

說說你對閉包的理解
使用閉包主要是為了設(shè)計私有的方法和變量。閉包的優(yōu)點是可以避免全局變量的污染啊胶，缺點是閉包會常駐內(nèi)存甸各，會增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露焰坪。在js中趣倾，函數(shù)即閉包，只有函數(shù)才會產(chǎn)生作用域的概念.
閉包的三個特性：
1.函數(shù)嵌套函數(shù)
2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
3.參數(shù)和變量不會被垃圾回收機制回收
瀏覽器本地存儲的問題
在較高版本的瀏覽器中某饰，js提供了sessionStorage和globalStorage儒恋。
Html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)黔漂，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀诫尽。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲炬守。而localStorage用于持久化的本地存儲牧嫉，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的减途。
web storage和cookie的區(qū)別
1.Web Storage的概念和cookie相似酣藻，區(qū)別是它是為了更大容量存儲設(shè)計的。Cookie的大小是受限的观蜗，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去臊恋，這樣無形中浪費了帶寬，另外cookie還需要指定作用域墓捻，不可以跨域調(diào)用抖仅。
2.除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法砖第，不像cookie需要前端開發(fā)者自己封裝setCookie撤卢，getCookie。
3.但是cookie也是不可以或缺的：cookie的作用是與服務(wù)器進行交互梧兼，作為HTTP規(guī)范的一部分而存在 放吩，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生
4.瀏覽器的支持除了IE７及以下不支持外，其他標(biāo)準(zhǔn)瀏覽器都完全支持(ie及FF需在web服務(wù)器里運行)羽杰，值得一提的是IE總是辦好事渡紫，例如IE7到推、IE6中的userData其實就是javascript本地存儲的解決方案。通過簡單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage惕澎。
5.localStorage和sessionStorage都具有相同的操作方法莉测，例如setItem、getItem和removeItem等
cookie 和session 的區(qū)別
1.cookie數(shù)據(jù)存放在客戶的瀏覽器上唧喉，session數(shù)據(jù)放在服務(wù)器上捣卤。
2.cookie不是很安全，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙八孝，考慮到安全應(yīng)當(dāng)使用session董朝。
3.session會在一定時間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多干跛，會比較占用你服務(wù)器的性能子姜。考慮到減輕服務(wù)器性能方面驯鳖，應(yīng)當(dāng)使用COOKIE闲询。
4.單個cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie浅辙。
5.個人建議：
將登陸信息等重要信息存放為SESSION
其他信息如果需要保留扭弧，可以放在COOKIE中
position:absolute和float屬性的異同?
共同點：對內(nèi)聯(lián)元素設(shè)置float和absolute屬性，可以讓元素脫離文檔流记舆，并且可以設(shè)置其寬高鸽捻。
不同點：float仍會占據(jù)位置，absolute會覆蓋文檔流中的其他元素泽腮。
介紹一下box-sizing屬性御蒲？
box-sizing屬性主要用來控制元素的盒模型的解析模式。默認(rèn)值是content-box诊赊；
content-box：讓元素維持W3C的標(biāo)準(zhǔn)盒模型厚满。元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高碧磅。
CSS選擇符碘箍？
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）：作用于子元素的第一代后代
6.后代選擇器（li a)：作用于所有子后代元素
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li:nth-child）
優(yōu)先級為:!important > id > class > tag

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 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。
CSS3有哪些新特性盗蟆？
CSS3實現(xiàn)圓角（border-radius）戈二，陰影（box-shadow），
對文字加特效（text-shadow喳资、）挽拂，線性漸變（gradient），旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
在CSS3中唯一引入的偽元素是::selection.（匹配被用戶鼠標(biāo)選取的部分骨饿。）
CSS3中新增了一種盒模型計算方式：box-sizing：
盒模型默認(rèn)的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區(qū)別如下：
1.content-box（默認(rèn)）
布局所占寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
2.padding-box：
布局所占寬度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
3.border-box：
布局所占寬度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
浮動元素引起的問題和解決辦法台腥？
浮動元素引起的問題：
（1）父元素的高度無法被撐開宏赘，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動黎侈，否則會影響頁面顯示的結(jié)構(gòu)
清除浮動的解決方法：
1.額外標(biāo)簽法察署，
（缺點：不過這個辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）2.使用after偽類

parent:after{

 content:".";
 height:0;
 visibility:hidden;
 display:block;
 clear:both;

}
3.浮動外部元素
4.設(shè)置overflow為hidden或者auto
DOM操作——怎樣添加峻汉、移除贴汪、移動、復(fù)制休吠、創(chuàng)建和查找節(jié)點?
1）創(chuàng)建新節(jié)點
createDocumentFragment() //創(chuàng)建一個DOM片段
createElement() //創(chuàng)建一個具體的元素
createTextNode() //創(chuàng)建一個文本節(jié)點
2）添加扳埂、移除、替換瘤礁、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //并沒有insertAfter()
3）查找
getElementsByTagName() //通過標(biāo)簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強阳懂，會得到一個數(shù)組，其中包括id等于name值的)
getElementById() //通過元素Id柜思，唯一性
html5有哪些新特性岩调、移除了那些元素？
HTML5主要是關(guān)于圖像赡盘，位置号枕，存儲，多任務(wù)等功能的增加陨享。
1.拖拽釋放(Drag and drop) API
2.語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
3.音頻葱淳、視頻API(audio,video)
4.畫布(Canvas) API
5.地理(Geolocation) API
6.本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失霉咨；
7.sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
8.表單控件蛙紫，calendar、date途戒、time坑傅、email、url喷斋、search
9.新的技術(shù)webworker, websocket, Geolocation
如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?
調(diào)用localstorge唁毒、cookies等本地存儲方式蒜茴。
null和undefined的區(qū)別？
null是一個表示”無”的對象浆西，轉(zhuǎn)為數(shù)值時為0粉私；undefined是一個表示”無”的原始值，轉(zhuǎn)為數(shù)值時為NaN近零。
當(dāng)聲明的變量還未被初始化時诺核，變量的默認(rèn)值為undefined。
null用來表示尚未存在的對象久信，常用來表示函數(shù)企圖返回一個不存在的對象窖杀。
undefined表示”缺少值”，就是此處應(yīng)該有一個值裙士，但是還沒有定義入客。典型用法是：
（1）變量被聲明了，但沒有賦值時腿椎，就等于undefined桌硫。
（2) 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供啃炸，該參數(shù)等于undefined铆隘。
（3）對象沒有賦值的屬性，該屬性的值為undefined肮帐。
（4）函數(shù)沒有返回值時咖驮，默認(rèn)返回undefined。
null表示”沒有對象”训枢，即該處不應(yīng)該有值托修。典型用法是：
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象恒界。
（2） 作為對象原型鏈的終點睦刃。
new操作符具體干了什么呢?
1、創(chuàng)建一個空對象十酣，并且 this 變量引用該對象涩拙，同時還繼承了該函數(shù)的原型。
2耸采、屬性和方法被加入到 this 引用的對象中兴泥。
3、新創(chuàng)建的對象由 this 所引用虾宇，并且最后隱式的返回 this 搓彻。
js延遲加載的方式有哪些？
1.defer：如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執(zhí)行；如果既不使用 async 也不使用 defer：在瀏覽器繼續(xù)解析頁面之前旭贬，立即讀取并執(zhí)行腳本
2.async：如果 async="async"：腳本相對于頁面的其余部分異步地執(zhí)行（當(dāng)頁面繼續(xù)進行解析時怔接，腳本將被執(zhí)行）
3.動態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中稀轨，加載完畢后callBack）
4.按需異步載入js
哪些操作會造成內(nèi)存泄漏扼脐？
內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
1.意外的全局變量
js中如果不用 var 聲明變量,該變量將被視為 window 對象(全局對象)的屬性,也就是全局變量奋刽，調(diào)用完了函數(shù)以后,變量仍然存在,導(dǎo)致泄漏.
如果不注意 this 的話,還可能會這么漏:
function foo() {
this.variable = "potential accidental global";
}

// 沒有對象調(diào)用foo, 也沒有給它綁定this, 所以this是window
foo();
可以通過加上 'use strict' 啟用嚴(yán)格模式來避免這類問題, 嚴(yán)格模式會阻止你創(chuàng)建意外的全局變量.
2.被遺忘的定時器或者回調(diào)
3.沒有清理的DOM元素引用
4.閉包

異步加載和延遲加載瓦侮？
1.異步加載的方案： 動態(tài)插入script標(biāo)簽
2.通過ajax去獲取js代碼，然后通過eval執(zhí)行
3.script標(biāo)簽上添加defer或者async屬性
4.創(chuàng)建并插入iframe佣谐，讓它異步執(zhí)行js
5.延遲加載：有些 js 代碼并不是頁面初始化的時候就立刻需要的脏榆，而稍后的某些情況才需要的。
一個頁面從輸入 URL 到頁面加載顯示完成台谍，這個過程中都發(fā)生了什么？
分為4個步驟：
（1）當(dāng)發(fā)送一個URL請求時吁断，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL趁蕊，瀏覽器都會開啟一個線程來處理這個請求，同時在遠(yuǎn)程DNS服務(wù)器上啟動一個DNS查詢仔役。這能使瀏覽器獲得請求對應(yīng)的IP地址掷伙。
（2）瀏覽器與遠(yuǎn)程Web服務(wù)器通過TCP三次握手協(xié)商來建立一個TCP/IP連接。該握手包括一個同步報文又兵，一個同步-應(yīng)答報文和一個應(yīng)答報文任柜，這三個報文在 瀏覽器和服務(wù)器之間傳遞。該握手首先由客戶端嘗試建立起通信沛厨，而后服務(wù)器應(yīng)答并接受客戶端的請求宙地，最后由客戶端發(fā)出該請求已經(jīng)被接受的報文。
（3）一旦TCP/IP連接建立逆皮，瀏覽器會通過該連接向遠(yuǎn)程服務(wù)器發(fā)送HTTP的GET請求宅粥。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源，值為200的HTTP響應(yīng)狀態(tài)表示一個正確的響應(yīng)电谣。
（4）此時秽梅，Web服務(wù)器提供資源服務(wù)，客戶端開始下載資源剿牺。
請解釋一下 JavaScript 的同源策略企垦？
概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)。它最早出自Netscape Navigator2.0晒来，其目的是防止某個文檔或腳本從多個不同源裝載钞诡。
這里的同源策略指的是：協(xié)議，域名，端口相同臭增，同源策略是一種安全協(xié)議懂酱。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
為什么要有同源限制誊抛？
我們舉例說明：比如一個黑客程序列牺，他利用Iframe（行內(nèi)框架）把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實的用戶名拗窃，密碼登錄時瞎领，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名随夸，密碼就輕松到手了九默。
GET和POST的區(qū)別，何時使用POST宾毒？
GET：一般用于信息獲取驼修，使用URL傳遞參數(shù)，對所發(fā)送信息的數(shù)量也有限制诈铛，一般在2000個字符
POST：一般用于修改服務(wù)器上的資源乙各，對所發(fā)送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值幢竹，而POST方式通過Request.Form來獲取變量的值耳峦，也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值焕毫。
然而蹲坷，在以下情況中，請使用 POST 請求：
1.無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
2.向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
3.發(fā)送包含未知字符的用戶輸入時邑飒，POST 比 GET 更穩(wěn)定也更可靠
對重構(gòu)的理解循签？
網(wǎng)站重構(gòu)：在不改變外部行為的前提下，簡化結(jié)構(gòu)疙咸、添加可讀性懦底，而在網(wǎng)站前端保持一致的行為。也就是說是在不改變UI的情況下罕扎，對網(wǎng)站進行優(yōu)化聚唐。
對于傳統(tǒng)的網(wǎng)站來說重構(gòu)通常是：
1.表格(table)布局改為DIV+CSS
2.使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對于不合規(guī)范的CSS、如對IE6有效的)
3.對于移動平臺的優(yōu)化
4.針對于SEO（搜索引擎）進行優(yōu)化
深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面：
1.減少代碼間的耦合
2.讓代碼保持彈性
3.嚴(yán)格按規(guī)范編寫代碼
4.設(shè)計可擴展的API
5.代替舊有的框架腔召、語言(如VB)
6.增強用戶體驗
網(wǎng)頁速度的優(yōu)化：
1.壓縮JS杆查、CSS、image等前端資源(通常是由服務(wù)器來解決)
2.程序的性能優(yōu)化(如數(shù)據(jù)讀寫)
3.采用CDN來加速資源加載
4.對于JS DOM的優(yōu)化
5.HTTP服務(wù)器的文件緩存
HTTP狀態(tài)碼
100 Continue 繼續(xù)臀蛛，一般在發(fā)送post請求時亲桦，已發(fā)送了http header之后服務(wù)端將返回此信息崖蜜，表示確認(rèn)，之后發(fā)送具體參數(shù)信息
200 OK 正常返回信息
201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源
202 Accepted 服務(wù)器已接受請求客峭，但尚未處理
301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置豫领。
302 Found 臨時性重定向。
303 See Other 臨時性重定向舔琅，且總是使用 GET 請求新的 URI等恐。
304 Not Modified 自從上次請求后，請求的網(wǎng)頁未修改過备蚓。
400 Bad Request 服務(wù)器無法理解請求的格式课蔬，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求。
401 Unauthorized 請求未授權(quán)郊尝。
403 Forbidden 禁止訪問二跋。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最常見的服務(wù)器端錯誤流昏。
503 Service Unavailable 服務(wù)器端暫時無法處理請求（可能是過載或維護）扎即。
嚴(yán)格模式主要有哪些限制？
1.變量必須聲明后再使用
2.函數(shù)的參數(shù)不能有同名屬性况凉，否則報錯
3.不能使用with語句
4.不能對只讀屬性賦值铺遂，否則報錯
5.不能使用前綴0表示八進制數(shù)，否則報錯
6.不能刪除不可刪除的屬性茎刚，否則報錯
7.不能刪除變量delete prop，會報錯撤逢，只能刪除屬性delete global[prop]8.eval不會在它的外層作用域引入變量
9.eval和arguments不能被重新賦值
10.arguments不會自動反映函數(shù)參數(shù)的變化
11.不能使用arguments.callee
12.不能使用arguments.caller
13.禁止this指向全局對象
14.不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧
15.增加了保留字（比如protected膛锭、static和interface）
設(shè)立”嚴(yán)格模式”的目的，主要有以下幾個：
1.消除Javascript語法的一些不合理蚊荣、不嚴(yán)謹(jǐn)之處初狰，減少一些怪異行為;
2.消除代碼運行的一些不安全之處，保證代碼運行的安全互例；
3.提高編譯器效率奢入，增加運行速度；
4.為未來新版本的Javascript做好鋪墊媳叨。

document.write()的用法
document.write()方法可以用在兩個方面：頁面載入過程中用實時腳本創(chuàng)建頁面內(nèi)容腥光，以及用延時腳本創(chuàng)建本窗口或新窗口的內(nèi)容。
document.write只能重繪整個頁面糊秆。innerHTML可以重繪頁面的一部分
git fetch和git pull的區(qū)別
git pull：相當(dāng)于是從遠(yuǎn)程獲取最新版本并merge到本地
git fetch：相當(dāng)于是從遠(yuǎn)程獲取最新版本到本地武福，不會自動merge
對MVC和MVVM的理解
MVC:View 傳送指令到 Controller;Controller 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài);Model 將新的數(shù)據(jù)發(fā)送到 View痘番，用戶得到反饋.
MVVC：View：UI界面;ViewModel：它是View的抽象捉片，負(fù)責(zé)View與Model之間信息轉(zhuǎn)換平痰，將View的Command傳送到Model；Model：數(shù)據(jù)訪問層.
什么是事件代理伍纫？
事件代理（Event Delegation）宗雇，又稱之為事件委托。是 JavaScript 中常用綁定事件的常用技巧莹规。顧名思義赔蒲，“事件代理”即是把原本需要綁定的事件委托給父元素，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)访惜。
事件代理的原理是DOM元素的事件冒泡嘹履。使用事件代理的好處是可以提高性能。
attribute和property的區(qū)別是什么债热？
attribute是dom元素在文檔中作為html標(biāo)簽擁有的屬性砾嫉；
property就是dom元素在js中作為對象擁有的屬性。
所以：對于html的標(biāo)準(zhǔn)屬性來說窒篱，attribute和property是同步的焕刮，是會自動更新的，但是對于自定義的屬性來說墙杯，他們是不同步的配并。
什么樣的前端代碼是好的
高復(fù)用低耦合，這樣文件小高镐，好維護溉旋，而且好擴展。
H5常見問題和注意事項

Meta基礎(chǔ)知識
1.H5頁面窗口自動調(diào)整到設(shè)備寬度嫉髓，并禁止用戶縮放頁面：
html標(biāo)簽：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 設(shè)置viewport寬度观腊，為一個正整數(shù)，或字符串‘device-width’
// height 設(shè)置viewport高度算行，一般設(shè)置了寬度梧油，會自動解析出高度，可以不用設(shè)置
// initial-scale 默認(rèn)縮放比例州邢，為一個數(shù)字儡陨，可以帶小數(shù)
// minimum-scale 允許用戶最小縮放比例，為一個數(shù)字量淌，可以帶小數(shù)
// maximum-scale 允許用戶最大縮放比例洋措，為一個數(shù)字渣窜，可以帶小數(shù)
// user-scalable 是否允許手動縮放
js方法：
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
空白頁基本meta標(biāo)簽
打電話發(fā)短信寫郵件的實現(xiàn)
1.打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>
2.發(fā)短信
<a href="sms:10086">發(fā)短信給: 10086</a>
3.發(fā)郵件
<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[郵件主題]&body=騰訊誠邀您參與%0A%0Ahttp://www.baidu.com%0A%0A

Rentina顯示屏原理及設(shè)計方案
retina屏是一種具備超高像素密度的液晶屏漏益，同樣大小的屏幕上顯示的像素點由1個變?yōu)槎鄠€，如在同樣帶下的屏幕上深胳，蘋果設(shè)備的retina顯示屏中绰疤，像素點1個變?yōu)?個。
在高清顯示屏中的位圖被放大舞终，圖片會變得模糊轻庆，因此移動端的視覺稿通常會設(shè)計為傳統(tǒng)PC的2倍。
前端的應(yīng)對方案是：設(shè)計稿切出來的圖片長寬保證為偶數(shù)敛劝，并使用backgroud-size把圖片縮小為原來的1/2余爆。
例如圖片寬高為：200px*200px，那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來的1/2夸盟，例如視覺稿40px的字體蛾方，使用樣式的寫法為20px
.css{font-size:20px}

image-set設(shè)計Rentina背景圖
image-set,webkit私有屬性，也是CSS4的屬性上陕，為解決Rentina屏幕下的圖像而生桩砰。

.css {
background: url(images/bg.jpg) no-repeat center;
background: -webkit-image-set(
url(images/bg.jpg) 1x, //支持image-set普通屏
url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan
}

美化表單元素
使用appearance改變webkit瀏覽器的默認(rèn)外觀
input,select { -webkit-appearance:none; appearance: none; }
超實用的CSS樣式
去掉webkit的滾動條——display: none;
其他參數(shù)
::-webkit-scrollba //滾動條整體部分
::-webkit-scrollbar-thumb //滾動條內(nèi)的小方塊
::-webkit-scrollbar-track //滾動條軌道
::-webkit-scrollbar-button //滾動條軌道兩端按鈕
::-webkit-scrollbar-track-piece //滾動條中間部分，內(nèi)置軌道
::-webkit-scrollbar-corner //邊角唆垃，兩個滾動條交匯處
::-webkit-resizer //兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件
禁止長按鏈接與圖片彈出菜單
a,img { -webkit-touch-callout: none }

禁止ios和android用戶選中文字
html,body {-webkit-user-select:none; user-select: none; }

改變輸入框placeholder的顏色值

::-webkit-input-placeholder {
color: #999; }
:-moz-placeholder {
color: #999; }
::-moz-placeholder {
color: #999; }
:-ms-input-placeholder {
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
android上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}

取消input在ios下，輸入的時候英文首字母的默認(rèn)大寫
<input autocapitalize="off" autocorrect="off" />

手機拍照和上傳圖片
IOS有拍照痘儡、錄像辕万、選取本地圖片功能，部分Android只有選擇本地圖片功能沉删。Winphone不支持

<input type="file" accept="images/" />
<input type="file" accept="video/" />
屏幕旋轉(zhuǎn)的事件和樣式
JS處理
function orientInit(){
var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
if(orientChk =='lapdscape'){
//這里是橫屏下需要執(zhí)行的事件
}else{
//這里是豎屏下需要執(zhí)行的事件
}
}

orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
setTimeout(orientInit, 100);
},false)

CSS處理

//豎屏?xí)r樣式
@media all and (orientation:portrait){ }
//橫屏?xí)r樣式
@media all and (orientation:landscape){ }
audio元素和video元素在ios和andriod中無法自動播放
音頻渐尿，寫法一
<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>
音頻，寫法二
<audio controls="controls">
<source src="music/bg.ogg" type="audio/ogg"></source>
<source src="music/bg.mp3" type="audio/mpeg"></source>
優(yōu)先播放音樂bg.ogg矾瑰，不支持在播放bg.mp3
</audio>
JS綁定自動播放（操作window時砖茸，播放音樂）

$(window).one('touchstart', function(){
music.play();
})
微信下兼容處理

document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
小結(jié)
1.audio元素的autoplay屬性在IOS及Android上無法使用，在PC端正常
2.audio元素沒有設(shè)置controls時殴穴，在IOS及Android會占據(jù)空間大小凉夯，而在PC端Chrome是不會占據(jù)任何空間

重力感應(yīng)事件
運用HTML5的deviceMotion货葬，調(diào)用重力感應(yīng)事件

if(window.DeviceMotionEvent){
document.addEventListener('devicemotion', deviceMotionHandler, false)
}

var speed = 30;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
//這里是搖動后要執(zhí)行的方法
yaoAfter();
}
lastX = x;
lastY = y;
lastZ = z;
}

function yaoAfter(){
//do something
}
微信瀏覽器用戶調(diào)整字體大小后頁面矬了，怎么阻止用戶調(diào)整
以下代碼可使Android機頁面不再受用戶字體縮放強制改變大小劲够，但是會有1S左右延時震桶，期間可以考慮loading來處理
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
alert(JSON.stringify(res));
})
}, 0)
});
}else{
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
alert(JSON.stringify(res));
})
}, 0)
}
IOS下可使用 -webkit-text-size-adjust禁止用戶調(diào)整字體大小
body { -webkit-text-size-adjust:100%!important; }

最好的解決方案：最好使用rem或百分比布局

定位的坑
fixed定位
1.ios下fixed元素容易定位出錯，軟鍵盤彈出時征绎，影響fixed元素定位
2.android下fixed表現(xiàn)要比iOS更好蹲姐，軟鍵盤彈出時，不會影響fixed元素定位
3.ios4下不支持position:fixed
解決方案：使用Iscroll人柿，如：
<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div>
<script src="iscroll.js"></script>
<script>
var myscroll;
function loaded(){
myscroll=new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>
position定位
Android下彈出軟鍵盤彈出時柴墩，影響absolute元素定位
解決方案:

var ua = navigator.userAgent.indexOf('Android');
if(ua>-1){
$('.ipt').on('focus', function(){
$('.css').css({'visibility':'hidden'})
}).on('blur', function(){
$('.css').css({'visibility':'visible'})
})
}
播放視頻不全屏
1.ios7+支持自動播放
2.支持Airplay的設(shè)備（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放視頻不全屏
webkit-playsinline="true"
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
JS判斷設(shè)備
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; i<len,len = agent.length; i++){
if(ua.indexOf(agent[i])>0){
break;
}
}
}
deviceType();
window.addEventListener('resize', function(){
deviceType();
})
JS判斷微信瀏覽器
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
android 2.3 bug
1.@-webkit-keyframes 需要以0%開始100%結(jié)束凫岖，0%的百分號不能去掉
2.after和before偽類無法使用動畫animation
3.border-radius不支持%單位江咳，如要兼容，可以給radius設(shè)置一下較大的值
4.translate百分比的寫法和scale在一起會導(dǎo)致失效隘截，例如：
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug
1.三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
2.同時設(shè)置border-radius和背景色的時候扎阶，背景色會溢出到圓角以外部分
3.部分手機(如三星)，a鏈接支持鼠標(biāo):visited事件婶芭，也就是說鏈接訪問后文字變?yōu)樽仙?br> 4.android無法同時播放多音頻audio
消除transition閃屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
開啟硬件加速
目前东臀，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，當(dāng)檢測到某個DOM元素應(yīng)用了某些CSS規(guī)則時就會自動開啟犀农，從而解決頁面閃白惰赋，保證動畫流暢。
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
渲染優(yōu)化
1.禁止使用iframe（阻塞父文檔onload事件）
2.禁止使用gif圖片實現(xiàn)loading效果（降低CPU消耗呵哨，提升渲染性能）
使用CSS3代碼代替JS動畫赁濒；
開啟GPU加速；
使用base64位編碼圖片(不小圖而言孟害，大圖不建議使用)
對于一些小圖標(biāo)拒炎，可以使用base64位編碼，以減少網(wǎng)絡(luò)請求挨务。但不建議大圖使用击你，比較耗費CPU。小圖標(biāo)優(yōu)勢在于：
1.減少HTTP請求谎柄；
2.避免文件跨域丁侄；
3.修改及時生效；