Web 前端性能优化——把 JavaScript 中的对象存储在变量中
2014-04-24 09:48
537 查看
1、为对象属性建立变量快捷方式
将对象属性赋值给变量,在使用对象属性的时候,用变量代替,有很多好处:
1)减少对象的搜索链
2)变量名比属性可读性更好
3)压缩代码
(参考:http://www.gbtags.com/gb/share/1482.htm)
2、尽可能存储 NodeList 和选择器引擎 Collection
通常我们会写出这样的代码:
我们最好是使用变量来存储 DOM 元素:
(参考:http://www.gbtags.com/gb/share/1478.htm)
3、存储正则表达式
对于正则表达式,通常会有这样的代码
这种写法的问题是:每次判定都会创建一个正则表达式对象,而需要它们完成的工作确是一样的。
这样的重复工作可以通过将正则表达式存储在一个变量中来避免
(参考:http://www.gbtags.com/gb/share/1454.htm)
将对象属性赋值给变量,在使用对象属性的时候,用变量代替,有很多好处:
1)减少对象的搜索链
2)变量名比属性可读性更好
3)压缩代码
//以前的写法 document.body.addEventListener("click", function(){ //时间处理程序 }); document.body.className = "user-" + ajaxResult.user[0].user.id; document.documentElement.setAttribute("data-user-id", ajaxResult.user[0].user.id); //现在的写法 var doc = document, body = doc.body, userid = ajaxResult.user[0].user.id; body.addEventListener("click", function(){ //时间处理程序 }); body.className = "user-" + userid; doc.documentElement.setAttribute("data-user-id", userid);
(参考:http://www.gbtags.com/gb/share/1482.htm)
2、尽可能存储 NodeList 和选择器引擎 Collection
通常我们会写出这样的代码:
$(".nav a").css("display", "none"); $(".nav a").css("display", "block");尽管现在的选择器引擎和浏览器已经在性能上快了不少,但是重复工作始终是会影响性能的。
我们最好是使用变量来存储 DOM 元素:
var $navA = $(".nav a"); $navA.css("display", "none"); $navA.css("display", "block");
(参考:http://www.gbtags.com/gb/share/1478.htm)
3、存储正则表达式
对于正则表达式,通常会有这样的代码
//判断 someValue 是否只包含数字 if(someValue.match(/(\d+)/g)){ }
这种写法的问题是:每次判定都会创建一个正则表达式对象,而需要它们完成的工作确是一样的。
这样的重复工作可以通过将正则表达式存储在一个变量中来避免
var digitsRegex = /(\d+)/g; myInput.addEventListener("change", function(){ if(myInput.value.match(digitRegex)){ } }):
(参考:http://www.gbtags.com/gb/share/1454.htm)
相关文章推荐
- Web前端性能优化——编写高效的JavaScript
- web前端性能优化-高性能javascript学习
- web前端性能优化-高性能javascript学习
- Web前端性能优化——编写高效的JavaScript
- Web 前端性能优化——使用索引对象
- Web前端性能优化
- Web前端性能优化策略
- speeding up your web site 前端性能优化规则(二)
- 网站开发WEB前端高性能优化之JavaScript优化细节
- web前端性能优化,提升静态文件的加载速度
- Web前端性能优化之浏览器访问优化
- web前端性能优化总结
- WEB前端性能优化:HTML,CSS,JS和服务器端优化
- WEB前端性能优化小结
- web性能优化之javascript性能调优
- web前端性能优化
- web前端性能优化
- web前端性能优化的问题
- 前端优化 9 个技巧,提高 Web 性能
- Web前端性能优化——如何有效提升静态文件的加载速度