你不知道的高性能JAVASCRIPT


Posted in Javascript onJanuary 18, 2016

本文会分享一些高效的JavaScript的最佳实践,提高大家对JS的底层和实现原理的理解。

数据存储

计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能,在JavaScript中,数据存储的位置会对代码性能产生重大影响。 ? 能使用{}创建对象就不要使用new Object,能使用[]创建数组就不要使用new Array。JS中字面量的访问速度要高于对象。 ? 变量在作用域链中的位置越深,访问所需实践越长。对于这种变量,可以通过缓存使用局部变量保存起来,减少对作用域链访问次数 ? 使用点表示法(object.name)和操作符(object[name])操作并没有太多区别,只有Safari会有区别,点始终更快

循环

在JS中常见的循环有下面几种:

for(var i = 0; i < 10; i++) { // do something} 
for(var prop in object) { // for loop object}  
[1,2].forEach(function(value, index, array) { // 基于函数的循环})

毋庸质疑,第一种方式是原生的,性能消耗最低的,速度也最快。第二种方式for-in每次迭代都回产生更多的开销(局部变量),它的速度只有第一种的1/7 第三种方式明显提供了更便利的循环方式,但是他的速度只有普通循环的1/8。所以可以根据自己项目情况,选择合适的循环方式。

事件委托

试想一下页面上每一个A标签添加一个事件,我们会不会给每一个标签都添加一个onClick呢。 当页面中存在大量元素都需要绑定同一个事件处理的时候,这种情况可能会影响性能。每绑定一个事件都加重了页面或者是运行期间的负担。对于一个富前端的应用,交互重的页面上,过多的绑定会占用过多内存。 一个简单优雅的方式就是事件委托。它是基于事件的工作流:逐层捕获,到达目标,逐层冒泡。既然事件存在冒泡机制,那么我们可以通过给外层绑定事件,来处理所有的子元素出发的事件。

document.getElementById('content').onclick = function(e) { 
  e = e || window.event;  
  var target = e.target || e.srcElement;  //如果不是 A标签,我就退出  
  if(target.nodeNmae !=== 'A') { return }  //打印A的链接地址  
  console.log(target.href) }

重绘与重排

浏览器下载完HTMl,CSS,JS后会生成两棵树:DOM树和渲染树。 当Dom的几何属性发生变化时,比如Dom的宽高,或者颜色,position,浏览器需要重新计算元素的几何属性,并且重新构建渲染树,这个过程称之为重绘重排。

bodystyle = document.body.style; 
bodystyle.color = red; 
bodystyle.height = 1000px; 
bodystyke.width = 100%;

上述方式修改三个属性,浏览器会进行三次重排重绘,在某些情况下,减少这种重排可以提高浏览器渲染性能。 推荐方式如下,只进行一次操作,完成三个步骤:

bodystyle = document.body.style; 
bodystyle.cssText 'color:red;height:1000px;width:100%';

JavaScript加载

IE8,Firefox3.5,Chrome2都允许必行下载JavaScript文件。所以<script>不会阻塞其他标签下载。 遗憾的是,JS下载过程依然会阻塞其他资源的下载,比如图片。尽管最新的浏览器通过允许并行下载提高了性能,但是脚本阻塞任然是一个问题。 因此,推荐将所有的<script>标签放在<body>标签的底部,以尽量减少对整个页面渲染的影响,避免用户看到一片空白

JS文件高性能部署

既然大家已经知道多个<script>标签会影响页面渲染速度,那么就不难理解“减少页面渲染所需的HTTP”是网站提速的一条经典法则。 所以,在产品环境下合并所有的JS文件会减少请求数,从而加快页面渲染速度。 除了合并JS文件,我们还可以压缩JS文件。压缩是指将文件中与运行无关的部分进行剥离。剥离内容包括空白字符,和注释。改过程通常可以将文件大小减半。 还有一些压缩工具会将局部变量的长度减小,比如:

var myName = "foo" + "bar"; 
//压缩后变成 
var a = "foobar";

缓存JS文件

缓存HTTP组件能极大提高网站回访的用户体验。Web服务器通过“Expires HTTP响应头”来告诉客户端一个资源应该缓存多长时间。当然,缓存也有自己的缺陷: 当应用升级时,你需要确保用户下载到最新的静态内容。这个问题可以通过改变静态资源的文件名来解决。 你可能在产品环境看到浏览器引用jsapplication-20151123201212.js,这种就是以时间戳的方式保存新的JS文件,从而解决缓存不更新问题。

总结

当然,高效的JS不仅仅只有这些可以改进的地方,如果能够减少一些性能的损耗,我们就能更高效的使用JavaScript进行开发了。

你不知道的高性能JAVASCRIPT,现在都知道了吧!

Javascript 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 #Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 #Javascript
jquery validate表单验证的基本用法入门
Jan 18 #Javascript
jQuery添加删除DOM元素方法详解
Jan 18 #Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 #Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 #Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 #Javascript
You might like
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
super关键字的用法
2012/04/10 面试题
男方父母证婚词
2014/01/12 职场文书
电焊工岗位职责
2014/03/06 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
Python字符串常规操作小结
2022/04/03 Python