你不知道的高性能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 window.setTimeout() 的详细用法
Nov 04 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
浅析PHP Socket技术
2013/08/02 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python实现控制台输入密码的方法
2015/05/29 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
python django model联合主键的例子
2019/08/06 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python Tornado框架的使用示例
2020/10/19 Python
住房公积金接收函
2014/01/09 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
护士岗位竞聘书
2015/09/15 职场文书