開發及性能優化
開發及性能優化
https://blog.csdn.net/qq_17767355/article/details/51057239
1、規避javascript多人開發函數重名問題
1) 命名空間
2) 封閉空間
3) js模塊化mvc（數據層、表現層、控制層）
4) seajs
5) 變量轉換成對象的屬性
6) 對象化
2、請說出三種減低頁面加載時間的方法
1) 壓縮css、js文件
2) 合並js、css文件，減少http請求
3) 外部js、css文件放在最底下
4) 減少dom操作，盡可能用變量替代不必要的dom操作
3、你所了解到的Web攻擊技術
（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標簽或者JavaScript進行的一種攻擊。
（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)
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)
面向圖片(Image)：
1) 優化圖片
2) 2 不要在 HTML 中使用縮放圖片
3) 3 使用恰當的圖片格式
4) 4 使用 CSS Sprites 技巧對圖片優化
5、前端開發中，如何優化圖像？圖像格式的區別？
優化圖像：
1) 不用圖片，盡量用css3代替。 比如說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。
2) 使用矢量圖SVG替代位圖。對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了，所以可放心使用！
3) 使用恰當的圖片格式。我們常見的圖片格式有JPEG、GIF、PNG。
基本上，內容圖片多為照片之類的，適用於JPEG。
而修飾圖片通常更適合用無損壓縮的PNG。
GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。
4) 按照HTTP協議設置合理的緩存。
5) 使用字體圖標webfont、CSS Sprites等。
6) 用CSS或JavaScript實現預加載。
7) 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樹。
自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。
2) 解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；
3) 將CSS與DOM合並，構建渲染樹（Render Tree）
4) 布局和繪制，重繪（repaint）和重排（reflow）
開發及性能優化