番外篇01：angularJS最佳實戰

1. 項目組織方式

• ng-strict-di：嚴格依賴注入模式。

  • 在angularJS中，若是要使用模塊中的內容，只要提供相關模塊的名稱便可，不須要本身查找、建立、初始化等等，就能夠直接獲得須要注入的模塊進行使用，這種方式即所謂的依賴注入。
  • 可是在JS代碼壓縮混淆(minify/uglify)的時候，參數的名稱會被壓縮成一個字母，致使參數的名稱發生變化，進而致使注入的失敗；
  • 因此，AngularJS推薦使用將模塊名和函數寫在同一個數組中，並將模塊名寫在函數以前；ng-strict-di指令的做用就是，強制項目代碼使用這種嚴格的風格，若是不是就會報錯，進而保證，依賴注入的正確性。

2. 性能優化

• 瀏覽器預加載：DNS prefetch——提早加載域名解析，省去域名解析時間；

  • chrome會自動把當前頁面全部帶href的link都作一次dns prefetch；但a標籤的href再https下不起做用，須要meta屬性強制開啓；
  • 須要手動添加link的場景是：開發者預計用戶在後面的訪問中須要用到連接在當前頁面全部link中都沒有包含；
  • chromium官方文檔中說明，chrome會使用8個線程專門作DNS Prefeatching，chrome自己並不作dns記錄的cache，而是直接從操做系統讀DNS；即，直接修改系統host的dns記錄或者host是會影響chrome的；
  • 合理的使用dns prefetch是能對頁面性能帶來50ms~~300ms的提高；
  • 手動 dns prefetching 的代碼實際上仍是會增長html的代碼量的，特別是域名多的狀況下。因此，最優的方案應該是：經過js初始化一個iframe異步加載一個頁面，而這個頁面裏包含本站全部的須要手動dns prefetching的域名。

<meta http-equiv="x-dns-prefetch-control" content="on"> // 強制開啓瀏覽器 DNS Prefetch功能
<link rel="dns-prefetch" href="http://www.spreadfirefox.com/"> // 強制查詢特定主機 DNS

• 跨域資源權限：跨域img、js引用容許 crossorigin="anonymous"

  • 容許網站對跨域腳本、圖片的引用：出於安全策略(即同源策略)，正常狀況下瀏覽器是不容許跨域資源的引用，當瀏覽器嘗試加載不屬於當前域的腳本時，跨域腳本知會返回Script error；
  • 最新HTML5規定，是容許獲取不屬於當前域的腳本資源，但必須知足兩個條件：①跨域腳本的服務器必須經過Access-Control-Allow-Origin頭信息容許當前域名能夠獲取錯誤信息；②當前域名的script標籤必須指明src屬性指定的地址是跨域支持的，也就是crossorigin屬性：以下

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>

參考文獻：

1. DNS Prefetching的兩三事
2. 預加載系列一：DNS Prefetching 的正確使用姿式
3. HTML5 script 標籤的 crossorigin 屬性到底有什麼用？