1. 項(xiàng)目組織方式

• ng-strict-di：嚴(yán)格依賴注入模式。

  • 在angularJS中，如果要使用模塊中的內(nèi)容，只要提供相關(guān)模塊的名稱即可，不需要自己查找、創(chuàng)建、初始化等等，就可以直接得到需要注入的模塊進(jìn)行使用，這種方式即所謂的依賴注入。
  • 但是在JS代碼壓縮混淆(minify/uglify)的時(shí)候，參數(shù)的名稱會(huì)被壓縮成一個(gè)字母，導(dǎo)致參數(shù)的名稱發(fā)生變化，進(jìn)而導(dǎo)致注入的失敗；
  • 所以，AngularJS推薦使用將模塊名和函數(shù)寫在同一個(gè)數(shù)組中，并將模塊名寫在函數(shù)之前；ng-strict-di指令的作用就是，強(qiáng)制項(xiàng)目代碼使用這種嚴(yán)格的風(fēng)格，如果不是就會(huì)報(bào)錯(cuò)，進(jìn)而保證，依賴注入的正確性。

2. 性能優(yōu)化

• 瀏覽器預(yù)加載：DNS prefetch——提前加載域名解析，省去域名解析時(shí)間；

  • chrome會(huì)自動(dòng)把當(dāng)前頁面所有帶href的link都做一次dns prefetch；但a標(biāo)簽的href再https下不起作用，需要meta屬性強(qiáng)制開啟；
  • 需要手動(dòng)添加link的場景是：開發(fā)者預(yù)計(jì)用戶在后面的訪問中需要用到鏈接在當(dāng)前頁面所有l(wèi)ink中都沒有包含；
  • chromium官方文檔中說明，chrome會(huì)使用8個(gè)線程專門做DNS Prefeatching，chrome本身并不做dns記錄的cache，而是直接從操作系統(tǒng)讀DNS；即，直接修改系統(tǒng)host的dns記錄或者h(yuǎn)ost是會(huì)影響chrome的；
  • 合理的使用dns prefetch是能對頁面性能帶來50ms~~300ms的提升；
  • 手動(dòng) dns prefetching 的代碼實(shí)際上還是會(huì)增加html的代碼量的，特別是域名多的情況下。所以，最優(yōu)的方案應(yīng)該是：通過js初始化一個(gè)iframe異步加載一個(gè)頁面，而這個(gè)頁面里包含本站所有的需要手動(dòng)dns prefetching的域名。

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

• 跨域資源權(quán)限：跨域img、js引用允許 crossorigin="anonymous"

  • 允許網(wǎng)站對跨域腳本、圖片的引用：出于安全策略(即同源策略)，正常情況下瀏覽器是不允許跨域資源的引用，當(dāng)瀏覽器嘗試加載不屬于當(dāng)前域的腳本時(shí)，跨域腳本知會(huì)返回Script error；
  • 最新HTML5規(guī)定，是允許獲取不屬于當(dāng)前域的腳本資源，但必須滿足兩個(gè)條件：①跨域腳本的服務(wù)器必須通過Access-Control-Allow-Origin頭信息允許當(dāng)前域名可以獲取錯(cuò)誤信息；②當(dāng)前域名的script標(biāo)簽必須指明src屬性指定的地址是跨域支持的，也就是crossorigin屬性：如下

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

參考文獻(xiàn)：

DNS Prefetching的兩三事

預(yù)加載系列一：DNS Prefetching 的正確使用姿勢

HTML5 script 標(biāo)簽的 crossorigin 屬性到底有什么用？

轉(zhuǎn)載于:https://www.cnblogs.com/hbzyin/p/8325495.html

總結(jié)

以上是生活随笔為你收集整理的番外篇01：angularJS最佳实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。