淺談JavaScript性能

時間 2019-12-02

原文原文鏈接

最近在JavaScript性能方面有所感悟，把個人經驗分給你們：跨域

說到JavaScript，就不得不說它的代碼的運行速度——數組

　　在我初學JavaScript的時候，只是以爲它是一個很強大的腳本。漸漸的，在作一些大的網站的項目的時候，卻發現，代碼執行的卻異常的慢（儘管JavaScript用的是V8引擎），任然不能知足個人需求。這時候，我才慢慢的關注性能這一名詞。在之前，我的老是喜歡在網上搜一些好的插件，並把它用到網站的建設工做當中。那麼問題來了，在大量的插件的使用當中，網頁老是要運行好久，處於很長時間的空白，這時候我發現JavaScript執行代碼的速度愈來愈慢。究其原因，那就是網頁在渲染的過程前，一直在執行JavaScript代碼的編譯，以致於讓網頁長時間處於空白狀態。那麼這種問題的來源是什麼？怎麼解決呢？瀏覽器

　　在引用<script>標籤的時候，咱們習慣性的把它放在<head>標籤以內。這樣的作法，只是在最初接觸JavaScript，或者說小的項目的時候能夠這樣作。我的以爲，作網頁就是要很好的實現與用戶的交互，若是像上述過程同樣，用戶長時間看的是一片空白的頁面，會致使什麼樣的後果可想而知。爲了提升JavaScript代碼編譯的運行速度，提高JavaScript的性能，(1)我推薦把<script>標籤寫在</body>以前，若是有不少的js,我建議用把包工具（雅虎YUI）合併一下.(2)在IE4+ Firefox3.5 的版本下，用代有defer的屬性，像這樣：<script defer></script> ,這樣作的原理是讓<script>標籤總在onload事件執行前調用，緣由不用深究。(3)動態的建立JavaScript （有興趣的能夠試試，不推薦）。工具

　　下面說到一個很實用，又簡單，提高JavaScript性能的方法：‘局部變量’oop

　　這裏必需要說一下在JavaScript裏面，有四種數據存取位置：1.直接量 2.變量 3.數組元素 4.對象成員。性能

　　一般來說，咱們能夠經過把經常使用的對象成員、數組元素、跨域變量保存在局部變量中來改善JavaScript性能，由於局部變量訪問的速度更快。爲了便於理解，仍是敲兩段代碼吧！網站

　　　　function myLoop1(){插件

　　　　　　for(var count=0;count<99999;count++){對象

　　　　　　　　$('#idName').innerHTML + = 'A';事件

　　　　　　}

說明一下這段代碼：每一次循環訪問id是idName的元素時，該元素一共被訪問了兩次，一次是讀取他的innerHTML，另外一次是重寫idName的值。

那麼怎麼纔算提高性能的作法呢？看以下代碼

　function myLoop2(){

　　　　　　var show='';

　　　　　　for(var count=0;count<99999;count++){