重學前端

時間 2019-11-08

標籤前端简体版

原文原文鏈接

1、前端基礎

JS：

一、Promise、Async有什麼區別

Async 更簡潔，不須要用 then 鏈接
Promise 中不能自定義使用 try/catch 進行錯誤捕獲，可是在 Async/await 中能夠像處理同步代碼處理錯誤javascript
調試更方便
Generator 函數能夠暫停執行和恢復執行，這是它能封裝異步任務的根本緣由

二、介紹service worker

一個獨立的 worker 線程，獨立於當前網頁進程，有本身獨立的 worker context。css
一旦被 install，就永遠存在，除非被 uninstallhtml
須要的時候能夠直接喚醒，不須要的時候自動睡眠（有效利用資源，此處有坑）前端
可編程攔截代理請求和返回，緩存文件，緩存的文件能夠被網頁進程取到（包括網絡離線狀態）java
能向客戶端推送消息node
不能直接操做 DOM，可是service worker能夠經過postMessage與頁面之間通訊，把消息通知給頁面，若是須要的話，讓頁面本身去操做DOM。react
出於安全的考慮，必須在 HTTPS 環境下才能工做css3
異步實現，內部大都是經過 Promise 實現git

三、列舉Es6，經常使用的一些新特性es6

let, const：新增塊級做用域，分別定義變量和常量
class, extends, super：用class定義了一個「類」，能夠看到裏面有一個constructor方法，這就是構造方法，而this關鍵字則表明實例對象；Class之間能夠經過extends關鍵字實現繼承；super關鍵字，它指代父類的實例（即父類的this對象）30分鐘掌握ES6/ES2015核心內容（上）
箭頭函數：函數體內的this對象，就是定義時所在的對象，而不是運行時時所在的對象。
模板字符串（template string）
解構（Destructuring）

ES6模塊：（import export）：ES6模塊的設計思想，是儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運行時肯定這些東西。30分鐘掌握ES6/ES2015核心內容（下）

// 假設咱們有兩個js文件: index.js和content.js,如今咱們想要在index.js中使用content.js返回的結果，咱們要怎麼作呢？

//content.js
define('content.js', function(){
    return 'A cat';
})

// AMD
//index.js
require(['./content.js'], function(animal){
    console.log(animal);   //A cat
})

// CMD
//index.js
var animal = require('./content.js')

//content.js
module.exports = 'A cat'

// ES6
//index.js
import animal from './content'

//content.js
export default 'A cat'

API：實例感覺-es6的經常使用語法和優越性

　　keys：獲取對象鍵名，返回一個數組

　　values：獲取對象值，返回一個數組

　　entries：把對象鍵值對轉換成一個數組，返回一個包含鍵值對數組的新數組

　　includes：用於某個數組或字符串是否包含給定的值，返回一個布爾值。若是沒找到符合條件的成員就返回 `underfind`

參考資料以下：
ECMAScript 6 入門
 ES6 Promise 用法講解

四、說下本身對模塊化開發的理解，以及模塊化開發的好處

提升開發效率，有利團隊協同開發，
避免全局變量污染，命名衝突，
方便代碼的複用維護等。

五、瀏覽器事件流向

「DOM2級事件」規定事件流包括三個階段，事件捕獲階段、處於目標階段和事件冒泡階段。首先發生的事件捕獲，爲截獲事件提供了機會，而後是實際的目標接收了事件，最後一個階段是冒泡階段
注意處於目標階段的時候，既不是冒泡階段、也不是捕獲階段，事件處理程序被調用的順序是註冊的順序

六、類型轉換規則

[] == ![]

邏輯非運算符使 ![] 轉換爲布爾值 false
若是有一方是布爾值，就把布爾值轉換成 number 0 再比較 [] == 0
若是一方是 object ，且另外一方爲 string 或 number， object就先調用 valueOf [].valueOf() 返回 [] 不是基本類型，再調用 toString 返回 '' ，最後將 '' 轉換爲 0
轉換順序：object / 布爾值 -> string -> number

七、如何實現深拷貝？

不少人認爲 Object.assign 是用來深拷貝的，其實並非，Object.assign 只會拷貝全部的屬性值到新的對象中，若是屬性值是對象的話，拷貝的是地址，因此並非深拷貝。
展開運算符 ... 和 Object.assign() 行爲一致, 執行的都是淺拷貝(只遍歷一層)
JSON.parse(JSON.stringify(object)) 能夠用來深拷貝，但它會會忽略掉函數和 undefined
lodash 的深拷貝函數：

function deepClone(obj) {
  function isObject(o) {
    return (typeof o === 'object' || typeof o === 'function') && o !== null
  }

  if (!isObject(obj)) {
    throw new Error('非對象')
  }

  let isArray = Array.isArray(obj)
  // 擴展運算符只拷貝一層
  let newObj = isArray ? [...obj] : { ...obj }
  Reflect.ownKeys(newObj).forEach(key => {
    newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
  })

  return newObj
}

八、如何理解原型、原型鏈？

Object 是全部對象的爸爸，全部對象均可以經過 __proto__ 找到它
Function 是全部函數的爸爸，全部函數均可以經過 __proto__ 找到它
函數的 prototype 是一個對象
對象的 __proto__ 屬性指向原型， __proto__ 將對象和原型鏈接起來組成了原型鏈

九、基本類型判斷，如怎麼區分數組和對象？

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

十、寫一個通用的事件偵聽器函數

　　　　　　// 視能力分別使用dom0||dom2||IE方式 來綁定事件
         // 參數： 操做的元素,事件名稱 ,事件處理程序
         addEvent : function(element, type, handler) {
             if (element.addEventListener) {
                 //事件類型、須要執行的函數、是否捕捉
                 element.addEventListener(type, handler, false);
             } else if (element.attachEvent) {
                 element.attachEvent('on' + type, function() {
                     handler.call(element);
                 });
             } else {
                 element['on' + type] = handler;
             }
         },
         // 移除事件
         removeEvent : function(element, type, handler) {
             if (element.removeEventListener) {
                 element.removeEventListener(type, handler, false);
             } else if (element.datachEvent) {
                 element.detachEvent('on' + type, handler);
             } else {
                 element['on' + type] = null;
             }
         },
         // 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)
         stopPropagation : function(ev) {
             if (ev.stopPropagation) {
                 ev.stopPropagation();
             } else {
                 ev.cancelBubble = true;
             }
         },
         // 取消事件的默認行爲
         preventDefault : function(event) {
             if (event.preventDefault) {
                 event.preventDefault();
             } else {
                 event.returnValue = false;
             }
         },
         // 獲取事件目標
         getTarget : function(event) {
             return event.target || event.srcElement;
         },
         // 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；
         getEvent : function(e) {
             var ev = e || window.event;
             if (!ev) {
                 var c = this.getEvent.caller;
                 while (c) {
                     ev = c.arguments[0];
                     if (ev && Event == ev.constructor) {
                         break;
                     }
                     c = c.caller;
                 }
             }
             return ev;
         }

十、用js實現千位分隔符

/(\d)(?=(/d{3})+\.)/g

    num.toString()
          .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
              return $1 + ",";
          });

CSS：

一、介紹css3中position: sticky

absolute 生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。
fixed （老IE不支持）生成絕對定位的元素，相對於瀏覽器窗口進行定位。
relative 生成相對定位的元素，相對於其正常位置進行定位。
static 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit 規定從父元素繼承 position 屬性的值。
sticky 相對於最近的塊級父元素定位

父級元素不能有任何overflow:visible覺得的overflow設置，不然沒有粘滯效果。由於改變了滾動容器（即便沒有出現滾動條）。所以，若是你的position:sticky無效，看看是否是某一個祖先元素設置了overflow:hidden，移除之便可。
同一個父容器中的sticky元素，若是定位值相等，則會重疊；若是屬於不一樣父元素，則會鳩佔鵲巢，擠開原來的元素，造成依次佔位的效果

二、瀏覽器的兼容性

png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8
瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一
IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性
一些新特性如 flex ，須要加前綴兼容不一樣的瀏覽器
even對象 Chrome 等瀏覽器用 e.target、而 IE 用 e.srcElement
給元素添加監聽事件時，Chrome 等瀏覽器用的 addEventListener，而IE 用 attachEvent

三、簡述一下你對HTML語義化的理解？

用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
便於閱讀維護理解。

四、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

是否攜帶：cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密），會在 http 請求中攜帶（即便不須要）
存儲大小： cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
有期時間： localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據； sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。 cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

五、frame有那些缺點？

*iframe會阻塞主頁面的加載（Onload事件）
*不利於搜索引擎優化;

若是須要使用iframe，最好是經過javascript 動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

六、如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

WebSocket、SharedWorker；
也能夠調用localstorge、cookies等本地存儲方式；

localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件 storage

七、CSS3有哪些新特性？

圓角（border-radius:8px）
陰影（Shadow\Reflect）
文字特效（text-shadow、）
線性漸變（gradient）
旋轉（transform）縮放,定位,動畫等，例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

2、構建工具

一、Webpack熱更新實現原理

修改頁面代碼後，Webpack 監聽到文件修改後，開始編譯，編譯完成後，發送消息給客戶端
客戶端獲取到hash，成功後客戶端構造hot-update.js script連接，而後插入主文檔
hot-update.js 插入成功後，執行hotAPI 的 createRecord 和 reload方法，獲取到 Vue 組件的 render方法，從新 render 組件，繼而實現 UI 無刷新更新

二、減小 Webpack 打包時間

首先咱們能夠優化 Loader 的文件搜索範圍，只在 src 文件夾下查找編譯的 js 文件，排除 node_modules 中的文件，固然這樣作還不夠，咱們還能夠將 Babel 編譯過的文件緩存起來

loader: 'babel-loader?cacheDirectory=true'

HappyPack 能夠將 Loader 的同步執行轉換爲並行的
DllPlugin 能夠將特定的類庫提早打包而後引入
代碼壓縮
若是你肯定一個文件下沒有其餘依賴，就可使用該 module.noParse 讓 Webpack 不掃描該文件，這種方式對於大型的類庫頗有幫助

三、減小 Webpack 打包後的文件體積

按需加載
Scope Hoisting 會分析出模塊之間的依賴關係，儘量的把打包出來的模塊合併到一個函數中去
Tree Shaking 能夠實現刪除項目中未被引用的代碼

3、框架原理

一、描述一下React 生命週期

渲染過程調用到的生命週期函數，主要幾個要知道；
  	* constructor 
  	* getInitialState 
  	* getDefaultProps 
  	* componentWillMount 
  	* render 
  	* componentDidMount 

  	更新過程

  	* componentWillReceiveProps 
  	* shouldComponentUpdate 
  	* componentWillUpdate 
  	* render 
  	* componentDidUpdate 

  	卸載過程

  	componentWillUnmount

二、實現組件有哪些方式？

React.createClass 使用API來定義組件 React ES6 class component 用 ES6 的class 來定義組件 Functional stateless component 經過函數定義無狀態組件

三、應該在React生命週期的什麼階段發出ajax請求，爲何？

AJAX請求應在 componentDidMount函數進行請求。由於此時組件已經掛載安裝，保證了數據更新後對應的組件也能更新

四、當組件的setState函數被調用以後，發生了什麼？

React 會將傳入的參數與組件當前的狀態合併，生成新的狀態一> 根據新的狀態構建 React 元素樹一> 計算出新的樹與老樹的節點差別,進行最小化重渲染

五、爲何循環產生的組件中要利用上key這個特殊的prop？

Keys負責幫助React跟蹤列表中哪些元素被改變/添加/移除。React利用子元素的key在比較新舊元素樹的時候，快速得知一個元素是新的仍是剛剛被移除。

六、介紹redux，主要解決什麼問題

　　是管理應用程序狀態的庫，解決數據管理和數據通訊的問題
　　view 發出一個 action —> 派發器接收 action —> 讓 store 進行數據更新：reducer 進行 state 操做 —> view 經過 store 提供的 getState 獲取最新的數據

七、redux 有什麼缺點

一個組件所須要的數據，必須由父組件傳過來，而不能像 flux 中直接從 store 取。
當一個組件相關數據更新時，即便父組件不須要用到這個組件，父組件仍是會從新 render，可能會有效率影響，或者須要寫複雜的 shouldComponentUpdate 進行判斷。

八、爲何虛擬 dom 會提升性能?(必考)

虛擬 dom 至關於在 js 和真實 dom 中間加了一個緩存，利用 dom diff 算法避免了沒有必要的 dom 操做，從而提升性能。

九、react diff 原理（常考，大廠必考）

把樹形結構按照層級分解，只比較同級元素。
給列表結構的每一個單元添加惟一的 key 屬性，方便比較。
合併操做，調用 component 的 setState 方法的時候, React 將其標記爲 dirty.到每個事件循環結束, React 檢查全部標記 dirty 的 component 從新繪製.
選擇性子樹渲染。開發人員能夠重寫 shouldComponentUpdate 提升 diff 的性能

八、介紹react優化

用 shouldComponentUpdate 避免資源浪費
複雜的頁面不要在一個組件裏面寫完。
請儘可能使用const element。
map裏面添加key，而且key不要使用index（可變的）。具體可參考使用Perf工具研究React Key對渲染的影響
儘可能少用setTimeOut或不可控的refs、DOM操做。
props和state的數據儘量簡單明瞭，扁平化。
使用return null而不是CSS的display:none來控制節點的顯示隱藏。保證同一時間頁面的DOM節點儘量的少

4、性能優化

0、在開發項目上，知道那些優化的方式

性能優化：減小 http 請求數、避免跳轉重定向、壓縮代碼圖片、減小DOM操做、避免全局變量、將樣式表放在頂部，將腳本放在底部、小圖片（<10kb）轉換base64編碼、資源按需加載等。
代碼優化：有意義的命名，適當的註釋，代碼邏輯清晰，避免巨大函數，避免對象強耦合、使用事件代理、函數節流和防抖、禁止全局變量防止內存泄漏等。

一、函數節流和防抖

debounce：把觸發很是頻繁的事件（好比按鍵搜索）合併成一次執行。
throttle：保證每 X 毫秒恆定的執行次數，好比每200ms檢查下滾動位置，並觸發 CSS 動畫或請求數據。
requestAnimationFrame：可替代 throttle ，函數須要從新計算和渲染屏幕上的元素時，想保證動畫或變化的平滑性，能夠用它。注意：IE9 不支持。

　　requestAnimationFrame優勢

動畫保持 60fps（每一幀 16 ms），瀏覽器內部決定渲染的最佳時機
簡潔標準的 API，後期維護成本低
瀏覽器標籤未激活時，一切都不會執行

查看示例

二、介紹事件代理以及優缺點

在js中，當咱們移除某個元素但沒有將元素和監聽函數進行解綁時，事件處理函數依舊會留在內存中，沒法被當成垃圾回收。

減小事件註冊，節省內存
減小了dom節點更新的操做，處理邏輯只需在委託元素上進行
缺點：事件委託基於冒泡，對於onfoucs和onblur等事件不支持；層級過多，冒泡過程當中，可能會被某層阻止掉

三、手寫原生js實現事件代理，並要求兼容瀏覽器

其實就是考覈對事件對象e的瞭解程度，以及在IE下對應的屬性名
addEventListener、attachEvent

e.target、e.srcElement

function delegateEvent(interfaceEle, selector, type, fn) {

    if(interfaceEle.addEventListener){
    interfaceEle.addEventListener(type, eventfn);
    }else{
    interfaceEle.attachEvent("on"+type, eventfn);
    }
     
    function eventfn(e){
        var e = e || window.event;    
        var target = e.target || e.srcElement;
        //若是目標元素與選擇器匹配則執行函數
        if (matchSelector(target, selector)) {
            if(fn) {
                 //將fn內部的this指向target（在此以前this都是指向的綁定事件的元素即interfaceEle）
                fn.call(target, e); 
            }
        }
    }
}

四、React組件事件代理的原理、事件處理過程

並不是 #child 和 #parent 的事件分別代理到 document 上，而是 React 在 document 上綁定了一個 dispatchEvent 函數（事件），在執行 dispatchEvent 的過程當中，其內部會依次執行 #child 和 #parent 上綁定的事件。
React 合成事件對象的e.stopPropagation，只能阻止 React 模擬的事件冒泡，並不能阻止真實的 DOM 事件冒泡，更加不能阻止已經觸發元素的多個事件的依次執行。在這種狀況下，只有原生事件對象的 stopImmediatePropagation能作到。
事件處理過程：
示例：

五、什麼是內存泄漏？

本質上，內存泄漏能夠定義爲：應用程序再也不須要佔用內存的時候，因爲某些緣由，內存沒有被操做系統或可用內存池回收

因此，確保用完之後把它設置爲 null 或者從新定義

　　三種類型的常見 JavaScript 內存泄漏

　　意外的全局變量
　　被遺忘的計時器或回調函數
　　脫離 DOM 的引用
　　閉包裏多餘的沒有被引用的變量
實例：使用 Chrome 發現內存泄漏

六、PWA：Workbox

5、算法、設計模式

前端架構主要解決的是高複用性，架構能力提高方向主要是組件庫開發、前端框架實現

一、觀察者和訂閱-發佈的區別，各自用在哪裏

在觀察者模式中，觀察者是知道Subject的，Subject一直保持對觀察者進行記錄。然而，在發佈訂閱模式中，發佈者和訂閱者不知道對方的存在。它們只有經過消息代理進行通訊。
在發佈訂閱模式中，組件是鬆散耦合的，正好和觀察者模式相反。
觀察者模式大多數時候是同步的，好比當事件觸發，Subject就會去調用觀察者的方法。而發佈-訂閱模式大多數時候是異步的（使用消息隊列）。
觀察者設計模式定義了對象間的一種一對多的組合關係，以便一個對象的狀態發生變化時，全部依賴於它的對象都獲得通知並自動刷新
示例

6、網絡安全、通訊協議

一、HTTP2.0和HTTP1.X相比的新特性

新的二進制格式，相對文原本說有更強的健壯性
多路複用（MultiPlexing），即鏈接共享。一個鏈接上能夠有多個request，一個request對應一個id 。
header壓縮：HTTP1.x的header帶有大量信息，並且每次都要重複發送，HTTP2.0使用encoder來減小須要傳輸的header大小，通信雙方各自cache一份header fields表，既避免了重複header的傳輸，又減少了須要傳輸的大小。
服務端推送（server push）

二、經過什麼作到併發請求

對請求併發數進行限制，而且使用排隊機制讓請求有序的發送出去

三、http1.1時如何複用tcp鏈接

　　使用 keep-alive

四、三次握手、四次揮手

客戶端向服務器發送一個 SYN（synchronize：同步）包，請求創建鏈接
服務器收到後會發一個對SYN包的確認包ACK (Acknowledgement）便是確認字符回去
客戶端發送一個確認包(ACK)，通知服務器鏈接已創建

客戶端發送FIN報文，沒有數據要發給你了

五、什麼是 XSS 攻擊？如何防範 XSS 攻擊？什麼是 CSP？

Cross-Site Scripting（跨站腳本攻擊）簡稱 XSS，是一種代碼注入攻擊。攻擊者經過注入惡意腳本，使之在用戶的瀏覽器上運行

解決方法：

轉義字符
CSP 本質上就是創建白名單，開發者明確告訴瀏覽器哪些外部資源能夠加載和執行

什麼是 CSP（Content-Security-Policy）？

內容安全策略 (CSP) 本質上就是創建白名單，開發者明確告訴瀏覽器哪些外部資源能夠加載和執行

一般能夠經過兩種方式來開啓 CSP：

設置 HTTP Header 中的 Content-Security-Policy
設置 meta 標籤的方式 <meta http-equiv="Content-Security-Policy">

示例：

只容許加載本站資源

Content-Security-Policy: default-src ‘self’

只容許加載 HTTPS 協議圖片

Content-Security-Policy: img-src https://*

【XSS】美團

六、什麼是 CSRF 攻擊？如何防範 CSRF 攻擊？

CSRF（Cross-site request forgery）跨站請求僞造：冒充用戶執行某項操做的目的

CSRF自動防護策略：同源檢測（Origin 和 Referer 驗證）。
CSRF主動防護措施：Token驗證或者雙重Cookie驗證以及配合Samesite Cookie。
保證頁面的冪等性，後端接口不要在GET頁面中作用戶操做。

示例：

2007年Gmail的CSRF漏洞：點開一個黑客的連接，全部郵件都被竊取（攻擊者誘導用戶進入某個頁面，在頁面中經過表單提交 POST 請求，也說明了表單是能夠進行跨域攻擊的）

2008年YouTube上幾乎全部用戶能夠操做的動做都存在CSRF漏洞

2012年WordPress發現了一個操做用戶帳戶的CSRF漏洞：攻擊者引導用戶先進入目標的WordPress，而後點擊其釣魚站點上的某個按鈕，該按鈕其實是表單提交按鈕，會添加某個具備管理員權限的用戶

七、什麼是點擊劫持？如何防範點擊劫持？

點擊劫持是一種視覺欺騙的攻擊手段。攻擊者將須要攻擊的網站經過 iframe 嵌套的方式嵌入本身的網頁中，並將 iframe 設置爲透明，在頁面中透出一個按鈕誘導用戶點擊。

X-FRAME-OPTIONS 是一個 HTTP 響應頭，在現代瀏覽器有一個很好的支持。這個 HTTP 響應頭就是爲了防護用 iframe 嵌套的點擊劫持攻擊。

DENY，表示頁面不容許經過 iframe 的方式展現
SAMEORIGIN，表示頁面能夠在相同域名下經過 iframe 的方式展現
ALLOW-FROM，表示頁面能夠在指定來源的 iframe 中展現

八、什麼是中間人攻擊？如何防範中間人攻擊？

中間人攻擊是攻擊方同時與服務端和客戶端創建起了鏈接，並讓對方認爲鏈接是安全的，可是實際上整個通訊過程都被攻擊者控制了。攻擊者不只能得到雙方的通訊信息，還能修改通訊信息。如：不安全的公共 WIFI

九、URI 與 URL 的區別

URI：統一資源標誌符
URL：統一資源定位符
URN：URN 是另外一種形式的 URI，它經過特定命名空間中的惟一名稱來標識資源，好比 ISBN 版本號，urn:isbn:9780141036144
URI 包括不少協議，如 HTTPS、data、URN 等等，因此 URL 和 URN 都是 URI 的子集

6、監控

一、頁面埋點

手動埋點：靈活性高，但工做量大
自動埋點：靈活性低，統計全部的事件而且定時上報，但工做量小

二、性能監控

只須要調用 performance.getEntriesByType('navigation') ，就能夠得到頁面中各類詳細的性能相關信息

三、異常監控

一般的辦法是使用 window.onerror 攔截報錯
對於跨域的代碼運行錯誤會顯示 Script error. 對於這種狀況咱們須要給 script 標籤添加 crossorigin 屬性
對於異步代碼來講，可使用 catch 的方式捕獲錯誤。好比 Promise 能夠直接使用 catch 函數，async await 可使用 try catch

script標籤的crossorigin屬性

crossorigin的屬性值能夠是anonymous、use-credentials，會被瀏覽器默認作anonymous。crossorigin的做用有三個：

crossorigin會讓瀏覽器啓用CORS訪問檢查，檢查http相應頭的Access-Control-Allow-Origin

對於傳統script須要跨域獲取的js資源，控制暴露出其報錯的詳細信息

對於module script，控制用於跨域請求的憑據模式

script標籤的integrity屬性
<script crossorigin="anonymous" integrity="sha256-PJJrxrJLzT6CCz1jDfQXTRWOO9zmemDQbmLtSlFQluc=" src="https://assets-cdn.github.com/assets/frameworks-3c926bc6b24bcd3e820b3d630df4174d158e3bdce67a60d06e62ed4a515096e7.js"></script>
這是github源碼， integrity 告訴瀏覽器，使用sha256簽名算法對下載的js文件進行計算，並與intergrity提供的摘要簽名對比，若是兩者不一致，就不會執行這個資源。

減小由【託管在CDN的資源被篡改】而引入的XSS 風險

減小通訊過程資源被篡改而引入的XSS風險（同時使用https會更保險

script標籤的async和defer 屬性

async 僅適用於外鏈，規定腳本異步執行：不會按照出現的順序執行，執行的時候，有可能頁面還沒解析完成，不會阻塞頁面解析

defer僅適用於外鏈，規定腳本延遲執行：會按照出現的順序執行，在html解析完成後, DOMContentLoaded以前執行，不會阻塞頁面解析