AngularJS模塊規範和性能優化

模塊化規範

概念：根據咱們寫的不一樣的功能按照不一樣的類型劃分，分工協做

做用：輔助的做用，能將咱們編寫好的js分爲模塊，是咱們代碼的編寫更加專業

come on js

引入模塊是同步進行的：前面記載之後，後面才能使用，因此不適合前端，主要是適用於後臺 nodejs用的最多

amd

概念：a異步，m模塊，d定義（異步模塊化規範），引入模塊能夠異步加載 jquery和bootstrap都支持amd

requirejs運用的最多

require js

主模塊引入：data-main="url"

主模塊做用：初始化配置 延遲加載

require（["test1","test2"],function(t1,t2){ t1:fun1(); t1:fun2(); t2:fun1(); //調用的方法

}）

定義模塊的關鍵字：define ——>兩個參數，數組是須要引用的模塊，兩邊要避免互相引用：（[],function(){要執行的js代碼 return{ 須要執行的函數方法，是一個json對象 }}）

umd

概念：u通用，umd（通用模塊化規範），目前使用的框架還很少

cmd

概念：c->come on ->公共的模塊化規範

sea.js——>國內的->提出的cmd規範

seajs

能夠做爲異步或者是同步，前置加載（也提供了延遲加載）

官網：sea.js.org 能夠兼容各大瀏覽器 使用異步加載的方法，能夠實現互相之間的調用

性能優化

《高性能網站建設指南》，《高性能網站建設進階指南》。

工具：chrome控制檯，firefox自帶的開發者工具->性能

網絡（服務器）

一、服務器集羣（多個服務器組成的集羣，提供同樣的服務和功能）

二、DNS：域名解析服務器（查詢對應的IP地址）——>對應IP地址，是惟一的（比較好記的名字），維護費用頂級的是50元一年（頂級域名後綴：.com/.cn）非營利性機構通常後綴名是.org。-->提升性能->配置更快的域名服務器

三、CDN：內容發佈網絡，經過配置不一樣的服務器，縮短距離，提升效率-->配置CDN能夠解決一部分的性能優化問題

四、延遲加載和預加載

瀏覽器

http協議：超文本協議 一、按照http協議的請求進行封裝

請求行：請求協議的版本，請求方法，請求路徑

請求頭：瀏覽器的版本信息，瀏覽器的交互信息（cookie）

第三個：空格

第四部分：請求參數

二、

狀態行：狀態碼（404,200,304->頁面沒有發生任何修改,500等）、描述；

響應頭：頁面上看不到，服務器和瀏覽器溝通的東西，緩存、cookie、時間、編碼集（UTF-8）等;

空行：

消息體：呈如今頁面上的東西

https協議：超文本傳輸安全協議（優勢，創建不少的安全協議，不易被攔截；缺點：效率比較低）

緩存：是解決性能比較有效的方法（設置一個屬性Expires->設置一個時間），主要是靜態資源，動態資源常常變更，缺點：網頁內容的更新問題

方法一：Etag：數字加字母的字符串，加在須要緩存的元素上面，是一個元素是否改變的標識符（缺點：服務器集羣的時候，沒有做用）

方法二：last modify date，服務器集羣的時候沒有做用

方法三：在圖片後面加上一串的數字（根據js索引的內容的算法得出來的）

代碼

html

一、html：a、減小table佈局（頁面加載的效率很慢），b、儘可能減小嵌套的層數

二、css：選擇器->解析方式->從右往左 a、儘可能避免使用複合選擇器或者減小層數

雪碧圖（圖片分割技術）：減小請求數量

合併和壓縮：部署的時候，合爲一個css

重繪和迴流：減小回流的次數

【瀏覽器由（渲染引擎，js引擎組成，瀏覽器內核（渲染引擎/排版引擎）->解析DOM，解析CSS。js引擎是解析js(chrome是V8)】

簡單的動畫儘可能用css3來製做

圖標字體

節點的緩存，減小對DOM的操做

三、js->合併和壓縮

四、iamge：轉化爲base64的編碼

壓縮工具1.gruntjs官方網站：www.gruntjs.net 安裝,利用node.js的npm來安裝 npm install grunt-cli -g