noah的前端面試題（二）｜掘金技術徵文

上一篇 前端面試題（一）

1. 大家公司有什麼來項目監控

阿里中間件ARMS前端監控和sourcemap產生的報錯報給sensry

2. 錯誤處理有哪些

前端代碼異常監控

前端相關數據監控

阿里巴巴（中國站）用戶體驗設計部博客（文中提到的 FdSafe 並無被 阿里巴巴 UED 開源）

hlg-front/前端性能監控/monitor.js-master at master · huanleguang/hlg-front · GitHub

sap1ens/javascript-error-logging · GitHub

1. try, catch方案。你能夠針對某個代碼塊使用try,catch包裝，這個代碼塊運行時出錯時能在catch塊裏邊捕捉到。
2. window.onerror方案。也能夠經過window.addEventListener(「error」, function(evt){})，這個方法能捕捉到語法錯誤跟運行時錯誤，同時還能知道出錯的信息，以及出錯的文件，行號，列號。
3. Resource Timing API 和 Performance Timing API來進行性能檢測和內存檢測；
   
4. 擴展XHR原型，檢測返回的狀態碼，如404等，來檢測ajax請求失敗、錯誤
   
5. 頁面的死連接能夠經過Nodejs的第三方模塊，如request等，來檢測

3.網絡安全談談XSS與CSRF以及解決方案

XSS：跨站腳本（Cross-site scripting，一般簡稱爲XSS）是一種網站應用程序的安全漏洞攻擊，是代碼注入的一種。它容許惡意用戶將代碼注入到網頁上，其餘用戶在觀看網頁時就會受到影響。這類攻擊一般包含了HTML以及用戶端腳本語言。 解決方案以下：

a：HttpOnly 瀏覽器禁止頁面的JS訪問帶有HttpOnly屬性的Cookie。

b：輸入檢查 XSS Filter 對輸入內容作格式檢查，相似「白名單」，可讓一些基於特殊字符的攻擊失效。在客戶端JS和服務器端代碼中實現相同的輸入檢查（服務器端必須有）。

c：輸出檢查 在變量輸出到html頁面時，可使用編碼或轉義的方式來防護XSS攻擊 HtmlEncode：將字符轉成HTMLEntities，對應的標準是ISO-8859-1。

& --> &amp; < --> &lt; > -->&gt; " --> &quot; ' --> &#x27; / --> &#x2F;

JS中可使用JavascriptEncode。須要對「\」對特殊字符轉義，輸出的變量的必須在引號內部。

d：XSS的本質是「HTML注入」，用戶的數據被當成了HTML代碼一部分來執行，從而混淆了本來的語義，產生了新的語義。

CSRF:跨站請求僞造（英語：Cross-site request forgery），也被稱爲 one-click attack 或者 session riding，一般縮寫爲 CSRF 或者 XSRF， 是一種挾制用戶在當前已登陸的Web應用程序上執行非本意的操做的攻擊方法。

通用方法：Token 使用Anti-CSRF Token 在URL中保持原參數不變，新增一個參數Token。Token的值是隨機的（必須使用足夠安全的隨機數生成算法，或者採用真隨機數生成器），其爲用戶與服務器所共同持有，能夠放在用戶的Session中，或者瀏覽器的Cookie中。 注意保密，儘可能把Token放在表單中（構造一個隱藏的input元素），以POST提交，避免Token泄露

4.重排和重繪

• 部分渲染樹（或者整個渲染樹）須要從新分析而且節點尺寸須要從新計算。這被稱爲重排。注意這裏至少會有一次重排-初始化頁面佈局。
• 因爲節點的幾何屬性發生改變或者因爲樣式發生改變，例如改變元素背景色時，屏幕上的部份內容須要更新。這樣的更新被稱爲重繪。

5.什麼狀況會觸發重排和重繪？

• 添加、刪除、更新 DOM 節點
• 經過 display: none 隱藏一個 DOM 節點-觸發重排和重繪
• 經過 visibility: hidden 隱藏一個 DOM 節點-只觸發重繪，由於沒有幾何變化
• 移動或者給頁面中的 DOM 節點添加動畫
• 添加一個樣式表，調整樣式屬性
• 用戶行爲，例如調整窗口大小，改變字號，或者滾動。

6. POST 提交數據方式有幾種

• application/x-www-form-urlencoded
  
• multipart/form-data
  
• application/json
  
• text/xml
  

7. webpack  Babel的一個插件：transform-runtime babel-polyfill以及stage-2，你說一下他們的做用

目前瀏覽器對 ES2015 語法的支持都不太好，因此當咱們須要使用 Promise、Set、Map 等功能時就須要 babel-polyfill 來提供。

在轉換 ES2015 語法爲 ECMAScript 5 的語法時，babel 會須要一些輔助函數，例如 _extend。babel 默認會將這些輔助函數內聯到每個 js 文件裏，這樣文件多的時候，項目就會很大。

因此 babel 提供了 transform-runtime 來將這些輔助函數「搬」到一個單獨的模塊 babel-runtime 中，這樣作能減少項目文件的大小。

8. 談談webpack代碼分割

有三種經常使用的代碼分離方法：

• 入口起點：使用 entry 配置手動地分離代碼。
  
• 防止重複：使用 CommonsChunkPlugin 去重和分離 chunk。
• 動態導入：經過模塊的內聯函數調用來分離代碼。

9. ddllplugin commonschunkplugin 區別

（1）因爲dll包和業務chunk包是分開進行打包的，每一次修改代碼時只須要對業務chunk從新打包，webpack的編譯速度獲得極大的提高，所以相比於CommonChunkPlugin，DllPlugin進行代碼分割能夠顯著的提高開發效率。

（2）使用DllPlugin進行代碼分割，dll包和業務chunk相互獨立，其chunkhash互不影響，dll包不多變更，所以能夠更充分的利用瀏覽器的緩存系統。而使用CommonChunk打包出的代碼，因爲公有chunk中包含了webpack的runtime(運行時)，公有chunk和業務chunk的chunkhash會互相影響，必須將runtime單獨提取出來，才能對公有chunk充分地使用瀏覽器的緩存。

10 如何優化Webpack 構建速度

webpack 構建性能優化策略小結

11 如今有一個數組存放字符串數據：

['item1', 'item2', 'item3', 'item4', 'item5']
複製代碼

有另一個數組存放一組對象：

[
  { content: 'section1', index: 0 },
  { content: 'section2', index: 2 }
]
複製代碼

它每一個對象表示的是會往原來的數組的 index 座標插入 content 數據（index 不會重複）：

0      1      2      3      4
     item1  itme2  item3  item4  item5
    ^             ^ 
    |             |
 section1     section2  
 
最後結果是：['section1', 'item1', 'item2', 'section2', 'item3', 'item4', 'item5']
複製代碼

請你完成 injectSections 函數，能夠達到上述的功能：

injectSections(
  ['item1', 'item2', 'item3', 'item4', 'item5'],
  [
    { content: 'section1', index: 0 },
    { content: 'section2', index: 2 }
  ]
) // => ['section1', 'item1', 'item2', 'section2', 'item3', 'item4', 'item5']複製代碼

const injectSections = (items, sections) => {  sections.sort((a,b) => b.index - a.index)  sections.forEach((m)=>{ items.splice(m.index, 0, m.content) }) return items }