国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《高性能javascript》 筆記一

yeyan1996 / 3074人閱讀

摘要：所以全局對象的返回所需要的時間是最長的應該用局部變量存起來減少作用域鏈的查詢次數。這就導致本來可以自己訪問的局部變量需要在作用域鏈的后面一層被訪問到了。因為訪問對象中的一些屬性和方法涉及到原型鏈的查找這個和作用域鏈是一個道理。

第一部分:關于script

當把js腳本通過script標簽放在head中的時候,早期瀏覽器在遇到script的時候會阻止瀏覽器加載和渲染html。直到javascript腳本被下載并執行完,且這些javascript是依次下載和執行,不能并行。如下面這個圖所示：

現代瀏覽器如IE8,Firefox 3.5,Safari 4,Chrome 允許同時并行下載js文件。但是不幸的是js下載仍然會阻塞其他資源的下載,如圖片。還是會阻止瀏覽器去加載和渲染html。解決辦法就是將js body的最底端。

限制script標簽的數量,因為每次遇到script都要阻塞瀏覽器加載和渲染html。這個對于內聯和外聯js都是一樣的。但是對于外聯js,每個http請求都需要和服務器建立一次連接,時間上的開銷也不小。所以下載一個100KB的js文件比下載4個25KB的js文件速度要快。所以可以將js文件進行文件的合并減少http請求的數量提高性能。

非阻塞腳本在html加載完成后進行javascript源碼的下載。有幾種方法可以做到：

  
3.1 在script上添加defer屬性。defer屬性告訴瀏覽器該javascript代碼不會影響dom樹。所以瀏覽器可以放心的將他延遲執行,即等dom加載完成后執行。defer屬性的script可以防止瀏覽器的任何一個地方，當瀏覽器遇到這個script時候,開始下載但是并不立即執行，等到dom樹加載完成在onload事件觸發之前執行,且不會影響到其他資源的下載。


 
  
 Script Defer Example 
  
  
  
  
 
  


  
執行結果：

  在不支持defer屬性的瀏覽器中結果為：defer script load 在支持defer屬性的瀏覽器中的結果是script defer load


  
3.2 動態執行將javascript代碼插入文檔中。


function loadScript(url, callback){ 
 var script = document.createElement ("script") 
 script.type = "text/javascript"; 
 if (script.readyState){ //IE 
  script.onreadystatechange = function(){ 
  if (script.readyState == "loaded" || script.readyState == "complete"){ 
  script.onreadystatechange = null; 
  callback(); 
  } 
}; 
 } else { //Others 
  script.onload = function(){ 
  callback(); 
}; 
 } 
 script.src = url; 
 document.getElementsByTagName_r("head")[0].appendChild(script); 
}

  
3.3 通過XHR 從服務端獲取js 動態插入到文檔中。
第二部分: 關于作用域鏈和原型鏈

每個函數都會有個作用域鏈,用于標識符的查找也就是變量的查找。所以如果變量在原型鏈越后面的地方訪問所需要的時間就越長。所以全局對象的返回所需要的時間是最長的,應該用局部變量存起來減少作用域鏈的查詢次數。

with語句和try-catch 會改變執行函數的作用域鏈。會在作用域鏈前加上with或者catch自己的活躍對象AO。這就導致本來可以自己訪問的局部變量需要在作用域鏈的后面一層被訪問到了。增加了變量訪問的時間。所以避免使用with語句。而try-catch還是很有用的。不應該避免,可以通過在catch到錯誤后用一個錯誤處理函數來解決這種性能問題。

在javascript中存儲數據的地方有四個。分別是直接量,變量,數組,對象。其中直訪問接量和變量是最快的,兩者差別不大。但是對于數組和對象相對來說要慢些,特別是對象。因為訪問對象中的一些屬性和方法涉及到原型鏈的查找,這個和作用域鏈是一個道理。所以需要存儲這些需要遍歷原型鏈的方法或者屬性提供性能。

第三部分 ： DOM對象編程

瀏覽器一般分為渲染引擎和js引擎,如chrome 它的渲染引擎就是webkit 它的js引擎是v8。

訪問和修改dom是需要付出性能代價的。因為修改一個dom元素可能回去觸發瀏覽器去重新計算它的幾何屬性,重新排版。所以盡可能少的去和dom元素打交道。

選用更快的DOM API 比如用nextSibling 代替childNodes 或者用children代替childNodes。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78041.html

相關文章

  • 《高性能JavaScript》讀書筆記

    摘要：除此以外，讓元素脫離文檔流也是一個很好的方法。因為元素一旦脫離文檔流，它對其他元素的影響幾乎為零，性能的損耗就能夠有效局限于一個較小的范圍。講完重排與重繪，往元素上綁定事件也是引起性能問題的元兇。高性能這本書非常精致，內容也非常豐富。 showImg(https://segmentfault.com/img/bVJgbt?w=600&h=784); 入手《高性能JavaScript》一...

    W_BinaryTree 評論0 收藏0

  • 高性能javascript筆記

    摘要：首先將對象引用存儲到局部變量中，全局變量的訪問減少，當有很多全局變量被反復訪問時，這種方法對性能的改善是很明顯的。 javascript加載和運行 1. 腳本位置 盡管瀏覽器已經允許并行下載javascript文件，但是javascript下載過程仍然會阻塞其他資源的下載，如圖片。頁面仍然需要等待所有javascript代碼下載并執行完成才能繼續所以優化javascript的首要原...

    Jeffrrey 評論0 收藏0

  • JS筆記

    摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程 從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。 網絡基礎知識之 HTTP 協議 詳細介紹 HTT...

    rottengeek 評論0 收藏0

  • 讀書筆記(03) - 性能 - JavaScript高級程序設計

    摘要：作用域鏈查找作用域鏈的查找是逐層向上查找。而全局變量和閉包則會與之相反，繼續保存，所以使用用后需手動標記清除，以免造成內存泄漏。獲取元素的屬性獲取元素的屬性等參考文檔高級程序設計作者以樂之名本文原創，有不當的地方歡迎指出。 showImg(https://segmentfault.com/img/bVburXV?w=500&h=399); 作用域鏈查找 作用域鏈的查找是逐層向上查找。查...

    warnerwu 評論0 收藏0

  • 高性能JavaScript學習筆記-執行與加載

    摘要：雖然會有阻塞但還是有幾招可以減少對性能的影響的。下載資源是異步的但是執行代碼的時候仍是同步的同樣會造成阻塞。缺點文件必須與所請求頁面處于同一個域這種情況下文件不能從下載不適合大型的應用。 瀏覽器在處理HTML頁面渲染和JavaScript腳本執行的時候是單一進程的,所以在當瀏覽器在渲染HTML遇到了標簽會先去執行標簽內的代碼(如果是使用src屬性加載的外鏈文件,則先下載再執行),在這個...

    fou7 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<