前端程序员必须知道的高性能Javascript知识


Posted in Javascript onAugust 24, 2016

想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影。 本文会分享一些高效的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 相关文章推荐
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
js实现简单页面全屏
Sep 17 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 #Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 #Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 #Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 #Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 #Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 #Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
python列表与元组详解实例
2013/11/01 Python
python回调函数中使用多线程的方法
2017/12/25 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python实现代码块儿折叠
2020/04/15 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
Python Selenium库的基本使用教程
2021/01/04 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
几个SQL的面试题
2014/03/08 面试题
奥巴马上海演讲稿
2014/09/10 职场文书
英语通知范文
2015/04/22 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
golang使用map实现去除重复数组
2022/04/14 Golang