新瀏覽器支持js並行載入

Ⅰ 如何對前端性能進行優化

前端開發代碼優化、可維護性、瀏覽器兼容性是非常重要的課題。從實際的工程應用角度出發，最常遇見的前端優化問題。前端性能進行優化規則，基本可以涵蓋現在前端大部分的性能優化原則了，很多更加geek和精細優化方法都是從這些原則裡面延伸出來的。

前端性能進行優化都有哪些規則

1. 減少HTTP請求次數

   盡量合並圖片、CSS、js。比如載入一個頁面有5個css文件的話，把這個5個文件合成一個的話，就只需要發出一次http請求，節省網路請求時間，加快頁面的載入。
   

2. 使用CDN

網站上靜態資源即css、js全都使用cdn分發，包括圖片

3. 避免空的src和href

當link標簽的href屬性為空、script標簽的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容載入進來作為它們的值。所以要避免犯這樣的疏忽。

4. 為文件頭指定Expires

Exipres是用來設置文件的過期時間的，一般對css、js、圖片資源有效。 他可以使內容具有緩存性，這樣下回再訪問同樣的資源時就通過瀏覽器緩存區讀取，不需要再發出http請求。如下例子：

新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.

5. 使用gzip壓縮內容

gzip能夠壓縮任何一個文本類型的響應，包括html，xml，json。大大縮小請求返回的數據量。

6. 把CSS放到頂部

網頁上的資源載入時從上網下順序載入的，所以css放在頁面的頂部能夠優先渲染頁面，讓用戶感覺頁面載入很快。

7. 把JS放到底部

載入js時會對後續的資源造成阻塞，必須得等js載入完才去載入後續的文件 ，所以就把js放在頁面底部最後載入。

8. 避免使用CSS表達式

舉個css表達式的例子

font-color: expression( (new Date()).getHours()%3 ? 「#FFFFFF" : 「#AAAAAA" );

這個表達式會持續的在頁面上計算樣式，影響頁面的性能。並且css表達式只被IE支持。

9. 將CSS和JS放到外部文件中

目的是緩存文件，可以參考原則4。 但有時候為了減少請求，也會直接寫到頁面里，需根據PV和IP的比例權衡。

10. 權衡DNS查找次數

減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。

IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。

下面是新浪微博的圖片域名，我們可以看到他有多個域名，這樣可以保證這些不同域名能夠同時去下載圖片，而不用排隊。不過如果當使用的域名過多時，響應時間就會慢，因為不用響應域名時間不一致。

11. 精簡CSS和JS

這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件，把空格回車全部去掉，減少文件的大小。現在的壓縮工具有很多，基本主流的前端構建工具都能進行css和js文件的壓縮，如grunt，glup等。

12. 避免跳轉

有種現象會比較坑爹，看起來沒什麼差別，其實多次了一次頁面跳轉。比如當URL本該有斜杠（/）卻被忽略掉時。例如，當我們要訪問http:// .com時，實際上返回的是一個包含301代碼的跳轉，它指向的是http:// .com/（注意末尾的斜杠）。在nginx伺服器可以使用rewrite；Apache伺服器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。

另一種是不用域名之間的跳轉， 比如訪問http:// .com/bbs跳轉到http:// bbs..com/。那麼可以通過使用Alias或者mod_rewirte建立CNAME（保存一個域名和另外一個域名之間關系的DNS記錄）來替代。

13. 刪除重復的JS和CSS

重復調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復運算javaScript的問題。

14. 配置ETags

它用來判斷瀏覽器緩存里的元素是否和原來伺服器上的一致。比last-modified date更具有彈性，例如某個文件在1秒內修改了10次，Etag可以綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 伺服器集群使用，可取後兩個參數。使用ETags減少Web應用帶寬和負載

15. 可緩存的AJAX

非同步請求同樣的造成用戶等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話，直接使用緩存

$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }

16. 使用GET來完成AJAX請求

當使用XMLHttpRequest時，瀏覽器中的POST方法是一個「兩步走」的過程：首先發送文件頭，然後才發送數據。因此使用GET獲取數據時更加有意義。

17. 減少DOM元素數量

這是一門大學問，這里可以引申出一堆優化的細節。想要具體研究的可以看後面推薦書籍。總之大原則減少DOM數量，就會減少瀏覽器的解析負擔。

18. 避免404

比如外鏈的css、js文件出現問題返回404時，會破壞瀏覽器的並行載入。

19. 減少Cookie的大小

Cookie裡面別塞那麼多東西，因為每個請求都得帶著他跑。

20. 使用無cookie的域

比如CSS、js、圖片等，客戶端請求靜態文件的時候，減少了 Cookie 的反復傳輸對主域名的影響。

21. 不要使用濾鏡

IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了內存開支，因此它的問題是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。

22. 不要在HTML中縮放圖片

比如你需要的圖片尺寸是50* 50

那就不用用一張500*500的大尺寸圖片，影響載入

23. 縮小favicon.ico並緩存

Ⅱ js進程和線程的區別

一、線程和進程基本概念

進程：操作系統分配的佔有CPU資源的最小單位。擁有獨立的地址空間。
線程：安排CPU執行的最小單位。同一個進程下的所有線程，共享進程的地址空間。

簡單講，計算機就像工廠，進程是個大車間，計算機內部有很多個這樣的大車間。線程是工人，每一個車間里的工人至少有一個。

為什麼這么畫呢？有點一個挨一個的效果呢？是因為以前我就老是疑惑進程或者線程運行時到底是並行？還是串列？
其實，在單CPU或單核的情況下，宏觀上無論是進程也好，線程也罷，都是並行的。而在微觀下，某一個具體的時刻，他們實際上都是串列的。在多CPU或多核的情況下，才是真正意義的並行。

二、線程和進程的關系、通性

關系：進程中包含著至少一個線程。在進程創建之初，就會包含一個線程，這個線程會根據需要，調用系統庫函數去創建其他線程。但需要注意的是，這些線程之間是沒有層級關系的，他們之間協同完成工作。在整個進程完成工作之後，其中的線程會被銷毀，釋放資源。

通性：都包含三個狀態，就緒、阻塞、運行。通俗的講，阻塞就是資源未到位，等待資源中。就緒，就是資源到位了，但是CPU未到位，還在運行其他。

三、線程的好處

既然，線程和進程是存在通性的，那麼為什麼操作系統還要設置線程這個單位，那就說說線程的幾點好處：
1、在一個程序中，多個線程可以同步或者互斥並行完成工作，簡化了編程模型；
2、線程較進程來講，更輕；
3、線程雖然微觀並行。但是，在一個進程內部，一個線程阻塞後，會執行這個進程內部的其他線程，而不是整體阻塞。從某種意義上，提高了CPU的利用率。

四、市面上的通用叫法

單線程與多線程，都指在一個進程內的單和多。不要笑我，之前真的不懂。心中那隻小羊駝，奔過來，跑過去。還抬起了傲嬌的眼睛，看了我一眼，呵呵~~~

五、javaScript單線程執行機制

1、 首先解釋下，單線程和多線程。
什麼是單線程？單線程就是一個進程中只有一個線程。程序順序執行，前面的執行完，才會執行後面的程序。
什麼是多線程？多線程就是一個進程中只有多個線程。在進程內部進行線程間的切換，由於每個線程執行的時間片很短，所以在感覺上是並行的。

2、那麼為什麼感覺上javaScript是多線程？而且還支持AJAX非同步呢？AJAX是真正的非同步嗎？
先說明，從哪裡可以得出javaScript是單線程。比如你頁面一上來就alert（「hello world~」）；只要你不關閉這個對話框，後續的js代碼就不會再執行。因為，單線程就是這樣一步一步的順次執行，前面不執行完，後面不會執行。也就是說，在具體的某一時刻，只有一段代碼在執行。
可是，JavaScript明明可以處理各種觸發事件，感覺上是非同步多線程啊。其實，它的原理是這樣的，JavaScript單線程的執行瀏覽器的一個事件隊列，要執行的函數和觸發事件的回調函數都被放在這個隊列中。比如，我點擊率一下按鈕，之後又將瀏覽器縮小了，那麼這兩個事件的回調函數就會順次地被放在當前執行的「函數」之後，再一一執行。
那麼，既然JavaScript是單線程，那麼如何維護這個函數隊列呢，他分身無術啊。這時候，就需要知道，瀏覽器可不是單線程。雖然，每一個window只有一個js引擎，但是瀏覽器是事件驅動的、非同步的、多線程的。
瀏覽器內部有一個事件輪詢（event loop），是一個大的內部消息循環，會輪詢大的消息隊列，並執行。也就是js要處理的事件隊列，是瀏覽器維護的。
瀏覽器至少有四個線程（不同瀏覽器會有差異）： js引擎線程、界面渲染線程、瀏覽器事件觸發線程、http請求線程。
其實，到這里就說的很明白了。但是，又想到了延時函數（setTimeout）的例子，感覺上，因為沒有阻塞執行，會感覺是非同步，其實並不是。只是，js在執行到延時函數時，會觸發瀏覽器的定時器，到設置時間，瀏覽器再將這個函數放入執行的函數隊列，再由JavaScript引擎執行。都是在瀏覽器空閑了才會執行。
關於AJAX的非同步，是真正的非同步。同樣的道理，在調用AJAX的時候，瀏覽器會開辟一個新的線程，去處理這個請求，得到響應後，如果這個請求有回調，會將這個回調再放入事件隊列中。再由JavaScript引擎執行。

3、關於JavaScript的阻塞
瀏覽器雖然是多線程，但是由於JavaScript具有阻塞特性，無論外鏈還是內嵌腳本，在瀏覽器執行解釋js腳本的時候，瀏覽器是不會去做別的事情的，比如渲染頁面，而是直到js下載並執行完畢。
這樣，js腳本的下載、解釋執行，會反該頁面的繼續繪制，給用戶帶來不良的體驗。所以，要對其優化，有如下幾點：
a、將<script>內嵌和外鏈，在可以的情況下，放在<body>底部。註：對於css，瀏覽器是並行下載
b、在頁面onload後，載入js
c、html5 <script>標簽的defer屬性，在頁面載入完成後下載
d、使用創建<script>標簽的方式，在頁面載入完成後添加進去。
註：解決阻塞就是一句話，先讓頁面渲染完，再載入js。

六、Node.js單線程執行機制

腦子就像有問題一樣。js都是單線程的了，node.js就是js實現的，還能是多線程？！！呵呵噠~
Node.js其實還不是真正意義上的js,他是借用了js語法實現的，達到真正意義的非阻塞服務端語言。但是他的運行機制，也是事件輪詢 （Event Loop）。

Ⅲ JS非同步載入的幾種方式

非同步載入又叫非阻塞載入，瀏覽器在下載執行js的同時，還會繼續進行後續頁面的處理。主要有三種方式。

方法一：也叫Script DOM Element

這段代碼將使JS執行5秒才完成！

JS延遲載入機制(LazyLoad)：簡單來說，就是在瀏覽器滾動到某個位置在觸發相關的函數，實現頁面元素的載入或者某些動作的執行。如何實現瀏覽器滾動位置的檢測呢？可以通過一個定時器來實現，通過比較某一時刻頁面目標節點位置和瀏覽器滾動條高度來判斷是否需要執行函數。