2018年前端筆試高頻題精選（二）

今天繼續來發幾道2018年前端筆試高頻題，這些題都是小編下載了今年BATJ、美團、小米等一線互聯網公司前端筆試真題精選出來的，你們必定要好好學學，以備進軍名企之用。

 

一、規避javascript多人開發函數重名問題

 

命名空間

封閉空間

js模塊化mvc（數據層、表現層、控制層）

seajs

變量轉換成對象的屬性

對象化

 

二、請說出三種減低頁面加載時間的方法

 

壓縮css、js文件

合併js、css文件，減小http請求

外部js、css文件放在最底下

減小dom操做，儘量用變量替代沒必要要的dom操做

 

三、你所瞭解到的Web攻擊技術

（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指經過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。

（2）SQL注入攻擊

（3）CSRF（Cross-Site Request Forgeries，跨站點請求僞造）：指攻擊者經過設置好的陷阱，強制對已完成的認證用戶進行非預期的我的信息或設定信息等某些狀態更新。

 

 四、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 技巧對圖片優化

 

五、前端開發中，如何優化圖像？圖像格式的區別？

 

優化圖像：

一、不用圖片，儘可能用css3代替。 好比說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中均可以用CSS達成。

二、 使用矢量圖SVG替代位圖。對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。如今主流瀏覽器都支持SVG了，因此可放心使用！

3.、使用恰當的圖片格式。咱們常見的圖片格式有JPEG、GIF、PNG。

基本上，內容圖片多爲照片之類的，適用於JPEG。

而修飾圖片一般更適合用無損壓縮的PNG。

GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。

四、按照HTTP協議設置合理的緩存。

五、使用字體圖標webfont、CSS Sprites等。

六、用CSS或JavaScript實現預加載。

七、WebP圖片格式能給前端帶來的優化。WebP支持無損、有損壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式，很是適合用於網絡等圖片傳輸。

 圖像格式的區別：

矢量圖：圖標字體，如 font-awesome；svg 

位圖：gif,jpg(jpeg),png

區別：

　　一、gif:是是一種無損，8位圖片格式。具備支持動畫，索引透明，壓縮等特性。適用於作色彩簡單(色調少)的圖片，如logo,各類小圖標icons等。

　　二、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用於容許輕微失真的色彩豐富的照片，不適合作色彩簡單(色調少)的圖片，如logo,各類小圖標icons等。

　　三、png:PNG能夠細分爲三種格式:PNG8，PNG24，PNG32。後面的數字表明這種PNG格式最多能夠索引和存儲的顏色值。

關於透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎上增長了8位（256階）的alpha通道透明;

優缺點：

　　一、能在保證最不失真的狀況下儘量壓縮圖像文件的大小。

　　二、對於須要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。 

 

六、瀏覽器是如何渲染頁面的？

 

渲染的流程以下：

1.解析HTML文件，建立DOM樹。

   自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。

2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；

3.將CSS與DOM合併，構建渲染樹（Render Tree）

4.佈局和繪製，重繪（repaint）和重排（reflow）

 

七、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（緩存）執行回調函數

 

八、Web Storage與Cookie相比存在的優點：

 

(1)、存儲空間更大：IE8下每一個獨立的存儲空間爲10M，其餘瀏覽器實現略有不一樣，但都比Cookie要大不少。

(2)、存儲內容不會發送到服務器：當設置了Cookie後，Cookie的內容會隨着請求一併發送的服務器，這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。

(3)、更多豐富易用的接口：Web Storage提供了一套更爲豐富的接口，如setItem,getItem,removeItem,clear等,使得數據操做更爲簡便。cookie須要本身封裝。

(4)、獨立的存儲空間：每一個域（包括子域）有獨立的存儲空間，各個存儲空間是徹底獨立的，所以不會形成數據混亂。

 

九、sessionStorage 、localStorage 和 cookie 之間的區別

 

共同點：用於瀏覽器端存儲的緩存數據

不一樣點：

(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；

        web storage,會將數據保存到本地，不會形成寬帶浪費；

(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;

(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；

        sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；

(4)、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；