30條技巧提高Web程式執行效率

来源:http://www.cnblogs.com/shouce/archive/2016/01/07/5108258.html
-Advertisement-
Play Games

儘量避免使用DOM。當需要反覆使用DOM時,先把對DOM的引用存到JavaScript本地變數里再使用。使用設置innerHTML的方法來替換document.createElement/appendChild()方 法。eval()有問題,new Fuction()構造函數也是,儘量避免使用它們。...


  1. 儘量避免使用DOM。當需要反覆使用DOM時,先把對DOM的引用存到JavaScript本地變數里再使用。使用設置innerHTML的方法來替換document.createElement/appendChild()方 法。
  2. eval()有問題,new Fuction()構造函數也是,儘量避免使用它們。
  3. 拒絕使用with語句。 它會導致當你引用這個變數時去額外的搜索這樣的一個命名空間,with里的代碼在編譯時期是完全未知的。
  4. 使用for()迴圈替代for…in循 環。因為for…in迴圈在開始迴圈之前需要Script引擎創建一個含有所有可迴圈屬性的 List,需要多檢查一次。
  5. 把try-catch語句放在迴圈外面,不要放在迴圈裡面,因為異常是很少發生的,放在外面避免每次都要執行 它們。
  6. 甚至聖經里都提到過這個 – 不要全局的。全局變數的生命周期貫穿整個腳本的生命周期,而本地變數的存在範圍隨著本地命名空間的銷毀而消失。當在函數或其它地方引用一個全局變數時,腳 本引擎需要搜索整個全局命名空間。
  7. fullName += 'John'; fullName += 'Holdings';執行速度快於fullName += 'John' + 'Holdings';
  8. 如果你需要把多個字元串連接起來,最好是把他們做成一個數組,然後調用join()方法實現這個操作。這種方式在生成HTML片段時尤其 有效。
  9. 對於簡單的任務,最好使用基本操作方式來實現,而不是使用函數調用實現。例如val1 < val2 ? val1 : val2;執行速度快於Math.min(val1, val2);,類似的,myArr.push(newEle);慢於myArr[myArr.length] = newEle;
  10. 將函數的引用作為參數傳遞到setTimeout()和setInterval()里優於將函數名作為字元串參數傳遞(硬編碼)。例如,setTimeout(“someFunc()”, 1000)執行效率慢於setTimeout(someFunc, 1000)
  11. 當進行遍歷操作時避免使用DOM操作。通過像getElementsByTagName()這 種方法得到的DOM元素隊列都是動態的;有可能在你還沒有對它遍歷完成時,它已經被改變。這有可能導致死迴圈。
  12. 當你對對象的成員(屬性或方法)進行反覆操作時,先存儲對它們的引用。例如var getTags = document.getElementsByTagName; getTags(‘div’);
  13. 在任何的代碼段里,在局部變數範圍外存放一個這個局部變數的引用。例如 function foo(arr) { var a = ‘something’;  

    //變數 ‘a’ 對於下麵的一段就是範圍外變數,這個變數的引用在很多情況下會有用處。 for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) { //do something } }

  14. for(var i=0; i < someArray.length; i++) {…}的執行效率慢於for (var i=0, loopLen=someArray.length; i<loopLen; i++) {…}。
  15. 在HTTP頭信息裡加入緩存控制過期和最大存活時間標記。
  16. 優化CSS。要使用<link>方式,而不要使用@import方式。
  17. 使用CSS技術來優化圖片資源
  18. 用GZip方式壓縮 .js 和 .css 文件。如果你使用的是Apache,在 .htaccess 里設置壓縮方式,你的HTML, XML 和 JSON 也同時會被壓縮。 AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json
  19. 使用JavaScript壓縮工具。除了使用YUI和JSMin外,你還可以試一試Google Closure。
  20. 優化每個頁面上的各種資源,把它們拆分到各個子域上,這麼它們就能夠並行下載。
  21. 將CSS樣式表放在頁面的最頂端,這樣能方便包括IE在內的瀏覽器進行解析。
  22. 儘量將DOM結構保持的越簡單越好。DOM的體積會影響相關的操作效率,像查找, 遍歷,DOM改動都有影響。document.getElementsByTagName(‘*’).length這 個值越小越好。
  23. 註意你使用的選擇器。例如,如果你想獲取一個ul下的直接子元素,使用jQuery(“ul > li”)而不要使用jQuery(“ul li”)
  24. 當切換元素的可見性時(display),請記住:element.css({display:none})的 速度快於element.hide() 和 element.addClass(‘myHiddenClass’)。 除非在一個迴圈里,我選擇element.addClass(‘myHiddenClass’), 這樣會使代碼更簡潔 – 不要使用 inline CSS 和 JavaScript。
  25. 當你使用完對DOM的引用變數後,要把它置為NULL。
  26. 使用AJAX時,GET的執行效率高於POST。所以要儘量使用 GET 方式。只是要註意一點,IE只允許你用GET傳送2K的數據。
  27. 小心使用腳本動畫。沒有硬體的支持,動畫會執行的很慢。儘量避免使用那些沒有實際價值的動畫效果。
  28. 如果你的background-image對於這個圖片的容器太小的話,請避免使 用background-repeat。如果你的背景圖片需要來回填充很多次才能充滿背景,那麼將background-repeat屬性設置成background-image 和repeat-x 或 repeat-y來 達到填充背景的效果的做法是不明智的,這種填充方式的效率特別的低。你應該嘗試使用一個足夠大的圖片來做background-image並 且使用background-repeat: no-repeat。
  29. 佈局時不要使用<table>。 <table>在瀏覽器完全把它畫出來之前需要反覆繪製好幾次。因為DOM中<table>是很少見的一種之後輸出的會影響之前輸出的顯示效果的元素。對於表格數據來說,你可 以使用table-layout:fixed; 這是一種更有效的現實演算法,根據CSS 2.1技術說明,這種寫法可以讓表格一行一行的輸出。
  30. 儘可能的使用原始JavaScript。限制JavaScript框架的使用。

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

-Advertisement-
Play Games
更多相關文章
  • vi 的使用 基本上 vi 共分為三種模式,分別是『一般模式』、 『編輯模式』與『指令列命令模式』三種! 這三種模式的作用是: 一般模式: 以 vi 處理一個檔案的時後,一進入該檔案就是一般模式了。在這個模式中, 你可以使用『上下左右』按鍵來移動游標,您可以使用『刪除字元』或『刪除整行』來處理檔.....
  • 原文鏈接地址:http://www.cnblogs.com/lyhabc/p/3886402.html 一步一步走來已經寫到了第十六篇了~ 這一篇主要介紹MYSQL的優化,優化MYSQL資料庫是DBA和開發人員的必備技能 MYSQL優化一方面是找出系統瓶頸,提高MYSQL資料庫整體性能;另一方面需要...
  • 設置標題欄背景1> 準備背景圖片:background_pix.png註:用背景圖片比用顏色好處,可以讓背景看起來有凹凸感.2> drawable文件夾下放xml文件bitmap_repeat.xml 3> 定義樣式文件style.xml4> 在manifest.xml中引用主題android:th...
  • 筆者近2天在 Android Studio上玩了一下百度地圖,碰到了常見的"230錯誤 APP Scode校驗失敗",下麵我來介紹一下具體的解決辦法. 1.在andriodstudio上部署百度地圖的規範.把下載下來的SDK解壓,切換至Project視圖.複製以下3個文件到libs文件下. 2......
  • 2013年谷歌推出android studio後,單獨支持android開發,這是基於Java語言集成開發環境IntelliJ搭建的IDE。特別在android studio1.0穩定版出來後,谷歌將其作為官方的開發工具,也推薦開發者使用android studio。15年時候谷歌宣佈停止對ec.....
  • 前端開發在最近幾年逐漸走紅,越來越多的開發者加入前端開發隊伍。但前端在大學中沒有課程體系,而且知識也在不斷更新著。大家對它的認識也各不相同。博主有過技術經理,項目經理,面試官,前端開發的經歷,參與過較多的前端開發項目,也結識了較多前端開發人員。基於這些因素我對前端有些較深刻的認識,和大家分享下。本文...
  • 一、數組和對象操作1. $.each——遍歷$.each(obj,function(param1,param2))遍曆數組時:param1為元素序號,param2為元素內容;遍歷對象時:param1為元素屬性名,param2為元素屬性值。例如:①遍曆數組:$(function () { ...
  • 使用縮寫可以幫助減少你CSS文件的大小,更加容易閱讀。css縮寫的主要規則如下: 顏色 16進位的色彩值,如果每兩位的值相同,可以縮寫一半,例如: #000000可以縮寫為#000;#336699可以縮寫為#369; 盒尺寸 通常有下麵四種書寫方法:property:value1; 表示所...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...