当前位置： 移动技术网 > IT编程>开发语言>其他编程 > 30个提高Web程序执行效率的好经验分享

30个提高Web程序执行效率的好经验分享

2017年12月08日  | 移动技术网IT编程  | 我要评论
  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 (感谢: james westgate, 一位读者)
  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框架的使用。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网