• 尽量避免使用DOM。当需要反复使用DOM时,先把对DOM的引用存到JavaScript本地变量里再使用。使用设置innerHTML的方法来替换document.createElement/appendChild()方 法。
    • eval()有问题,new Fuction()构造函数也是,尽量避免使用它们。
    • 拒绝使用with语句。 它会导致当你引用这个变量时去额外的搜索这样的一个命名空间,with里的代码在编译时期是完全未知的。
    • 使用for()循环替代for…in循 环。因为for…in循环在开始循环之前需要Script引擎创建一个含有所有可循环属性的 List,需要多检查一次。
    • try-catch语句放在循环外面,不要放在循环里面,因为异常是很少发生的,放在外面避免每次都要执行 它们。
    • 甚至圣经里都提到过这个 – 不要全局的。全局变量的生命周期贯穿整个脚本的生命周期,而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时,脚 本引擎需要搜索整个全局命名空间。
    • fullName += 'John'; fullName += 'Holdings';执行速度快于fullName += 'John' + 'Holdings';
    • 如果你需要把多个字符串连接起来,最好是把他们做成一个数组,然后调用join()方法实现这个操作。这种方式在生成HTML片段时尤其 有效。
    • 对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。例如val1 < val2 ? val1 : val2;执行速度快于Math.min(val1, val2);,类似的,myArr.push(newEle);慢于myArr[myArr.length] = newEle;
    • 将函数的引用作为参数传递到setTimeout()和setInterval()里优于将函数名作为字符串参数传递(硬编码)。例如,setTimeout(“someFunc()”, 1000)执行效率慢于setTimeout(someFunc, 1000)
    • 当进行遍历操作时避免使用DOM操作。通过像getElementsByTagName()这 种方法得到的DOM元素队列都是动态的;有可能在你还没有对它遍历完成时,它已经被改变。这有可能导致死循环。
    • 当你对对象的成员(属性或方法)进行反复操作时,先存储对它们的引用。例如var getTags = document.getElementsByTagName; getTags(‘div’);
    • 在任何的代码段里,在局部变量范围外存放一个这个局部变量的引用。例如
      function foo(arr) {
      var a = ‘something’;

      //变量 ‘a’ 对于下面的一段就是范围外变量,这个变量的引用在很多情况下会有用处。
      for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) {
      //do something
      }
      }

    • for(var i=0; i < someArray.length; i++) {…}的执行效率慢于for (var i=0, loopLen=someArray.length; i<loopLen; i++) {…}。
    • 在HTTP头信息里加入缓存控制过期和最大存活时间标记。
    • 优化CSS。要使用<link>方式,而不要使用@import方式。请参考这个优秀的文档http://www.slideshare.net/stubbornella/object-oriented-css
    • 使用CSS技术来优化图片资源
    • 用GZip方式压缩 .js 和 .css 文件。如果你使用的是Apache,在 .htaccess 里设置压缩方式,你的HTML, XML 和 JSON 也同时会被压缩。
      AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json
    • 使用JavaScript压缩工具。除了使用YUI和JSMin外,你还可以试一试Google Closurehttp://closure-compiler.appspot.com/home (感谢: James Westgate, 一位读者)
    • 优化每个页面上的各种资源,把它们拆分到各个子域上,这么它们就能够并行下载。请参考http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
    • 将CSS样式表放在页面的最顶端,这样能方便包括IE在内的浏览器进行解析。
    • 尽量将DOM结构保持的越简单越好。DOM的体积会影响相关的操作效率,像查找, 遍历,DOM改动都有影响。document.getElementsByTagName(‘*’).length这 个值越小越好。
    • 注意你使用的选择器。例如,如果你想获取一个ul下的直接子元素,使用jQuery(“ul > li”)而不要使用jQuery(“ul li”)
    • 当切换元素的可见性时(display),请记住:element.css({display:none})的 速度快于element.hide() 和 element.addClass(‘myHiddenClass’)。 除非在一个循环里,我选择element.addClass(‘myHiddenClass’), 这样会使代码更简洁 – 不要使用 inline CSS 和 JavaScript。
    • 当你使用完对DOM的引用变量后,要把它置为NULL。
    • 使用AJAX时,GET的执行效率高于POST。所以要尽量使用 GET 方式。只是要注意一点,IE只允许你用GET传送2K的数据。
    • 小心使用脚本动画。没有硬件的支持,动画会执行的很慢。尽量避免使用那些没有实际价值的动画效果。
    • 如果你的background-image对于这个图片的容器太小的话,请避免使 用background-repeat。如果你的背景图片需要来回填充很多次才能充满背景,那么将background-repeat属性设置成background-image 和repeat-x 或 repeat-y来 达到填充背景的效果的做法是不明智的,这种填充方式的效率特别的低。你应该尝试使用一个足够大的图片来做background-image并 且使用background-repeat: no-repeat。
    • 布局时不要使用<table>。 <table>在浏览器完全把它画出来之前需要反复绘制好几次。因为DOM中<table>是很少见的一种之后输出的会影响之前输出的显示效果的元素。对于表格数据来说,你可 以使用table-layout:fixed; 这是一种更有效的现实算法,根据CSS 2.1技术说明,这种写法可以让表格一行一行的输出。
    • 尽可能的使用原始JavaScript。限制JavaScript框架的使用。

30个提高Web程序执行效率的好经验的更多相关文章

  1. (转)对《30个提高Web程序执行效率的好经验》的理解

    阅读了博客园发布的IT文章<30个提高Web程序执行效率的好经验>,这30条准则对我们web开发是非常有用的,不过大家可能对其中的一些准则是知其然而不知其所以然. 下面是我对这些准则的理解 ...

  2. 解读30个提高Web程序执行效率的好经验

    其实微博是个好东西,关注一些技术博主之后,你不用再逛好多论坛了,因为一些很好的文章微博会告诉你,最近看到酷勤网推荐的一篇文章<30个提高Web程序执行效率的好经验>,文章写得不错,提到一些 ...

  3. 2.对《30个提高Web程序执行效率的好经验》的理解

    摘自:http://www.cnblogs.com/powertoolsteam/archive/2010/07/12/1775933.html 文章中执行代码的消耗时间是怎么计算的,有知道的同学可以 ...

  4. 30条技巧提高Web程序执行效率

    尽量避免使用DOM.当需要反复使用DOM时,先把对DOM的引用存到JavaScript本地变量里再使用.使用设置innerHTML的方法来替换document.createElement/append ...

  5. 关于提高python程序执行效率的思路和想法

    相比编译型语言(C系列)python胜在简介的语法和优雅的动态编程体验,但是在执行效率上,python有解释性语言先天的劣势——执行效率较低,为了让编写出的程序获得更快的执行效率,开启此文章. pyt ...

  6. 如何提高SQL的执行效率

    一.因情制宜,建立“适当”的索引 建立“适当”的索引是实现查询优化的首要前提. 索引(index)是除表之外另一重要的.用户定义的存储在物理介质上的数据结构.当根据索引码的值搜索数据时,索引提供了对数 ...

  7. 如何在数据访问层上提高js的执行效率

    本文讲到的是如何从数据访问层面上提高JS 代码的执行效率.总的来讲有以下几条原则: 函数中读写局部变量总是最快的,而全局变量的读取则是最慢的: 尽可能地少用with 语句,因为它会增加with 语句以 ...

  8. 为什么 asnyc await 可以提高web程序的吞吐量

    (转网上一段话) Web程序天生就是多线程的,且web线程都是跑的线程池线程(使用线程池线程是为了避免不断创建.销毁线程所造成的资源成本浪费),而线程池线程可使用线程数量是一定的,尽管可以设置,但它还 ...

  9. <每日一题>题目19:简单的程序执行效率面试题

    # 将下面的函数按照执行效率高低排序.它们都接受由0至1之间的数字构成的列表作为输入.这个列表可以很长.一个输入列表的示例如下:[random.random() for i in range(1000 ...

随机推荐

  1. .DS_Store 文件是什么?Mac下面如何禁止.DS_Store生成

    .DS_Store是Mac OS保存文件夹的自定义属性的隐藏文件,如文件的图标位置或背景色,相当于Windows的desktop.ini. 1,禁止.DS_store生成:打开 “终端” ,复制黏贴下 ...

  2. 「USACO15FEB」「LuoguP3121」审查(黄金)Censoring (Gold)(AC自动机

    题目描述 Farmer John has purchased a subscription to Good Hooveskeeping magazine for his cows, so they h ...

  3. uC/OS-II源码分析(四)

    内核结构 1,  临界区,OS_ENTER_CRITICAL和OS_EXIT_CRITICAL 为了处理临界区代码,必须关中断,等处理完毕后,再开中断.关中断可以避免其他任务或中断进入临界区代码.uC ...

  4. XAML 编码规范 (思考)

    1.尽量和Blend统一 2.兄弟元素之间需要空行 4.父子元素之间不需要空格 3.每行尽量单个属性 5.Grid的Row和Column定义不需要空行 6.Style里的Setter中不需要单行一个属 ...

  5. C# 线程的暂停和恢复的 实现

    我们可以通过ManualResetEvent类来实现. 声明, 初始化时不执行 private static ManualResetEvent _eventWorkList = new ManualR ...

  6. webSocket 简单介绍

    WebSocket :WebSocket协议支持(在受控环境中运行不受信任的代码的)客户端与(选择加入该代码的通信的)远程主机之间进行全双工通信.                       简单的说 ...

  7. 梯度算子(普通的+Robert + sobel + Laplace)

    1.水平垂直差分法: 2.Robert 算子梯度 3.sobel算子 4.拉普拉斯算子

  8. 远程抓取win7 的用户登录时间

    protected void Page_Load(object sender, EventArgs e) { InvokeSystemPS("query user /server:192.1 ...

  9. 使用CTE生成辅助表(数字或时间)等

    数字辅助表: , ;WITH Digital_Rangs(Digital) AS ( SELECT @start_digital UNION ALL FROM [Digital_Rangs] WHER ...

  10. ue4 3dui材质参数修改