css面試試題小結

 

 

行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(能夠設置line-height)，margin上下無效，padding上下無效。
告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。
link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS.link寫在html頁面中，@import寫在CSS頁面中
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，好比 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
this老是指向函數的直接調用者（而非間接調用者）；若是有new關鍵字，this指向new出來的那個對象；
null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。
性能優化的方法：
（1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。
（2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數
（3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。
（4） 當須要設置的樣式不少時設置className而不是直接操做style。
（5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。
（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
（7） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。
內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
cookie數據大小不能超過4k。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。有期時間：
(1)localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
(2)sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
(3)cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
如何在頁面上實現一個圓形的可點擊區域？
（1）map+area或者svg
（2）border-radius
（3）純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等
CSS優先級爲: !important > id > class > tag
display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。
absolute浮動定位是相對於父級中設置position爲relative或者absolute最近的父級元素，fixed浮動定位是相對於瀏覽器視窗的；
ajax過程：
(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.
(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新
一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
（1）查找瀏覽器緩存
（2）DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
（3）進行HTTP協議會話
（4）客戶端發送報頭(請求報頭)
（5）服務器回饋報頭(響應報頭)
（6）html文檔開始下載
（7）文檔樹創建，根據標記請求所需指定MIME類型的文件
（8）文件顯示
對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性；
清除浮動的幾種方式，各自的優缺點
1.使用空標籤清除浮動 clear:both（理論上能清除任何標籤，增長無心義的標籤）
2.使用overflow:auto（空標籤元素清除浮動而不得不增長無心代碼的弊端,使用zoom:1用於兼容IE）
3.是用afert僞元素清除浮動(用於非IE瀏覽器)
javascript的typeof返回哪些數據類型
Object number function boolean underfind
position的值， relative和absolute分別是相對於誰進行定位的？
absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。
fixed （老IE不支持）生成絕對定位的元素，一般相對於瀏覽器窗口或 frame 進行定位。
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
static 默認值。沒有定位，元素出如今正常的流中
sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出
如何解決跨域問題？
jsonp，原理是：動態插入script標籤，經過script標籤引入一個js文件，這個js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的json數據做爲參數傳入。因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源，爲了實現跨域請求，能夠經過script標籤實現跨域請求，而後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。
優勢是兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊。缺點是隻支持GET請求。
JSONP：json+padding（內填充），顧名思義，就是把JSON填充到一個盒子裏。
建立ajax過程
(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.
(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.
談談你對webpack的見解
WebPack 是一個模塊打包工具，你可使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、JavaScript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源。
常見web安全及防禦原理
1.sql注入原理
就是經過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。
永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙"-"進行轉換等。
永遠不要使用動態拼裝SQL，可使用參數化的SQL或者直接使用存儲過程進行數據查詢存取。
永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接。
不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息。
2.XSS原理及防範
Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裏插入惡意 html標籤或者JavaScript代碼。好比：攻擊者在論壇中放一個看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點。
首先代碼裏對用戶輸入的地方和變量都須要仔細檢查長度和對」<」,」>」,」;」,」’」等字符作過濾；其次任何內容寫到頁面以前都必須加以encode，避免不當心把html tag 弄出來。這一個層面作好，至少能夠堵住超過一半的XSS 攻擊。首先，避免直接在cookie 中泄露用戶隱私，例如email、密碼等等。其次，經過使cookie 和系統ip 綁定來下降cookie 泄露後的危險。這樣攻擊者獲得的cookie 沒有實際價值，不可能拿來重放。若是網站不須要再瀏覽器端對cookie 進行操做，能夠在Set-Cookie 末尾加上HttpOnly 來防止javascript 代碼直接獲取cookie 。儘可能採用POST 而非GET 提交表單。
3.CSRF
XSS是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：
登陸受信任網站A，並在本地生成Cookie。
在不登出A的狀況下，訪問危險網站B。
服務端的CSRF方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數。
HTTP和HTTPS
HTTP協議一般承載於TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了咱們常說的HTTPS。
默認HTTP的端口號爲80，HTTPS的端口號爲443。
爲何HTTPS更安全
由於網絡請求須要中間有不少的服務器路由器的轉發。中間的節點均可能篡改信息，而若是使用HTTPS，密鑰在你和終點站纔有。https之因此比http安全，是由於他利用ssl/tls協議傳輸。它包含證書，卸載，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer傳遞等。保障了傳輸過程的安全性。
對前端模塊化的認識
模塊化是指在解決某一個複雜問題或者一系列的雜糅問題時，依照一種分類的思惟把問題進行系統性的分解以之處理。模塊化是一種處理複雜系統分解爲代碼結構更合理，可維護性更高的可管理的模塊的方式。能夠想象一個巨大的系統代碼，被整合優化分割成邏輯性很強的模塊時，對於軟件是一種何等意義的存在。對於軟件行業來講：解耦軟件系統的複雜性，使得無論多麼大的系統，也能夠將管理，開發，維護變得「有理可循」。
AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。
CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。
AMD 是提早執行，CMD 是延遲執行。
代碼層面的性能優化
1.少用全局變量
2.避免全局查詢
3.多個變量聲明合併
4.儘可能避免寫在HTML標籤中寫Style屬性
移動端性能優化
1.儘可能使用css3動畫，開啓硬件加速。
2.CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引起手機過耗電增長
3.不濫用Float。Float在渲染時計算量比較大，儘可能減小使用
ES6的瞭解
1.新增模板字符串（爲JavaScript提供了簡單的字符串插值功能）
2.箭頭函數（操做符左邊爲輸入的參數，而右邊則是進行的操做以及返回的值Inputs=>outputs。）
3.for-of（用來遍歷數據—例如數組中的值。）arguments對象可被不定參數和默認參數完美代替。
4.ES6將promise對象歸入規範，提供了原生的Promise對象。
5.增長了let和const命令，用來聲明變量。增長了塊級做用域。let命令實際上就增長了塊級做用域。
6.ES6規定，var命令和function命令聲明的全局變量，屬於全局對象的屬性；let命令、const命令、class命令聲明的全局變量，不屬於全局對象的屬性
7.還有就是引入module模塊的概念
你以爲jQuery或zepto源碼有哪些寫的好的地方?
(function( window, undefined ) {

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

        //在這裏邊var定義的變量，屬於這個函數域內的局部變量，避免污染全局

        //把當前沙箱須要的外部變量經過函數參數引入進來

        //只要保證參數對內提供的接口的一致性，你還能夠隨意替換傳進來的這個參數

        window.jQuery = window.$ = jQuery;

})( window );
defer和async
<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會當即加載並執行指定的腳本，「當即」指的是在渲染該 script 標籤之 下的文檔元素以前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。
<script async src="script.js"></script>
有 async，加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行（異步）。
<script defer src="myscript.js"></script>
有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。
而後從實用角度來講呢，首先把全部腳本都丟到 以前是最佳實踐，由於對於舊瀏覽器來講這是惟一的優化選擇，此法可保證非腳本的其餘一切元素可以以最快的速度獲得加載和解析。
用過哪些設計模式？
1.工廠模式
主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是new關鍵字。將全部實例化的代碼集中在一個位置防止代碼重複。
function createObject(name,age,profession){//集中實例化的函數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.構造函數模式
使用構造函數的方法，即解決了重複實例化的問題 ，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於：
1).構造函數方法沒有顯示的建立對象 (new Object());
2).直接將屬性和方法賦值給 this 對象;
3).沒有 renturn 語句。

說說你對閉包的理解
使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念.
閉包的三個特性：
1.函數嵌套函數
2.函數內部能夠引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收
瀏覽器本地存儲的問題
在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。
Html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。
web storage和cookie的區別
1.Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。
2.除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。
3.可是cookie也是不能夠或缺的：cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生
4.瀏覽器的支持除了IE７及如下不支持外，其餘標準瀏覽器都徹底支持(ie及FF需在web服務器裏運行)，值得一提的是IE老是辦好事，例如IE7、IE6中的userData其實就是javascript本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage。
5.localStorage和sessionStorage都具備相同的操做方法，例如setItem、getItem和removeItem等
cookie 和session 的區別
1.cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
2.cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙，考慮到安全應當使用session。
3.session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能。考慮到減輕服務器性能方面，應當使用COOKIE。
4.單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。
5.我的建議：
將登錄信息等重要信息存放爲SESSION
其餘信息若是須要保留，能夠放在COOKIE中
position:absolute和float屬性的異同?
共同點：對內聯元素設置float和absolute屬性，可讓元素脫離文檔流，而且能夠設置其寬高。
不一樣點：float仍會佔據位置，absolute會覆蓋文檔流中的其餘元素。
介紹一下box-sizing屬性？
box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box；
content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高。
CSS選擇符？
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）：做用於子元素的第一代後代
6.後代選擇器（li a)：做用於全部子後代元素
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（a: hover, li:nth-child）
優先級爲:!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 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。
CSS3有哪些新特性？
CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
在CSS3中惟一引入的僞元素是::selection.（匹配被用戶鼠標選取的部分。）
CSS3中新增了一種盒模型計算方式：box-sizing：
盒模型默認的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區別以下：
1.content-box（默認）
佈局所佔寬度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）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構
清除浮動的解決方法：
1.額外標籤法，
（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）2.使用after僞類
#parent:after{
     content:".";
     height:0;
     visibility:hidden;
     display:block;
     clear:both;
  }
3.浮動外部元素
4.設置overflow爲hidden或者auto
DOM操做——怎樣添加、移除、移動、複製、建立和查找節點?
1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點
2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //並無insertAfter()
3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
getElementById() //經過元素Id，惟一性
html5有哪些新特性、移除了那些元素？
HTML5主要是關於圖像，位置，存儲，多任務等功能的增長。
1.拖拽釋放(Drag and drop) API
2.語義化更好的內容標籤（header,nav,footer,aside,article,section）
3.音頻、視頻API(audio,video)
4.畫布(Canvas) API
5.地理(Geolocation) API
6.本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
7.sessionStorage 的數據在瀏覽器關閉後自動刪除
8.表單控件，calendar、date、time、email、url、search
9.新的技術webworker, websocket, Geolocation
如何實現瀏覽器內多個標籤頁之間的通訊?
調用localstorge、cookies等本地存儲方式。
null和undefined的區別？
null是一個表示」無」的對象，轉爲數值時爲0；undefined是一個表示」無」的原始值，轉爲數值時爲NaN。
當聲明的變量還未被初始化時，變量的默認值爲undefined。
null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。
undefined表示」缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：
（1）變量被聲明瞭，但沒有賦值時，就等於undefined。
（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
（3）對象沒有賦值的屬性，該屬性的值爲undefined。
（4）函數沒有返回值時，默認返回undefined。
null表示」沒有對象」，即該處不該該有值。典型用法是：
（1） 做爲函數的參數，表示該函數的參數不是對象。
（2） 做爲對象原型鏈的終點。
new操做符具體幹了什麼呢?
1、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新建立的對象由 this 所引用，而且最後隱式的返回 this 。
js延遲加載的方式有哪些？
1.defer：若是不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行；若是既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面以前，當即讀取並執行腳本
2.async：若是 async="async"：腳本相對於頁面的其他部分異步地執行（當頁面繼續進行解析時，腳本將被執行）
3.動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）
4.按需異步載入js
哪些操做會形成內存泄漏？
內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
1.意外的全局變量
js中若是不用 var 聲明變量,該變量將被視爲 window 對象(全局對象)的屬性,也就是全局變量，調用完了函數之後,變量仍然存在,致使泄漏.
若是不注意 this 的話,還可能會這麼漏:
function foo() {
    this.variable = "potential accidental global";
}

// 沒有對象調用foo, 也沒有給它綁定this, 因此this是window
foo();
能夠經過加上 'use strict' 啓用嚴格模式來避免這類問題, 嚴格模式會阻止你建立意外的全局變量.
2.被遺忘的定時器或者回調
3.沒有清理的DOM元素引用
4.閉包

異步加載和延遲加載？
1.異步加載的方案： 動態插入script標籤
2.經過ajax去獲取js代碼，而後經過eval執行
3.script標籤上添加defer或者async屬性
4.建立並插入iframe，讓它異步執行js
5.延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的。
一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
分爲4個步驟：
（1）當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。
（2）瀏覽器與遠程Web服務器經過TCP三次握手協商來創建一個TCP/IP鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
（3）一旦TCP/IP鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。
（4）此時，Web服務器提供資源服務，客戶端開始下載資源。
請解釋一下 JavaScript 的同源策略？
概念:同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。
這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
爲何要有同源限制？
咱們舉例說明：好比一個黑客程序，他利用Iframe（行內框架）把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。
GET和POST的區別，什麼時候使用POST？
GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符
POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。
GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。
然而，在如下狀況中，請使用 POST 請求：
1.沒法使用緩存文件（更新服務器上的文件或數據庫）
2.向服務器發送大量數據（POST 沒有數據量限制）
3.發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
對重構的理解？
網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化。
對於傳統的網站來講重構一般是：
1.表格(table)佈局改成DIV+CSS
2.使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
3.對於移動平臺的優化
4.針對於SEO（搜索引擎）進行優化
深層次的網站重構應該考慮的方面：
1.減小代碼間的耦合
2.讓代碼保持彈性
3.嚴格按規範編寫代碼
4.設計可擴展的API
5.代替舊有的框架、語言(如VB)
6.加強用戶體驗
網頁速度的優化：
1.壓縮JS、CSS、image等前端資源(一般是由服務器來解決)
2.程序的性能優化(如數據讀寫)
3.採用CDN來加速資源加載
4.對於JS DOM的優化
5.HTTP服務器的文件緩存
HTTP狀態碼
100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
200 OK 正常返回信息
201 Created 請求成功而且服務器建立了新的資源
202 Accepted 服務器已接受請求，但還沒有處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。
400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未受權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最多見的服務器端錯誤。
503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。
嚴格模式主要有哪些限制？
1.變量必須聲明後再使用
2.函數的參數不能有同名屬性，不然報錯
3.不能使用with語句
4.不能對只讀屬性賦值，不然報錯
5.不能使用前綴0表示八進制數，不然報錯
6.不能刪除不可刪除的屬性，不然報錯
7.不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop]8.eval不會在它的外層做用域引入變量
9.eval和arguments不能被從新賦值
10.arguments不會自動反映函數參數的變化
11.不能使用arguments.callee
12.不能使用arguments.caller
13.禁止this指向全局對象
14.不能使用fn.caller和fn.arguments獲取函數調用的堆棧
15.增長了保留字（好比protected、static和interface）
設立」嚴格模式」的目的，主要有如下幾個：
1.消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
2.消除代碼運行的一些不安全之處，保證代碼運行的安全；
3.提升編譯器效率，增長運行速度；
4.爲將來新版本的Javascript作好鋪墊。

document.write()的用法
document.write()方法能夠用在兩個方面：頁面載入過程當中用實時腳本建立頁面內容，以及用延時腳本建立本窗口或新窗口的內容。
document.write只能重繪整個頁面。innerHTML能夠重繪頁面的一部分
git fetch和git pull的區別
git pull：至關因而從遠程獲取最新版本並merge到本地
git fetch：至關因而從遠程獲取最新版本到本地，不會自動merge
對MVC和MVVM的理解
MVC:View 傳送指令到 Controller;Controller 完成業務邏輯後，要求 Model 改變狀態;Model 將新的數據發送到 View，用戶獲得反饋.
MVVC：View：UI界面;ViewModel：它是View的抽象，負責View與Model之間信息轉換，將View的Command傳送到Model；Model：數據訪問層.
什麼是事件代理？
事件代理（Event Delegation），又稱之爲事件委託。是 JavaScript 中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。
事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能。
attribute和property的區別是什麼？
attribute是dom元素在文檔中做爲html標籤擁有的屬性；
property就是dom元素在js中做爲對象擁有的屬性。
因此：對於html的標準屬性來講，attribute和property是同步的，是會自動更新的，可是對於自定義的屬性來講，他們是不一樣步的。
什麼樣的前端代碼是好的
高複用低耦合，這樣文件小，好維護，並且好擴展。
H5常見問題和注意事項

Meta基礎知識
1.H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面：
html標籤：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width    設置viewport寬度，爲一個正整數，或字符串‘device-width’
// height   設置viewport高度，通常設置了寬度，會自動解析出高度，能夠不用設置
// initial-scale    默認縮放比例，爲一個數字，能夠帶小數
// minimum-scale    容許用戶最小縮放比例，爲一個數字，能夠帶小數
// maximum-scale    容許用戶最大縮放比例，爲一個數字，能夠帶小數
// 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標籤
打電話發短信寫郵件的實現
1.打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>
2.發短信
<a href="sms:10086">發短信給: 10086</a>
3.發郵件
<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<img src='images/1.jpg' />">點擊我發郵件</a>
點擊元素產生背景或邊框怎麼去掉？
ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0去除灰色半透明遮罩；
android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果；
winphone系統,點擊標籤產生的灰色半透明背景，能經過設置<meta name="msapplication-tap-highlight" content="no">去掉；
特殊說明：有些機型去除不了，如小米2。對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤
a,button,input,textarea { 
          -webkit-tap-highlight-color: rgba(0,0,0,0); 
          -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符
  }   
也能夠
{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

Rentina顯示屏原理及設計方案
retina屏是一種具有超高像素密度的液晶屏，一樣大小的屏幕上顯示的像素點由1個變爲多個，如在一樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變爲4個。
在高清顯示屏中的位圖被放大，圖片會變得模糊，所以移動端的視覺稿一般會設計爲傳統PC的2倍。
前端的應對方案是：設計稿切出來的圖片長寬保證爲偶數，並使用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設計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瀏覽器的默認外觀
input,select { -webkit-appearance:none; appearance: none; }
超實用的CSS樣式
去掉webkit的滾動條——display: none;
其餘參數
::-webkit-scrollba //滾動條總體部分
::-webkit-scrollbar-thumb   //滾動條內的小方塊
::-webkit-scrollbar-track   //滾動條軌道
::-webkit-scrollbar-button  //滾動條軌道兩端按鈕
::-webkit-scrollbar-track-piece  //滾動條中間部分，內置軌道
::-webkit-scrollbar-corner       //邊角，兩個滾動條交匯處
::-webkit-resizer            //兩個滾動條的交匯處上用於經過拖動調整元素大小的小控件
禁止長按連接與圖片彈出菜單
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下，輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />

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

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

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

CSS處理

//豎屏時樣式
@media all and (orientation:portrait){   }
//橫屏時樣式
@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>
    優先播放音樂bg.ogg，不支持在播放bg.mp3
</audio>
JS綁定自動播放（操做window時，播放音樂）

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

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

重力感應事件
運用HTML5的deviceMotion，調用重力感應事件

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 ){
        //這裏是搖動後要執行的方法 
        yaoAfter();
    }
    lastX = x;
    lastY = y;
    lastZ = z;
}

function yaoAfter(){
    //do something
}
微信瀏覽器用戶調整字體大小後頁面矬了，怎麼阻止用戶調整
如下代碼可以使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禁止用戶調整字體大小
body { -webkit-text-size-adjust:100%!important; }

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

定位的坑
fixed定位
1.ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
2.android下fixed表現要比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的設備（如：音箱、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判斷設備
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%結束，0%的百分號不能去掉 
2.after和before僞類沒法使用動畫animation
3.border-radius不支持%單位，如要兼容，能夠給radius設置一下較大的值
4.translate百分比的寫法和scale在一塊兒會致使失效，例如：
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug
1.三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
2.同時設置border-radius和背景色的時候，背景色會溢出到圓角之外部分
3.部分手機(如三星)，a連接支持鼠標:visited事件，也就是說連接訪問後文字變爲紫色
4.android沒法同時播放多音頻audio
消除transition閃屏
.css {
          -webkit-transform-style: preserve-3d;
          -webkit-backface-visibility: hidden;
          -webkit-perspective: 1000;
  }
開啓硬件加速
目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，當檢測到某個DOM元素應用了某些CSS規則時就會自動開啓，從而解決頁面閃白，保證動畫流暢。
.css {
                -webkit-transform: translate3d(0,0,0);
                -moz-transform: translate3d(0,0,0);
                -ms-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
        }
渲染優化
1.禁止使用iframe（阻塞父文檔onload事件）
2.禁止使用gif圖片實現loading效果（下降CPU消耗，提高渲染性能）
使用CSS3代碼代替JS動畫；
開啓GPU加速；
使用base64位編碼圖片(不小圖而言，大圖不建議使用)
對於一些小圖標，可使用base64位編碼，以減小網絡請求。但不建議大圖使用，比較耗費CPU。小圖標優點在於：
1.減小HTTP請求；
2.避免文件跨域；
3.修改及時生效；