- 1. 規(guī)避javascript多人開發(fā)函數(shù)重名問題
- 2. 請(qǐng)說出三種減低頁面加載時(shí)間的方法
- 3. 你所了解到的Web攻擊技術(shù)
- 4. web前端開發(fā)，如何提高頁面性能優(yōu)化？
- 5. 前端開發(fā)中，如何優(yōu)化圖像？圖像格式的區(qū)別？
- 6. 瀏覽器是如何渲染頁面的？
1. 規(guī)避javascript多人開發(fā)函數(shù)重名問題
- 命名空間
- 封閉空間
- js模塊化mvc（數(shù)據(jù)層、表現(xiàn)層、控制層）
- seajs
- 變量轉(zhuǎn)換成對(duì)象的屬性
- 對(duì)象化
2. 請(qǐng)說出三種減低頁面加載時(shí)間的方法
- 壓縮css、js文件
- 合并js、css文件，減少http請(qǐng)求
- 外部js、css文件放在最底下
- 減少dom操作，盡可能用變量替代不必要的dom操作
3. 你所了解到的Web攻擊技術(shù)
- XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網(wǎng)站注冊(cè)用戶的瀏覽器內(nèi)運(yùn)行非法的HTML標(biāo)簽或者JavaScript進(jìn)行的一種攻擊。
- SQL注入攻擊
- CSRF（Cross-Site Request Forgeries，跨站點(diǎn)請(qǐng)求偽造）：指攻擊者通過設(shè)置好的陷阱，強(qiáng)制對(duì)已完成的認(rèn)證用戶進(jìn)行非預(yù)期的個(gè)人信息或設(shè)定信息等某些狀態(tài)更新。
4. web前端開發(fā)，如何提高頁面性能優(yōu)化？
-
內(nèi)容方面：
減少 HTTP 請(qǐng)求 (Make Fewer HTTP Requests)
減少 DOM 元素?cái)?shù)量 (Reduce the Number of DOM Elements)
使得 Ajax 可緩存 (Make Ajax Cacheable)
-
針對(duì)CSS：
把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)
從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
精簡(jiǎn) JavaScript 與 CSS (Minify JavaScript and CSS)
避免 CSS 表達(dá)式 (Avoid CSS Expressions)
-
針對(duì)JavaScript ：
腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)
從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
精簡(jiǎn) JavaScript 與 CSS (Minify JavaScript and CSS)
移除重復(fù)腳本 (Remove Duplicate Scripts)
-
面向圖片(Image)：
優(yōu)化圖片
不要在 HTML 中使用縮放圖片
使用恰當(dāng)?shù)膱D片格式
使用 CSS Sprites 技巧對(duì)圖片優(yōu)化
5. 前端開發(fā)中，如何優(yōu)化圖像？圖像格式的區(qū)別？
-
優(yōu)化圖像：
不用圖片，盡量用css3代替。 比如說要實(shí)現(xiàn)修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當(dāng)前主流瀏覽器中都可以用CSS達(dá)成。
使用矢量圖SVG替代位圖。對(duì)于絕大多數(shù)圖案、圖標(biāo)等，矢量圖更小，且可縮放而無需生成多套圖。現(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用！
使用恰當(dāng)?shù)膱D片格式。我們常見的圖片格式有JPEG、GIF、PNG?；旧?，內(nèi)容圖片多為照片之類的，適用于JPEG。而修飾圖片通常更適合用無損壓縮的PNG。GIF基本上除了GIF動(dòng)畫外不要使用。且動(dòng)畫的話，也更建議用video元素和視頻格式，或用SVG動(dòng)畫取代。
按照HTTP協(xié)議設(shè)置合理的緩存。
使用字體圖標(biāo)webfont、CSS Sprites等。
用CSS或JavaScript實(shí)現(xiàn)預(yù)加載。
WebP圖片格式能給前端帶來的優(yōu)化。WebP支持無損、有損壓縮，動(dòng)態(tài)、靜態(tài)圖片，壓縮比率優(yōu)于GIF、JPEG、JPEG2000、PG等格式，非常適合用于網(wǎng)絡(luò)等圖片傳輸。
-
圖像格式的區(qū)別：
矢量圖：圖標(biāo)字體，如 font-awesome；svg
位圖：gif,jpg(jpeg),png
-
區(qū)別：
gif:是是一種無損，8位圖片格式。具有支持動(dòng)畫，索引透明，壓縮等特性。適用于做色彩簡(jiǎn)單(色調(diào)少)的圖片，如logo,各種小圖標(biāo)icons等。
JPEG格式是一種大小與質(zhì)量相平衡的壓縮圖片格式。適用于允許輕微失真的色彩豐富的照片，不適合做色彩簡(jiǎn)單(色調(diào)少)的圖片，如logo,各種小圖標(biāo)icons等。
png:PNG可以細(xì)分為三種格式:PNG8，PNG24，PNG32。后面的數(shù)字代表這種PNG格式最多可以索引和存儲(chǔ)的顏色值。
關(guān)于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎(chǔ)上增加了8位（256階）的alpha通道透明;
-
優(yōu)缺點(diǎn)：
能在保證最不失真的情況下盡可能壓縮圖像文件的大小。
對(duì)于需要高保真的較復(fù)雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應(yīng)用在Web頁面上。
6. 瀏覽器是如何渲染頁面的？
渲染的流程如下：
解析HTML文件，創(chuàng)建DOM樹。自上而下，遇到任何樣式（link、style）與腳本（script）都會(huì)阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。
解析CSS。優(yōu)先級(jí)：瀏覽器默認(rèn)設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式<HTML中的style樣式；
將CSS與DOM合并，構(gòu)建渲染樹（Render Tree）
布局和繪制，重繪（repaint）和重排（reflow）
