[TOC] # 1、規避javascript多人開發函數重名問題 * 命名空間 * 封閉空間 * js模塊化mvc（數據層、表現層、控制層） * seajs * 變量轉換成對象的屬性 * 對象化 # 2、請說出三種減低頁面加載時間的方法 1. 壓縮css、js文件 2. 合并js、css文件，減少http請求 3. 外部js、css文件放在最底下 4. 減少dom操作，盡可能用變量替代不必要的dom操作 # 3、你所了解到的Web攻擊技術 （1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網站注冊用戶的瀏覽器內運行非法的HTML標簽或者JavaScript進行的一種攻擊。 （2）SQL注入攻擊 （3）CSRF（Cross-Site Request Forgeries，跨站點請求偽造）：指攻擊者通過設置好的陷阱，強制對已完成的認證用戶進行非預期的個人信息或設定信息等某些狀態更新。 # 4、web前端開發，如何提高頁面性能優化？ ## 內容方面： 1. 減少 HTTP 請求 (Make Fewer HTTP Requests) 2. 減少 DOM 元素數量 (Reduce the Number of DOM Elements) 3. 使得 Ajax 可緩存 (Make Ajax Cacheable) ## 針對CSS： 1. 把 CSS 放到代碼頁上端 (Put Stylesheets at the Top) 2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External) 3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS) 4. 避免 CSS 表達式 (Avoid CSS Expressions) ## 針對JavaScript ： 1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom) 2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External) 3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS) 4. 移除重復腳本 (Remove Duplicate Scripts) ## 面向圖片(Image)： 1. 優化圖片 2. 不要在 HTML 中使用縮放圖片 3. 使用恰當的圖片格式 4. 使用 CSS Sprites 技巧對圖片優化 # 5、前端開發中，如何優化圖像？圖像格式的區別？ ## 優化圖像： 1. 不用圖片，盡量用css3代替。 比如說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。 2. 使用矢量圖SVG替代位圖。對于絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了，所以可放心使用！ 3. 使用恰當的圖片格式。我們常見的圖片格式有JPEG、GIF、PNG。 4. 基本上，內容圖片多為照片之類的，適用于JPEG。 而修飾圖片通常更適合用無損壓縮的PNG。 6. GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。 7. 按照HTTP協議設置合理的緩存。 8. 使用字體圖標webfont、CSS Sprites等。 9. 用CSS或JavaScript實現預加載。 10. WebP圖片格式能給前端帶來的優化。WebP支持無損、有損壓縮，動態、靜態圖片，壓縮比率優于GIF、JPEG、JPEG2000、PG等格式，非常適合用于網絡等圖片傳輸。 ## 圖像格式的區別： > 矢量圖：圖標字體，如 font-awesome；svg > 位圖：gif,jpg(jpeg),png ## 區別： 1. 　　gif:是是一種無損，8位圖片格式。具有支持動畫，索引透明，壓縮等特性。適用于做色彩簡單(色調少)的圖片，如logo,各種小圖標icons等。 2. 　　JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用于允許輕微失真的色彩豐富的照片，不適合做色彩簡單(色調少)的圖片，如logo,各種小圖標icons等。 3. 　　png:PNG可以細分為三種格式:PNG8，PNG24，PNG32。后面的數字代表這種PNG格式最多可以索引和存儲的顏色值。 關于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明; ## 優缺點： 1. 　　能在保證最不失真的情況下盡可能壓縮圖像文件的大小。 2. 　　對于需要高保真的較復雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。 # 6、瀏覽器是如何渲染頁面的？ 渲染的流程如下： 1. 解析HTML文件，創建DOM樹。 2. 自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續外部腳本的加載）。 3. 解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式； 4. 將CSS與DOM合并，構建渲染樹（Render Tree） 5. 布局和繪制，重繪（repaint）和重排（reflow） # 7、Ajax的優缺點及工作原理？ ## 定義和用法: * AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。Ajax 是一種用于創建快速動態網頁的技術。Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。 * 傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。 ## 優點： 1. 減輕服務器的負擔,按需取數據,最大程度的減少冗余請求 2. 局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗 3. 基于xml標準化,并被廣泛支持,不需安裝插件等,進一步促進頁面和數據的分離 ## 缺點： 1. AJAX大量的使用了javascript和ajax引擎,這些取決于瀏覽器的支持.在編寫的時候考慮對瀏覽器的兼容性. 2. AJAX只是局部刷新,所以頁面的后退按鈕是沒有用的. 3. 對流媒體還有移動設備的支持不是太好等 ## AJAX的工作原理： 1. 創建ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)） 2. 判斷數據傳輸方式(GET/POST) 3. 打開鏈接 open() 4. 發送 send() 5. 當ajax對象完成第四步（onreadystatechange）數據接收完成，判斷http響應狀態（status）200-300之間或者304（緩存）執行回調函數 # 8、Web Storage與Cookie相比存在的優勢： 1. 存儲空間更大：IE8下每個獨立的存儲空間為10M，其他瀏覽器實現略有不同，但都比Cookie要大很多。 2. 存儲內容不會發送到服務器：當設置了Cookie后，Cookie的內容會隨著請求一并發送的服務器，這對于本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。 3. 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，如setItem,getItem,removeItem,clear等,使得數據操作更為簡便。cookie需要自己封裝。 4. 獨立的存儲空間：每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的，因此不會造成數據混亂。 # 9、sessionStorage 、localStorage 和 cookie 之間的區別 ## 共同點： > 用于瀏覽器端存儲的緩存數據 ## 不同點： 1. 存儲內容是否發送到服務器端：當設置了Cookie后，數據會發送到服務器端，造成一定的寬帶浪費； web storage,會將數據保存到本地，不會造成寬帶浪費； 1. 數據存儲大小不同：Cookie數據不能超過4K,適用于會話標識；web storage數據存儲可以達到5M; 1. 數據存儲的有效期限不同：cookie只在設置了Cookid過期時間之前一直有效，即使關閉窗口或者瀏覽器； sessionStorage,僅在關閉瀏覽器之前有效；localStorage,數據存儲永久有效； 1. 作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；