1. 項目組織方式 :嚴格依賴註入模式。 在angularJS中,如果要使用模塊中的內容,只要提供相關模塊的名稱即可,不需要自己查找、創建、初始化等等,就可以直接得到需要註入的模塊進行使用,這種方式即所謂的 依賴註入 。 但是在JS代碼壓縮混淆(minify/uglify)的時候,參數的名稱會被壓縮 ...
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的功能變數名稱。
- chrome會自動把當前頁面所有帶
<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>
參考文獻: