番外篇01:angularJS最佳實戰

来源:https://www.cnblogs.com/hbzyin/archive/2018/01/21/8325495.html
-Advertisement-
Play Games

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的功能變數名稱。
<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 屬性到底有什麼用?

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1. Bind 方法 ReactiveCocoa操作的核心方法是bind(綁定),而且RAC中核心開發方式,也是綁定,之前的開發方式是賦值,而用RAC開發,應該把重心放在綁定,也就是可以在創建一個對象的時候,就綁定好以後想要做的事情,而不是等賦值之後在去做事情。 列如:把數據展示到控制項上,之前都是重 ...
  • HTTP 緩存體系 首先我將 Http 緩存體系分為以下三個部分: 1. 緩存存儲策略 用來確定 Http 響應內容是否可以被客戶端緩存,以及可以被哪些客戶端緩存 這個策略的作用只有一個,用於決定 Http 響應內容是否可緩存到客戶端 對於 Cache-Control 頭裡的 Public、Priv ...
  • 計算屬性computed 模板內的表達式非常便利,但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如: 所以,對於任何複雜邏輯,你都應當使用計算屬性。 例子 結果: 這裡我們聲明瞭一個計算屬性 reversedMessage。我們提供的函數將用作屬性 vm.rev ...
  • 我新建了一個web前端的新手交流群,包括基礎知識和剛入職的技術分享,人還不多,期待著每一個人的加入,希望可以得到你的認同哦~你的加入是我組織交流群的一大動力哦!~ web前端交流QQ群:314439765 ...
  • 隨著各大瀏覽器對HTML5技術支持的不斷完善,未來HTML5必將改變我們創建Web應用程式的方式。而很多html5的初學者都想找一款好用的編寫軟體,這裡主機吧就給大家推薦七款好用的html5編寫軟體。 1、Brackets ,推薦指數:★★★★☆(四星)Adobe 開源的前端開發工具。這個基本上是完 ...
  • 雖然最新版的前端開發利器WebStorm支持了Vue,但是大部分人的WebStorm依然是預設不支持Vue的老版本(比如之前的我),所以需要手動添加WebStorm對Vue的支持。要想讓WebStorm支持Vue主要分兩步,第一步是安裝Vue.js插件,使得WebStorm能夠對Vue語法進行提示; ...
  • 前言 見解有限,如有描述不當之處,請幫忙及時指出,如有錯誤,會及時修正。 超長文+多圖預警,需要花費不少時間。 如果看完本文後,還對進程線程傻傻分不清,不清楚瀏覽器多進程、瀏覽器內核多線程、JS單線程、JS運行機制的區別。那麼請回覆我,一定是我寫的還不夠清晰,我來改。。。 __ 正文開始 __ 最近 ...
  • 轉載請註明出處: "Generator函數語法解析" Generator函數是ES6提供的一種非同步編程解決方案,語法與傳統函數完全不同。以下會介紹一下Generator函數。 寫下這篇文章的目的其實很簡單,是想梳理一下自己對於Generator的理解,同時呢,為學習async函數做一下知識儲備。 G ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...