前端入門很容易，簡單地用html搭一個頁面框架；會用一些css基本樣式；懂得用jquery的dom互動，就基本可以挺著胸說自己是個前端工程師了。

但是前端提升異常艱難，演算法、資料結構、oop；javascript、dom、css、html5這些僅僅是標配；效能優化、安全性、程式碼優雅性、seo，這些也是必然需要了解的。前端開發環境很輕便，也很繁瑣，各種框架、架構模式的應用也是衡量專業程度的標準。在這裡總結了一些面試題供前端們參考。

JavaScript中如何檢測一個變數是字串型別？

trim()的使用場景

this的典型應用

什麼是跨域？

由於瀏覽器同源策略，凡是傳送請求url的協議、域名、埠三者之間任意一與當前頁面地址不同即為跨域。存在跨域的情況：
1.網路協議不同，如http協議訪問https協議。
2.埠不同，如80埠訪問8080埠。
3.域名不同，如qianduanblog.com訪問baidu.com。
4.子域名不同，如abc.qianduanblog.com訪問def.qianduanblog.com。
5.域名和域名對應ip,如www.bb.com訪問8.8.8.8.

JavaScript面向物件？

寫一個方法，去掉重複的元素

jquery事件bind

定義和用法：主要用於給選擇到的元素上繫結特定事件型別的監聽函式；
語法：bind(type,[data],function(eventObject))；
特點：
　　(1)、適用於頁面元素靜態繫結。只能給呼叫它的時候已經存在的元素繫結事件，不能給未來新增的元素繫結事件。
　　(2)、當頁面載入完的時候，你才可以進行bind()，所以可能產生效率問題。
例項如下：$( "#members li a" ).bind( "click", function( e ) {} );
jquery事件live

定義和用法：主要用於給選擇到的元素上繫結特定事件型別的監聽函式；
語法：live(type, [data], fn);
特點：
　　(1)、live方法並沒有將監聽器繫結到自己(this)身上，而是繫結到了this.context上了。
　　(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新新增的元素不必再繫結一次監聽器。
　　(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(“ul”).live...可以，但$("body").find("ul").live...不行；
例項如下：$( document ).on( "click", "#members li a", function( e ) {} );
jquery事件delegate

定義和用法：將監聽事件繫結在就近的父級元素上
語法：delegate(selector,type,[data],fn)
特點：
　　(1)、選擇就近的父級元素，因為事件可以更快的冒泡上去，能夠在第一時間進行處理。
　　(2)、更精確的小範圍使用事件代理，效能優於.live()。可以用在動態新增的元素上。
例項如下：
$("#info_table").delegate("td","click",function(){/顯示更多資訊/});
$("table").find("#info").delegate("td","click",function(){/顯示更多資訊/});
jquery事件on

定義和用法：將監聽事件繫結到指定元素上。
語法：on(type,[selector],[data],fn)
例項如下：$("#info_table").on("click","td",function(){/顯示更多資訊/});引數的位置寫法與delegate不一樣。
說明：on方法是當前JQuery推薦使用的事件繫結方法，附加只執行一次就刪除函式的方法是one()。
總結：.bind(), .live(), .delegate(),.on()分別對應的相反事件為：.unbind(),.die(), .undelegate(),.off()
 

什麼是盒子模型

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），
元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。
4個部分一起構成了css中元素的盒模型。
三種降低頁面載入時間的方法

壓縮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，跨站點請求偽造）：指攻擊者通過設定好的陷阱，強制對已完成的認證使用者進行非預期的個人資訊或設定資訊等某些狀態更新。
針對頁面內容的優化

1.減少 HTTP 請求 (Make Fewer HTTP Requests)
2.減少 DOM 元素數量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可快取 (Make Ajax Cacheable)
針對修飾檔案的優化

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)
針對指令碼的優化

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)
   針對圖片類檔案的優化

1.優化圖片
2 不要在 HTML 中使用縮放圖片
3 使用恰當的圖片格式
4 使用 CSS Sprites 技巧對圖片優化
影象格式的區別

向量圖：圖示字型，如 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頁面上。
瀏覽器渲染頁面流程

1.解析HTML檔案，建立DOM樹。
自上而下，遇到任何樣式（link、style）與指令碼（script）都會阻塞（外部樣式不阻塞後續外部指令碼的載入）。
2.解析CSS。優先順序：瀏覽器預設設定<使用者設定<外部樣式<內聯樣式<HTML中的style樣式；
3.將CSS與DOM合併，構建渲染樹（Render Tree）
4.佈局和繪製，重繪（repaint）和重排（reflow）

最後

“相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5等都有整理，送給每一位前端小夥伴，53763，1707這裡是小白聚集地，歡迎初學和進階中的小夥伴。”

祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。