1、跨域解決window.name+iframe跨域獲取數據詳解
https://www.cnblogs.com/zichi/p/4620656.html
總結 ：
能使用這種方式跨域，有幾個條件必不可少。
iframe標籤的跨域能力
window.name屬性值在文檔刷新後依舊存在的能力
再簡單瞭解下window和contentWindow的一些知識。瀏覽器就會爲原始文檔創建一個 window 對象，再爲每個框架（iframe）創建額外的 window 對象。這些額外的對象是原始窗口的子窗口，可能被原始窗口中發生的事件所影響。例如，關閉原始窗口將導致關閉全部子窗口。contentWindow屬性是指指定的frame或者iframe所在的window對象。
2、談談你對webpack的看法
WebPack 是一個模塊打包工具，你可以使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它能夠很好地管理、打包Web開發中所用到的HTML、JavaScript、CSS以及各種靜態文件（圖片、字體等），讓開發過程更加高效。對於不同類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源。
webpack的兩大特色：
1.code splitting（可以自動完成）
2.loader 可以處理各種類型的靜態文件，並且支持串聯操作
webpack 是以commonJS的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。
webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：
1. 對 CommonJS 、 AMD 、ES6的語法做了兼容
2. 對js、css、圖片等資源文件都支持打包
3. 串聯式模塊加載器以及插件機制，讓其具有更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持
4. 有獨立的配置文件webpack.config.js
5. 可以將代碼切割成不同的chunk，實現按需加載，降低了初始化時間
6. 支持 SourceUrls 和 SourceMaps，易於調試
7. 具有強大的Plugin接口，大多是內部插件，使用起來比較靈活
8.webpack 使用異步 IO 並具有多級緩存。這使得 webpack 很快且在增量編譯上更加快
3、說說你對作用域鏈的理解
作用域鏈的作用是保證執行環境裏有權訪問的變量和函數是有序的，作用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，作用域鏈向下訪問變量是不被允許的。
4、創建ajax過程
(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.
(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.
5、對前端模塊化的認識
AMD 是 RequireJS 在推廣過程中對模塊定義的規範化產出。
CMD 是 SeaJS 在推廣過程中對模塊定義的規範化產出。
AMD 是提前執行，CMD 是延遲執行。
AMD推薦的風格通過返回一個對象做爲模塊對象，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。
CMD模塊方式
define(function(require, exports, module) {
// 模塊代碼
});
6、你覺得前端工程的價值體現在哪
爲簡化用戶使用提供技術支持（交互部分）
爲多個瀏覽器兼容性提供支持
爲提高用戶瀏覽速度（瀏覽器性能）提供支持
爲跨平臺或者其他基於webkit或其他渲染引擎的應用提供支持
爲展示數據提供支持（數據接口）
7、談談性能優化問題
代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器。
緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務端配置Etag，減少DNS查找等
請求數量：合併樣式和腳本，使用css圖片精靈，初始首屏之外的圖片資源按需加載，靜態資源延遲加載。
請求帶寬：壓縮文件，開啓GZIP，
代碼層面的優化：
- 用
hash-table來優化查找 - 少用全局變量
- 用
innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能 - 用
setTimeout來避免頁面失去響應 - 緩存DOM節點查找的結果
- 避免使用CSS Expression
- 避免全局查詢
- 避免使用with(with會創建自己的作用域，會增加作用域鏈長度)
- 多個變量聲明合併
- 避免圖片和iFrame等的空Src。空Src會重新加載當前頁面，影響速度和效率
- 儘量避免寫在HTML標籤中寫Style屬性
移動端性能優化
儘量使用css3動畫，開啓硬件加速。適當使用touch事件代替click事件。避免使用css3漸變陰影效果。可以用transform: translateZ(0)來開啓硬件加速。不濫用Float。Float在渲染時計算量比較大，儘量減少使用不濫用Web字體。Web字體需要下載，解析，重繪當前頁面，儘量減少使用。合理使用requestAnimationFrame動畫代替setTimeoutCSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引發手機過耗電增加PC端的在移動端同樣適用
8、ES6的瞭解
新增模板字符串（爲JavaScript提供了簡單的字符串插值功能）、箭頭函數（操作符左邊爲輸入的參數，而右邊則是進行的操作以及返回的值Inputs=>outputs。）、for-of（用來遍歷數據—例如數組中的值。）arguments對象可被不定參數和默認參數完美代替。ES6將promise對象納入規範，提供了原生的Promise對象。增加了let和const命令，用來聲明變量。增加了塊級作用域。let命令實際上就增加了塊級作用域。ES6規定，var命令和function命令聲明的全局變量，屬於全局對象的屬性；let命令、const命令、class命令聲明的全局變量，不屬於全局對象的屬性。。還有就是引入module模塊的概念
9、js繼承方式及其優缺點
原型鏈繼承的缺點
一是 字面量重寫原型會中斷關係，使用引用類型的原型，並且子類型還無法給超類型傳遞參數。
借用構造函數（類式繼承）
借用構造函數雖然解決了剛纔兩種問題，但沒有原型，則複用無從談起。所以我們需要原型鏈+借用構造函數的模式，這種模式稱爲組合繼承
組合式繼承
組合式繼承是比較常用的一種繼承方法，其背後的思路是，使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。這樣，既通過在原型上定義方法實現了函數複用，又保證每個實例都有它自己的屬性。
10、說說你對閉包的理解
使用閉包主要是爲了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。在js中，函數即閉包，只有函數纔會產生作用域的概念
閉包有三個特性：
1.函數嵌套函數
2.函數內部可以引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收
11、常見兼容性問題？
（1）瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
（2）上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
（3）浮動元素引起的問題：
1）父元素的高度無法被撐開，影響與父元素同級的元素
2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
12、DOM操作
添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //並沒有insertAfter()
13、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內容標籤（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
14、對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。
1、實現界面交互
2、提升用戶體驗
3、有了Node.js，前端可以實現服務端的一些事情
前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，
參與項目，快速高質量完成實現效果圖，精確到1px；
與團隊成員，UI設計，產品經理的溝通；
做好的頁面結構，頁面重構和用戶體驗；
處理hack，兼容、寫出優美的代碼格式；
針對服務器的優化、擁抱最新前端技術。
15、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什麼？
分爲4個步驟：
（1），當發送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。
（2）， 瀏覽器與遠程`Web`服務器通過`TCP`三次握手協商來建立一個`TCP/IP`連接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
（3），一旦`TCP/IP`連接建立，瀏覽器會通過該連接向遠程服務器發送`HTTP`的`GET`請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。
（4），此時，`Web`服務器提供資源服務，客戶端開始下載資源。
16、創建ajax的過程
(1)創建`XMLHttpRequest`對象,也就是創建一個異步調用對象.
(2)創建一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證信息.
(3)設置響應`HTTP`請求狀態變化的函數.
(4)發送`HTTP`請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.
17、GET和POST的區別，何時使用POST？
GET：一般用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符
POST：一般用於修改服務器上的資源，對所發送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，
也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請使用 POST 請求：
無法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
18、什麼樣的前端代碼是好的
高複用低耦合，這樣文件小，好維護，而且好擴展
19、px和em的區別
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em
20、請描述下cookies，sessionStorage和localStorage的區別
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地“存儲”數據而生。
21、介紹JavaScript的基本數據類型
Undefined、Null、Boolean、Number、String
22、談談This對象的理解。
this的指向
this表示當前對象，this的指向是根據調用的上下文來決定的，默認指向window對象，指向window對象時可以省略不寫.
用於區分全局變量和局部變量，需要使用this
eval是做什麼的？
eval()的作用把字符串參數解析成JS代碼並運行，並返回執行的結果；
應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）
由JSON字符串轉換爲JSON對象的時候可以用eval
23、你知道jquery中的選擇器嗎，請講一下有哪些選擇器？
答 ：選擇器大致分爲:基本選擇器，層次選擇器，過濾選擇器，表單選擇器
24、常見的狀態碼
100 Continue 繼續，一般在發送post請求時，已發送了http header之後服務端將返回此信息，表示確認，之後發送具體參數信息
200 OK 正常返回信息
201 Created 請求成功並且服務器創建了新的資源
202 Accepted 服務器已接受請求，但尚未處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。
400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未授權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最常見的服務器端錯誤。
503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護）。
25、瀏覽器的內核分別是什麼?
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)
26、如何消除一個數組裏面重復的元素？
// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6