关闭

web程序中全优化(二)之 提高你的JavaScript效率Tips

标签: javascript优化
458人阅读 评论(3) 收藏 举报
分类:

            来国电快两个月了,开始了新的需求侧项目,不过不幸的是新的项目依然很忙……  由于空不出时间,这个月写的学习笔记也不多,估计再有两周,就忙完最苦X的时期了,不过每天晚上依然是尽量保留一段时间夜读,也算是没辜负这漫漫长夜…

     好了,闲话可有不宜多,下面我们来具体介绍,在项目实践过程中积累的关于JavaScript的一些好的用法,希望对大家有所帮助~

     1、 如果js文件没有特殊要求指明需要在页面渲染之前载入及编译完成的,那么选择将js文件放到</body>标签前(既所有的页面所呈现内容的后面),css文件还是放到<head>区域(谁也不愿意看一个布局杂乱无章的页面)。这样做就能先让用户看到有布局的页面而不是空白页了,那么也会有人指出:那数据得通过js请求加载进来啊,怎么办呢?可以对数据的加载做排序,急需呈现的接口放前面执行,不是那么需要的可以延后执行,同时做个简单的提示。  

     2、如果这些js文件有指明需要先执行了,才能更好的展示页面内容,那么就在第一个js或者页面上先放个载入小动画,可以一些有趣的或者萌萌的动画场景。这样也是能较好的避免用户等待的无聊,说不定人家还对这个载入动画更感兴趣呢,这样可提升项目的用户体验感。

     推荐:将<script>标签尽可能的放到</body>标签前面加载,以提升用户体验。

     3、针对js合并:在很多团队开发中,我们可能会将不同功能的代码块分别放置在不同的js文件中,以便于开发过程中众人合作写代码会更加方便,毕竟只需要找对应文件夹或文件而不是在一个很长的文件中找一个方法。这确实是会提高团队开发效率及新人加入后的更容易进行二次开发及维护。那么将这个问题放到页面性能里呢?

     由于下载1个100KB的文件比下载4个25KB的文件要快,而开发过程中区分开各个文件又有很大的好处,那么合并这个问题也就放在开发完后再处理就好了,之后我们再采用文件压缩工具进行js文件压缩。

     4、更快速的数据访问:对于浏览器来说,一个标识符所处的位置越深,去读写他的速度也就越慢。这个应该不难理解,简单比喻就是:杂货店离你家越远,你去打酱油所花的时间就越长…

 如果我们需要在当前函数内多次用到一个变量值,那么我们可以用一个局部变量先将其存储起来,案例如下:

 //修改前
  function showLi(){
      var i = 0;
      for(i=0;i<document.getElementsByTagName("li").length;i++){    //一次访问document
          console.log(i,document.getElementsByTagName("li")[i]);  //三次访问document
      };
  };
  //修改后
  function showLi(){
      var li_s = document.getElementsByTagName("li");  //一次访问document
      var i = 0;
      for(i=0;i<li_s.length;i++){
          console.log(i,li_s[i]);  //三次访问局部变量li_s
      };
  };

     5、减少dom的重绘重排版:元素布局的改变或内容的增删改或者浏览器窗口尺寸改变都将会导致重排,而字体颜色或者背景色的修改则将导致重绘。

     对于类似以下代码的操作,据说现代浏览器大多进行了优化(将其优化成1次重排版):

 //修改前
  var el = document.getElementById("div");
  el.style.borderLeft = "1px"; //1次重排版
  el.style.borderRight = "2px"; //又1次重排版
  el.style.padding = "5px"; //还有1次重排版
  //修改后
  var el = document.getElementById("div");
  el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版

         小结:其实还有些优化手段都是相似的,只是表现在了不同的方面,比如有一种循环的优化:和文中第4点比较相似,都是先定义好循环次数变量,避免再计算。敬请期待后续~


    


     

0
0
查看评论

优化TCP,提高HTTP效率

HTTP要传送报文时,会以流的形式将报文数据内容通过一条打开的TCP链接按序传输,TCP收到数据流之后,会将数据流砍成段的小数据块,并将段封装在IP数据包里传输
  • ycxmartin111111
  • ycxmartin111111
  • 2014-06-04 15:50
  • 3467

VC++ 提高C++程序运行效率10个简单方法(其他语言程序参考)

程序性能的优化也是一门复杂的学问,需要很多的知识,然而并不是每个程序员都具备这样的知识,而且论述如何优化程序提高程序运行效率的书籍也很少。但是这并不等于我们可以忽略程序的运行效率
  • Antares_SANTALEN
  • Antares_SANTALEN
  • 2016-09-14 10:23
  • 1295

java反射效率及优化

看了些博客,自己试一下并总结,如下:import java.lang.reflect.Method; import java.util.Date;class DemoClass{ public String firstName; private String endName;...
  • sjtu_chenchen
  • sjtu_chenchen
  • 2016-05-04 15:25
  • 499

10倍提升应用性能的10个建议

原文链接: https://www.nginx.com/blog/10-tips-for-10x-application-performance/ 提升Web应用的性能从未像今天这样刻不容缓。在线经济活动的比例日益提高,就连发展中国家和地区的经济活动都已经有5%以上在线进行了(相...
  • chuqtu
  • chuqtu
  • 2016-07-29 15:51
  • 583

如何提高单片机程序执行效率?

首先什么是执行效率。我们平常所说的执行效率就是使用相同的算法在相同输入条件下完成相同计算所产生的系统开销,目前来说一般会更多关注执行时间方面的开销。所有语言编写的代码最终要运行,都要转化成机器码。在更短的时间内完成相同的事那么效率就高。 关于如何提高C语言程序的执行效率,以我多年的编程经验在这里我来...
  • u010980705
  • u010980705
  • 2016-09-29 15:48
  • 1069

优化递归的效率

函数递归调用是很常见的做法,但是它往往是低效的,本文探讨优化递归效率的思路。 1.尾递归转换成迭代 尾递归是一种简单的递归,它可以用迭代来代替 比如 求阶乘函数的递归表达 int f(int n) {     if(n0)re...
  • GarfieldEr007
  • GarfieldEr007
  • 2015-12-24 12:50
  • 2035

Sql语句Insert提高效率

在执行SQL语句的时候,插入多行insert语句,效率写法 insert
  • ly210501076
  • ly210501076
  • 2014-05-16 14:41
  • 1417

Java Web项目如何提高访问效率

通常大型应用项目的效率瓶颈一般都是在数据库总结几点数据库效率优化方面应该注意的问题1、 避免使用Hibernate框架   用Hibernate一次性进行5万条左右数据的插入,若ID使用sequence方式生成,Hibernate将分5万次从数据库取得5万个 sequence,构...
  • a236209186
  • a236209186
  • 2016-05-09 09:09
  • 607

优化php效率,提高php性能的一些方法

优化php效率,提高php性能的一些方法
  • qq_29955091
  • qq_29955091
  • 2016-07-21 16:35
  • 2771

关于 Java Web 项目性能提升的一些思路

关于 Java Web 项目性能提升的一些看法,欢迎大侠们进来提供更多建议,也欢迎拍砖。
  • defonds
  • defonds
  • 2013-12-13 17:01
  • 6200
    个人资料
    • 访问:222656次
    • 积分:5854
    • 等级:
    • 排名:第5212名
    • 原创:145篇
    • 转载:4篇
    • 译文:0篇
    • 评论:1438条
    最新评论