JavaScript高性能开发的十条建议
JavaScript高性能开发的十条建议
文/开发部 Dimmacro
编者按:javascript开发大部分程序员都做过,写出来的代码质量也千差万别,现在浏览器内嵌的解释器虽然效率已经很高了,但在客户完美体验的趋势下还是捉襟见肘,编写高性能javascript代码,无疑能带来更好的客户体验。本文的这些建议能给开发者带来一定的方向指导,值得一读。
1.使用延迟脚本,动态加载脚本,XHR脚本注入等方式加载js脚本,避免多脚本加载出现的页面长时间等待。
编辑解读:每读取一个页面,页面内容从上到下顺序加载,每遇到js文件,UI线程暂停读取页面,下载并进入js文件中进行解析,如果js文件过多过大,往往导致暂停时间过长,延长了页面加载时间。因此采用上述技术,只将需要的js加载进来,待页面完全显示后,再加载其他js,提高客户体验。
2.用临时变量存储需要多次访问的全局对象及变量,减少在作用域链中解析标识符的时间。
编辑解读:js解释器查找变量的时候,从局部作用域链到全局作用域链,如果频繁的读取一个全局变量,将其用临时变量指代,无疑会提高读取效率和代码运行效率。
3.在JS脚本里尽可能多的对元素操作完成后一次运用到元素,避免多次读取相同的元素位置,大小,偏移量等信息,用变量存储之以减少UI线程重排,重绘元素的压力。也可以采用隐藏元素再修改,文档片段修改后一次加入,和克隆副本并在操作副本后将副本取代原对象的方式,尽量减少由于JS操作带来的多次UI刷新。
编辑解读:每次js脚本对html元素进行了修改,UI线程都会对整个页面进行重绘以更新页面,减少重绘次数,提高重绘和重排效率。
4.循环遍历多采用从后往前式,较少与length比较大小再判断true或false的步骤会提高很大的性能。if-else判断时将概率大的处理放在前面。for循环利用达夫设备模式一次多执行几次操作。
编辑解读:一般人遍历数组或列表都是从前往后遍历,此种遍历方式每次都是比较当前index是否大于数组长度减1,如果采用从后往前遍历,利用js中小于0都是false的特性,减少判断。达夫设备模式是一种思路,让一次循环尽量执行多的操作,从而提高效率。其基本思想是:先遍历总次数与8的取模次,然后遍历总次数除于8取整的次数,每次处理八个相同的操作。如:
// dafu
var iters = Math.floor(arr.length/8);
var startIn = arr.length%8;
start = +new Date();
do{
switch(startIn){
case 0:process();
case 7:process();
case 6:process();
case 5:process();
case 4:process();
case 3:process();
case 2:process();
case 1:process();
}
startIn = 0;
}while(--iters);
5.递归嵌套利用Memoization,缓存之前的计算结果以较少重复计算。
编辑解读:类似多次求阶乘问题,用此方式缓存之前阶乘结果,能有效避免重复计算,提高效率。示例代码:
function memoize(fundamental,cache){
cache = cache || {};
var shell = function(arg){
if(!cache.hasOwnProperty(arg)){
cache[arg] = fundamental(arg);
}
return cache[arg];
};
return shell;
}
6.字符串连接多用+而不是+=,并且让连接字符串中最常的一个字符串放到等号后最左的位置,如 var newStr=longStr+other1+other2....如果是IE7及更早版本,多用数组项连接来连接字符串。
编辑解读:IE7及更早版本,对字符串连接操作采取的是全部拷贝到一块新的内存后连接在一起的方式,特别耗性能,不过随着软硬件的升级,IE7及更早版本已经要退出历史舞台了。新的IE8,9对字符串连接都做了不少优化。
7.明确正则表达式的起始匹配位置,尽量减少匹配分支,合适使用匹配量词,避免回溯混乱产生的性能问题。
编辑解读:正则匹配,每一个模糊或元字符都是一个分支,在每个分支匹配的最后,如果没有成功结果,会退回到上一个分支,因此,减少匹配分支能有效提高匹配的效率。
8.使用定时器setTimeout和setInterval将需要耗时很长的js脚本分段处理,可以避免出现页面假死现象。
编辑解读:JS解释执行与页面渲染共用一个UI线程,因此如果JS代码占用线程时间过长,必然会影响页面渲染从而造成假死的现象。解决的方式就是利用定时器函数,分开整段js代码执行,分段利用CPU,让页面渲染能有更多的机会抢到执行时间。
9.多使用浏览器支持的原生方法,而不是自己实现的方法。
编辑解读:原生的方法,现代浏览器都做了一些优化。如IE8以后对查询实现了querySelector和querySelectorAll方法,比jquery更高效,使用更方便。
10.利用脚本预处理技术,javascript压缩技术,多个脚本合并技术等,尽量减少浏览器加载时的HTTP请求次数和跳过空白和注释的次数。
编辑解读:页面加载的时候对每一个js文件都会执行一次http请求,以便将js文件的内容读入并解析,采用上述技术,可以减少http请求的次数,提高解释器解析的效率。
转载于:https://www.cnblogs.com/dimmacro/p/4460844.html
JavaScript高性能开发的十条建议相关推荐
- 企业家Scott Gerber:小公司应用开发的十条建议
导读:本文原作者是Scott Gerber,他是新兴公司Sizzle It!(该公司主要为公关人员.市场营销人员制作视频宣传片).青年创业者理事会(Young Entrepreneur Council ...
- 程序员开发利器:源代码管理的十条建议
英文原版 http://java.dzone.com/articles/10-commandments-good-source 本文转自中文翻译改写版 http://tech.it168.com/a ...
- .NET/C# 反射的的性能数据,以及高性能开发建议(反射获取 Attribute 和反射调用方法)...
大家都说反射耗性能,但是到底有多耗性能,哪些反射方法更耗性能:这些问题却没有统一的描述. 本文将用数据说明反射各个方法和替代方法的性能差异,并提供一些反射代码的编写建议.为了解决反射的性能问题,你可以 ...
- 移动Web开发的十条军规
对于开发者或者设计者来说,一个好处是:移动开发就技术而言,不需要再花太多的额外时间精力去学习,所有需要去做的是就设计移动网页来说,需要有全新的视觉去考虑问题.在本文中,将简单介绍在移动Web开发中需要 ...
- 提高网页可访问性的十条建议
提高网页可访问性的十条建议 2 这篇文章提供了十条有关于提高网页可访问性的指导原则,这些原则将保证提高你网站的可访问性. 引用万维网(W3C)的创始人@Tim Berners-Lee一句话来说网络的力 ...
- 10大高性能开发宝石,我要消灭一半程序员!
程序员经常要面临的一个问题就是:如何提高程序性能? 这篇文章,我们循序渐进,从内存.磁盘I/O.网络I/O.CPU.缓存.架构.算法等多层次递进,串联起高性能开发十大必须掌握的核心技术. - I/O优 ...
- Java Web 高性能开发,前端的高性能
Java Web 高性能开发,第 2 部分: 前端的高性能 Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是 ...
- 高性能开发,别点,发际线要紧!
作者:轩辕之风O 来源:编程技术宇宙 -前言- 程序员经常要面临的一个问题就是:如何提高程序性能? 这篇文章,我们循序渐进,从内存.磁盘I/O.网络I/O.CPU.缓存.架构.算法等多层次递进,串联起 ...
- 学会这10大高性能开发技术,轻松躲过裁员名单!
来源 | 编程技术宇宙 责编 | Carol 封图 | CSDN 下载自视觉中国 程序员经常要面临的一个问题就是:如何提高程序性能? 这篇文章,我们循序渐进,从内存.磁盘I/O.网络I/O.CPU.缓 ...
- ES6 javascript 实用开发技巧
Javascript - ES6 javascript 实用开发技巧 本文只罗列出在 ES6 开发过程中相对实用的内容,并非一个高大全的文档,如果希望查阅详细的内容,可购买阮一峰老师所出版的 ES6 ...
最新文章
- 如何提取fasta文件的部分信息
- NC:北京大学吴华君-基因组3D结构调控胚胎干细胞分化
- 点击 UITableView 隐藏键盘
- linux 基础知识点杂项记
- 29. Leetcode 19. 删除链表的倒数第 N 个结点 (链表-双指针)
- 【jquery】ajax 请求成功后新开窗口被拦截解决方法
- 写了一个操作XML文件的类
- git 撤销全部的commit_Git 撤销 Commit
- 总结:一款Loading动画的实现思路
- 创建calico网络报错client response is invalid json
- poj3249Test for Job(记忆化搜索)
- 5个音效素材网站,赶紧收藏
- 老徐 MYSQL 宝典
- 关于阿里云的一键部署工具【飞流】的使用(详细)
- left join一对多只保留一条结果的解决方法
- 这有一套完整的微信公众号代运营方案
- 智能网联汽车——智能化
- 通过js实现图片左右点击图片左右切换效果
- 2018年9月13日训练日记
- ECharts 之引用ECharts
热门文章
- Swift - 炫酷放射弹出按钮菜单(改造自AwesomeMenu)
- XML案例(简单的考生成绩管理系统)
- Qt编程之QtScript
- Java编程思想(第4版)(评注版)
- Go语言基础之10--面向对象编程2之方法
- 生产环境下lnmp的权限说明
- Android 视频展示控件之 SurfaceView、GLSurfaceView、SurfaceTexture、TextureView 对比总结...
- VisualBox配置共享文件夹功能
- Vue学习笔记进阶篇——多元素及多组件过渡
- RAC性能分析 - gc buffer busy acquire 等待事件