1、一 .閉包的理解 :使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。閉包三個特性 : 1.函數嵌套函數 ; 2.函數內部可以引用外部的參數和變量 ; 3.參數和變量不會被垃圾回收機制回收二.Cookie 的弊端 :cookie 雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但還是有很多局限性的每個特定的域名下最多生成20 個 cookie;IE 和 Opera 會清理近期最少使用的cookie ，Firefox理 cookie;cookie 的最大大約為4096 字節，為了兼容性，一般

2、不能超過4095 字節 ;會隨機清優點：極高的擴展性和可用性1.通過良好的編程，控制保存在cookie 中的 session 對象的大小。2.通過加密和安全傳輸技術（SSL），減少cookie 被破解的可能性。3.只在 cookie 中存放不敏感數據，即使被盜也不會有重大損失。4.控制 cookie 的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。缺點 :1.Cookie 數量和長度的限制。每個domain 最多只能有20 條 cookie，每個cookie長度不能超過4KB ，否則會被截掉。2.安全性問題。如果cookie 被人攔截了，那人就可以取得所有的session信

3、息。即使加密也與事無補，因為攔截者并不需要知道cookie 的意義，他只要原樣轉發cookie 就可以達到目的了。3.有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。三.瀏覽器本地存儲在較高版本的瀏覽器中，js 提供了 sessionStorage和 globalStorage。在 HTML5 中提供了localStorage 來取代 globalStorage。html5 中的 Web Storage 包括了兩種存儲方式：sessionStorage和 localStorage。sessionS

4、torage:用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。localStorage:用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。四 .web storage和 cookie 的區別Web Storage 的概念和cookie 相似，區別是:Web storage:1.是為了更大容量存儲設計的。2.Web Storage 擁有setItem,getItem,removeItem,clear等方法.3.Web Storag

5、e 僅僅是為了在本地“存儲 ”數據而生Cookie:1.大小是受限的， 并且每次你請求一個新的頁面的時候Cookie 都會被發送過去，這樣無形中浪費了帶寬 ;2.cookie 還需要指定作用域，不可以跨域調用。3.需要前端開發者自己封裝setCookie，getCookie.4.cookie 的作用是與服務器進行交互，作為HTTP 規范的一部分而存在;*localStorage 和 sessionStorage都具有相同的操作方法，例如setItem、 getItem 和 removeItem等 *五.cookie和 session 的區別：1.cookie 數據存放在客戶的瀏覽器上，sess

6、ion數據放在服務器上。2.cookie 不是很安全，別人可以分析存放在本地的COOKIE 并進行COOKIE欺騙考慮到安全應當使用 session。3.session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能考慮到減輕服務器性能方面，應當使用COOKIE 。4.單個 cookie 保存的數據不能超過4K ，很多瀏覽器都限制一個站點最多保存20 個 cookie。5.所以個人建議 :將登陸信息等重要信息存放為SESSION 其他信息如果需要保留,可以放在 COOKIE 中六 .display:none 和 visibility:hidden 的區別？display:no

7、ne: 隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏， 就當他從來不存在。visibility:hidden: 隱藏對應的元素，但是在文檔布局中仍保留原來的空間。七 .CSS 中 link 和 import 的區別是？1.link 屬于 HTML 標簽，而 import 是 CSS 提供的 ;2.頁面被加載的時，link 會同時被加載，而import 引用的 CSS 會等到頁面被加載完再加載;3.import 只在 IE5 以上才能識別，而link 是 HTML 標簽，無兼容問題;4.link 方式的樣式的權重高于 import 的權重 .八 .position:absol

8、ute和 float 屬性的異同共同點：對內聯元素設置float 和absolute屬性，可以讓元素脫離文檔流，并且可以設置其寬高。不同點： float 仍會占據位置，position 會覆蓋文檔流中的其他元素。九.介紹一下box-sizing 屬性？box-sizing 屬性主要用來控制元素的盒模型的解析模式。默認值是content-box 。content-box：讓元素維持 W3C 的標準盒模型。元素的寬度/高度由 border + padding + content 的寬度 /高度決定，設置 width/height屬性指的是 content 部分的寬 /高border-box：讓元素

9、維持IE 傳統盒模型（ IE6 以下版本和 IE67 的怪異模式）。設置width/height 屬性指的是 border+padding +content標準瀏覽器下， 按照 W3C 規范對盒模型解析， 一旦修改了元素的邊框或內距， 就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局。十.CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？CSS3 新增偽類有那些？1.id 選擇器（ # myid ）2.類選擇器（ .myclassname） 3.標簽選擇器（ div, h1, p）4.相鄰選擇器（ h1+ p） 5.子選擇器（ ul > li ）

10、6.后代選擇器（ li a）7.通配符選擇器（ * ） 8.屬性選擇器（ arel = "external" ） 9.偽類選擇器（ a: hover, li:nth-child）可繼承的樣式： font-sizefont-familycolor, text-indent;不可繼承的樣式： borderpadding margin widthheight;優先級就近原則，同權重情況下樣式定義最近者為準;載入樣式以最后載入的定位為準 ;CSS3 新增偽類舉例：p:first-of-type選擇屬于其父元素的首個<p>元素的每個 <p> 元素。p:last

11、-of-type選擇屬于其父元素的最后<p> 元素的每個 <p>元素。p:only-of-type選擇屬于其父元素唯一的<p> 元素的每個 <p>元素。p:only-child選擇屬于其父元素的唯一子元素的每個<p>元素。p:nth-child(2)選擇屬于其父元素的第二個子元素的每個<p> 元素。:enabled:disabled 控制表單控件的禁用狀態。:checked:單選框或復選框被選中。十一 .position 的值， relative 和 absolute 分別是相對于誰進行定位的？absolute :生成絕對

12、定位的元素，相對于最近一級的定位不是static 的父元素來進行定位。 fixed （老 IE 不支持）生成絕對定位的元素，相對于瀏覽器窗口進行定位。relative :生成相對定位的元素，相對于其在普通流中的位置進行定位。static 默認值。沒有定位，元素出現在正常的流中十二 .CSS3 有哪些新特性？CSS3 實現圓角（ border-radius），陰影（ box-shadow），對文字加特效（ text-shadow），線性漸變（ g radient），旋轉（ transform）transform:rotate(9deg) scale(0.85,0.90) translate(0p

13、x,-30px) skew(-9deg,0deg); 旋轉,縮放 , 定位 ,傾斜增加了更多的CSS 選擇器多背景rgba在 CSS3中唯一引入的偽元素是:selection.媒體查詢，多欄布局border-image十三 .XML 和 JSON 的區別？1.數據體積方面。JSON 相對于 XML 來講，數據的體積小，傳遞的速度更快些。2.數據交互方面。JSON 與 JavaScript 的交互更加方便，更容易解析處理，更好的數據交互。3.數據描述方面。JSON 對數據的描述性比4.傳輸速度方面。JSON 的速度要遠遠快于十四 .對 BFC 規范的理解？XML XML較差。BFC，塊級格式化上

14、下文，一個創建了新的BFC 的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC 中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關系）的margin 會發生折疊。 （W3CCSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行布局，以及與其他元素的關系和相互作用.）十五 .解釋下CSS sprites，以及你要如何在頁面或網站中使用它。CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS 的 “ background-image”，“ background- repeat ，”“ background-position 的”組合

15、進行背景定位，background-position 可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以并發，但是也有限制，一般瀏覽器都是6 個。對于未來而言，就不需要這樣做了，因為有了http2。十六 .說說你對語義化的理解？1.去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構2.有利于 SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；3.方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；4.便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動

16、向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。十七 .Doctype 作用 ? 嚴格模式與混雜模式如何區分？它們有何意義?1.<!DOCTYPE> 聲明位于文檔中的最前面，處于<html> 標簽之前。告知瀏覽器以何種模式來渲染文檔。2.嚴格模式的排版和JS 運作模式是以該瀏覽器支持的最高標準運行。3.在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。4.DOCTYPE 不存在或格式不正確會導致文檔以混雜模式呈現。十八 .你知道多少種Doctype 文檔類型？該標簽可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基于框架的

17、HTML文檔。HTML4.01 規定了三種文檔類型：Strict 、Transitional 以及Frameset。 XHTML1.0 規定了三種XML文檔類型： Strict 、Transitional 以及 Frameset。 Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，而 Quirks （包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。十九 .HTML與 XHTML二者有什么區別1.所有的標記都必須要有一個相應的結束標記 ; 2.所有標簽的元素和屬性的名字都必須使用小寫 ; 3.所有的 XML 標記都必須合理嵌套 ; 4

18、.所有的屬性必須用引號 "" 括起來 ; 5.把所有 < 和&amp; 特殊符號用編碼表示; 6.給所有屬性賦一個值 ; 7.不要在注釋內容中使 “- ”; 8.圖片必須有說明文字 ; 二十 .常見兼容性問題？1.png24 位的圖片在iE6 瀏覽器上出現背景，解決方案是做成PNG8. 也可以引用一段腳本處理.2.瀏覽器默認的margin 和 padding 不同。解決方案是加一個全局的*margin:0;padding:0;來統一。3.IE6 雙邊距 bug:塊屬性標簽float 后，又有橫行的margin 情況下，在ie6 顯示 margin 比設置的大。

19、4.浮動 ie 產生的雙倍距離（IE6 雙邊距問題：在IE6 下，如果對元素設置了浮動，同時又設置了margin-left 或 margin-right ， margin 值會加倍。）之下 IE 會產生 20px 的距離，解決方案是在內屬性。 (_這個符號只有ie6 會識別 )#boxfloat:left;width:10px;margin:0 0 0 100px;這種情況float 的標簽樣式控制中加入 _display:inline; 將其轉化為行5.漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE 游覽器從所有情況中分離出來。接著，再次使用“+”將 IE8和I

20、E7 、 IE6 分離開來，這樣IE8已經獨立識別。refox6.IE 下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute() 獲取自定義屬性; Fi下 ,只能使用getAttribute() 獲取自定義屬性. 解決方法 :統一通過 getAttribute() 獲取自定義屬性.7.IE 下,event 對象有 x,y 屬性 , 但是沒有 pageX,pageY 屬性 ; Firefox 下,event 對象有 pageX,pageY 屬性 ,但是沒有 x,y 屬性 .8.解決方法：（條件注釋）缺點是在9.Chrome 中文界面下默認會將小于it-text-s

21、ize-adjust:none; 解決 .IE 瀏覽器下可能會增加額外的12px 的文本強制按照12pxHTTP 請求數。顯示 , 可通過加入CSS屬性-webk10.超鏈接訪問過后hover 樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover 和 active 了解決方法是改變CSS 屬性的排列順序: L-V-H-A: a:linka:visited a:hover a:active 11.怪異模式問題：漏寫DTD 聲明， Firefox 仍然會按照標準模式來解析網頁，但在IE 中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD 聲明的好習慣。現在可以使用htm

22、l5(h推薦的寫法： <doctype html>12.上下 margin 重合問題ie 和 ff 都存在， 相鄰的兩個div 的 margin-left 和 margin-right 不會重合， 但是margin-top 和 margin-bottom 卻會發生重合。解決方法，養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom 。13.ie6 對 png 圖片格式支持不好(引用一段腳本處理)二十一 .解釋下浮動和它的工作原理？清除浮動的技巧浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。1.使用空標簽清除浮動

23、。這種方法是在所有浮動標簽后面添加一個空標簽定義 css clear:both. 弊端就是增加了無意義標簽。2.使用 overflow 。給包含浮動元素的父標簽添加css屬性overflow:auto;zoom:1; zoom:1 用于兼容 IE6 。3.使用 after 偽對象清除浮動。該方法只適用于非IE 瀏覽器。具體寫法可參照以下示例。使用中需注意 :該方法中必須為需要清除浮動元素的偽對象中設置height:0 ，否則該元素會比實際高出若干像素 .二十二 .浮動元素引起的問題和解決辦法？浮動元素引起的問題： 1.父元素的高度無法被撐開，影響與父元素同級的元素 ; 2.與浮動元素同級的非浮

24、動元素（內聯元素）會跟隨其后 ; 3.若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構解決方法：使用CSS 中的 clear:both;屬性來清除元素的浮動可解決2、3 問題，對于問題1，添加如下樣式，給父元素添加clearfix 樣式二十三 .清除浮動的幾種方法1.額外標簽法， <div style="clear:both;"></div>( 缺點：不過這個辦法會增加額外的標簽使HTML 結構看起來不夠簡潔 .); 2.使用 after 偽類 ; 3.浮動外部元素 ;4.設置 overflow 為 hidden 或者 au

25、to二十四 .IE8 以下版本的瀏覽器中的盒模型有什么不同IE8 以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框二十五 .DOM1.創建新節點操作 怎樣添加、移除、移動、復制、創建和查找節點createDocumentFragment() /創建一個DOM 片段 createElement() / 創建一個具體的元素createTextNode() / 創建一個文本節點2.添加、移除、替換、插入appendChild() removeChild()replaceChild()insertBefore() /在已有的子節點前插入一個新的子節點3.查找getElementsByTagNam

26、e() / 通過標簽名稱getElementsByName() /通過元素的Name 屬性的值 (IE 容錯能力較強，會得到一個數組，其中包括id 等于 name 值的 ) getElementById()/通過元素 Id ，唯一性二十六 .html5 有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML和HTML5 ？1.HTML5現在已經不是SGML的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。2.拖拽釋放 (Drag and drop) API語義化更好的內容標簽（header,nav,footer,aside,article,sectio

27、n） 音頻、視頻 API(audio,video)畫布 (Canvas) API地理 (Geolocation)API 本地離線存儲localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；sessionStorage 的數據在瀏覽器關閉后自動刪除表單控件， calendar、 date、 time、email 、 url 、 search 新的技術 webworker, websocket, Geolocation3.移除的元素純表現的元素：basefont， big，center， font, s， strike， tt， u； 對可用性產生負面影響的元素： frame， frame

28、set，noframes；支持 HTML5 新標簽：4.IE8/IE7/IE6 支持通過document.createElement 方法產生的標簽，持 HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式：可以利用這一特性讓這些瀏覽器支5.當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架<!-iflt IE 9> <script> sr<!endif->二十七 .iframe 的優缺點？<iframe> 優點： 解決加載緩慢的第三方內容如圖標和廣告等的加載問題Security sandbox 并行加載腳本 sol

29、ve slow to load third-party content such as icons and advertisements of loading problems Securitysandbox parallelload script<iframe> 的缺點 : 1.iframe 會阻塞主頁面的Onload 事件； 2.即時內容為空， 加載也需要時間3.沒有語意二十八 .如何實現瀏覽器內多個標簽頁之間的通信?調用 localstorge、cookies 等本地存儲方式二十九 .線程與進程的區別一個程序至少有一個進程,一個進程至少有一個線程. 線程的劃分尺度小于進程，使

30、得多線程程序的并發性高。另外，進程在執行過程中擁有獨立的內存單元，而多個線程共享內存，從而極大地提高了程序的運行效率。線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。從邏輯角度來看，多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。但操作系統并沒有將多個線程看做多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。三十 .你如何對網站的文件和資源進行優化？期待的解決方案包括： 文件合并文件最小化文件壓縮使用CDN 托管緩存的使用（多

31、個域名來提供緩存）三十一 .請說出三種減少頁面加載時間的方法1.優化圖片2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）3.優化 CSS（壓縮合并css，如 margin-top,margin-left.)4.網址后加斜杠（如目錄，會判斷這個“目錄是什么文件類型，或者是目錄。）5.標明高度和寬度（如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度參數后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續加載后面的內容。從而加載時間快了，瀏覽體驗也更好了。

32、）6.減少 http 請求（合并文件，合并圖片）。三十二 .你都使用哪些工具來測試代碼的性能？Profiler, JSPerf（）, Dromaeo三十三 .什么是FOUC （無樣式內容閃爍）？你如何來避免FOUC ？FOUC - Flash Of Unstyled Content 文檔樣式閃爍<style type="text/css"media="all">import"./fouc.css"</style> 而引用 CSS 文件的 import 就是造成這個問題的罪魁禍首。IE 會先加載整個HTML 文檔

33、的DOM ，然后再去導入外部的CSS 文件，因此，在頁面DOM 加載完成到CSS 導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關系。<head>之間加入一個 <link> 或者 <script> 元素就可以了。三十四 .null 和 undefined 的區別？解決方法簡單的出奇，只要在null 是一個表示 ”無 ”的對象轉為數值時為0；undefined 是一個表示 ”無 ”的原始值，轉為數值時為當聲明的變量還未被初始化時，變量的默認值為undefined 。null 用來表示尚未存在的對象，常用來表示函數企圖返回一

34、個不存在的對象。NaN 。undefined 表示 ”缺少值 ”，就是此處應該有一個值，但是還沒有定義。典型用法是：1.變量被聲明了，但沒有賦值時，就等于undefined。2.調用函數時，應該提供的參數沒有提供，該參數等于undefined。3.對象沒有賦值的屬性，該屬性的值為undefined。4.函數沒有返回值時，默認返回undefined。null 表示 ”沒有對象 ”，即該處不應該有值。典型用法是：1.作為函數的參數，表示該函數的參數不是對象。2.作為對象原型鏈的終點。三十五 .new 操作符具體干了什么呢 ?1.創建一個空對象，并且this 變量引用該對象，同時還繼承了該函數的原型

35、。2.屬性和方法被加入到this 引用的對象中。3.新創建的對象由 this所引用，并且最后隱式的返回this 。三十六 .js 延遲加載的方式有哪些？defer 和 async 動態創建 DOM方式 (創建 script, 插入到 DOM 中 ,加載完畢后 callBack) 按需異步載入 js三十七 .如何解決跨域問題 ?jsonp、document.domain+iframe 、 、 window.postMessage、服務器上設置代理頁面 jsonp 的原理是動態插入 script 標簽三十八 .documen.write 和innerHTML的區別Docume

36、nt.write:只能重繪整個頁面;innerHTML:可以重繪頁面的一部分三十九 .哪些操作會造成內存泄漏？內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。閉包、控制臺日志、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）四十 .如何判斷當前腳本運行在瀏覽器還是node 環境中？通過判斷 Global 對象是否為window ，如果不為

37、window ，當前腳本沒有運行在瀏覽器中四十一 .什么叫優雅降級和漸進增強？優雅降級 :Web 站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作.由于 IE 獨特的盒模型布局問題， 針對不同版本的IE 的 hack 實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能, 向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。四十二 .WEB 應用從服務器主動推

38、送Data 到客戶端有那些方式？Javascript 數據推送 ; Commet：基于 HTTP 長連接的服務器推送技術; 基于 WebSocket 的推送方案SSE（Server-Send Event）：服務器推送數據新方式四十三 .對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？前端是最貼近用戶的程序員，比后端、數據庫、產品經理、運營、安全都近。1.實現界面交互 ; 2.提升用戶體驗 ; 3.有了 Node.js，前端可以實現服務端的一些事情前端是最貼近用戶的程序員，前端的能力就是能讓產品從90 分進化到 100 分，甚至更好，參與項目，快速高質量完成實現效果圖，精確到1px；與

39、團隊成員， UI 設計，產品經理的溝通；做好的頁面結構，頁面重構和用戶體驗；處理hack，兼容、寫出優美的代碼格式；針對服務器的優化、擁抱最新前端技術。四十四 .你有哪些性能優化的方法？1.減少 http 請求次數： CSS Sprites, JS、CSS 源碼壓縮、圖片大小控制合適；網頁Gzip，CDN 托管 ,data 緩存 ,圖片服務器。2.前端模板JS+數據，減少由于HTML作本地變量 ,不用請求，減少請求次數3.用 innerHTML 代替 DOM 操作，減少標簽導致的帶寬浪費，DOM 操作次數，優化前端用變量保存javascript 性能。AJAX請求結果 ,每次操4.當需要設置的

40、樣式很多時設置className而不是直接操作style。5.少用全局變量、緩存DOM 節點查找的結果。減少IO 讀取操作。6.避免使用 CSS Expression（css 表達式 )又稱 Dynamic properties(動態屬性)。7.圖片預加載，將樣式表放在頂部，將腳本放在底部加上時間戳。四十五 .一個頁面從輸入URL到頁面加載顯示完成，這個過程中都發生了什么？1.當發送一個URL 請求時，不管這個URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的URL ，瀏覽器都會開啟一個線程來處理這個請求，同時在遠程DNS 服務器上啟動一個DNS 查詢。這能使瀏覽器獲得請求對應

41、的IP 地址。2.瀏覽器與遠程 Web 服務器通過 TCP 三次握手協商來建立一個 TCP/IP 連接。該握手包括一個同步報文，一個同步 -應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務器應答并接受客戶端的請求，最后由客戶端發出該請求已經被接受的報文。3.一旦 TCP/IP 連接建立，瀏覽器會通過該連接向遠程服務器發送HTTP 的 GET 請求。遠程服務器找到資源并使用HTTP 響應返回該資源，值為200 的 HTTP 響應狀態表示一個正確的響應。4.此時， Web 服務器提供資源服務，客戶端開始下載資源。請求返回后，便進入了我們關注的

42、前端模塊 簡單來說，瀏覽器會解析HTML 生成 DOMTree，其次會根據CSS 生成 CSS Rule Tree，而 javascript又可以根據DOMAPI 操作 DOM四十六 .平時如何管理你的項目？先期團隊必須確定好全局樣式（globe.css），編碼模式 (utf-8)等；編寫習慣必須一致（例如都是采用繼承式的寫法， 單樣式都寫成一行）； 標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；頁面進行標注（例如頁面模塊 開始和結束）；CSS 跟 HTML分文件夾并行存放，命名都得統一（例如 style.css）； JS 分文件夾存放命名以該 JS 功能為準的英文翻譯。圖片采用

43、整合的images.png png8格式文件使用盡量整合在一起使用方便將來的管理四十七 .說說最近最流行的一些東西吧？常去哪些網站？Node.js、Mongodb 、npm、MVVM 、MEAN 、three.js,React 。 網站： w3cfuns,sf,hacknews,CSDN, 慕課，博客園， InfoQ,w3cplus 等四十八 .javascript 對象的幾種創建方式1.工廠模式 ; 2.構造函數模式 ; 3.原型模式 ;4.混合構造函數和原型模式 ; 5.動態原型模式 ; 6.寄生構造函數模式 ; 7.穩妥構造函數模式四十九 .javascript 繼承的 6 種方法1.原

44、型鏈繼承 ; 2.借用構造函數繼承 ; 3.組合繼承 (原型 + 借用構造 ) ; 4.原型式繼承 ; 5.寄生式繼承 ; 6.寄生組合式繼承五十 .ajax 過程1.創建 XMLHttpRequest對象 ,也就是創建一個異步調用對象.2.創建一個新的HTTP 請求 ,并指定該 HTTP 請求的方法、 URL 及驗證信息 .3.設置響應 HTTP 請求狀態變化的函數.4.發送 HTTP 請求 .5.獲取異步調用返回的數據.6.使用 JavaScript 和 DOM 實現局部刷新 .五十一 .異步加載和延遲加載1.異步加載的方案：動態插入script 標簽2.通過 ajax 去獲取 js 代碼

45、 ,然后通過eval 執行3.script 標簽上添加defer 或者 async 屬性4.創建并插入iframe ，讓它異步執行js5.延遲加載：有些js 代碼并不是頁面初始化的時候就立刻需要的，而稍后的某些情況才需要的。五十二 .sql 注入原理就是通過把 SQL 命令插入到 Web 表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的 SQL 命令。總的來說有以下幾點：1.永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，可以通過正則表達式，或限制長度，對單引號和雙 "-" 進行轉換等。2.永遠不要使用動態拼裝SQL，可以使用參數化的SQL 或者直接使

46、用存儲過程進行數據查詢存取。3.永遠不要使用管理員權限的數據庫連接，為每個應用使用單獨的權限有限的數據庫連接。4.不要把機密信息明文存放，請加密或者hash 掉密碼和敏感的信息。五十三 .XSS 原理及防范Xss(cross-site scripting) 攻擊指的是攻擊者往Web 頁面里插入惡意html 標簽或者javascript 代碼。比如：攻擊者在論壇中放一個看似安全的鏈接，騙取用戶點擊后，竊取 cookie 中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶原本以為的信任站點。五十四 .XSS 防范方法1.代碼里對用戶

47、輸入的地方和變量都需要仔細檢查長度和對 ”< ” ,>” , ” ; ”等,字”符做過濾；其次任何內容寫到頁面之前都必須加以 encode，避免不小心把 html tag 弄出來。這一個層面做好，至少可以堵住超過一半的 XSS 攻擊。2.避免直接在cookie 中泄露用戶隱私，例如email 、密碼等等。3.通過使 cookie 和系統 ip 綁定來降低 cookie 泄露后的危險。這樣攻擊者得到的 cookie 沒有實際價值，不可能拿來重放。4.盡量采用POST 而非 GET 提交表單五十五 .XSS 與 CSRF 有什么區別嗎？XSS 是獲取信息，不需要提前知道其他用戶頁面的代

48、碼和數據包。 CSRF 是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數據包。要完成一次CSRF 攻擊，受害者必須依次完成兩個步驟：1.登錄受信任網站A ，并在本地生成Cookie 。2.在不登出 A 的情況下，訪問危險網站B 。五十六 .CSRF 的防御1.服務端的 CSRF 方式方法很多樣，但總的思想都是一致的，就是在客戶端頁面增加偽隨機數。2.使用驗證碼五十七 .ie 各版本和IE6 兩個并發， iE7chrome 可以并行下載多少個資源升級之后的6 個并發，之后版本也是6 個Firefox ，chrome 也是6 個五十八 .javascript 里面的繼承怎么實現，如何避免原

49、型鏈上面的對象共享用構造函數和原型鏈的混合模式去實現繼承，避免對象共享可以參考經典的extend()函數，很多前端框架都有封裝的，就是用一個空函數當做中間變量五十九 .grunt ，YUIcompressor和 google clojure 用來進行代碼壓縮的用法YUICompressor 是一個用來壓縮JS 和 CSS 文件的工具，采用Java 開發。使用方法：/壓縮 JS java -壓縮 CSS java -jar yuicompresso-v src.css > packed.css六十 .Flash、 Ajax 各自的優缺點，在使用中如何取舍？Flash ajax 對比Flas

50、h 適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。 Ajax 對 CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操作DOM六十一 .請解釋一下JavaScript 的同源策略。概念 :同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。這里的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。六十二 .為什么要有同源限

51、制？我們舉例說明：比如一個黑客程序，他利用Iframe 把真正的銀行登錄頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登錄時，他的頁面就可以通過 Javascript 讀取到你的表單中 input 中的內容，這樣用戶名，密碼就輕松到手了。六十三 .什么是“usestrict ”?; 使用它的好處和壞處分別是什么？ECMAscript 5 添加了第二種運行模式： ”嚴格模式 ”（strict mode）。顧名思義，這種模式使得 Javascr ipt 在更嚴格的條件下運行。設立 ”嚴格模式 ”的目的，主要有以下幾個：1.消除 Javascript 語法的一些不合理、不嚴謹之處，減少一些怪異行為;2.消除代碼運行的一些不安全之處，保證代碼運行的安全；3.提高編譯器效率，增加運行速度;4.為未來新版本的Javascript 做好鋪墊。注：經過測試IE6,7,8,9