1 尽量少使用全局查找,比如全局变量,如果要多次使用,可以将全局变量存为局部变量再使用
eg:function(){
var body=document.body;
alert(body):
body.innerHTML="hello world"
}
2.优化循环 (1)减值循环 i--(2)do-while比for循环快 (3)简化循环条件 比如循环条件少计算
 
3 Dom层-最小化现场操作,
就是比如新增很多dom 可以先for循环创建个整体的dom碎片 然后再一次性添加进去 会比一个个dom添加要快
var list=document.getElementById("mylist");
var frament=document.createDocumentFragment();
for (var i=0;i<10;i++){
var item=document.creatElement('li')
frament.appendChild(item)
}
list.appendChild(frament)
4 Dom层 --少使用HTMLCollection
比如循环中获取dom的length
var images=document.getElementsByTagName('img')
for(i=0,len=images.length;i<len;i++){
 
}
这样就不用总访问images的HTMLCollention
会访问HTMLCollention 的一些情况
(1)进行了getElementsByTagName()调用
(2)获取了元素的childNodes属性
(3)获取了元素的 attributes属性
(4)访问了特殊的集合 如documet.forms ,document.images

前端js性能优化的要点的更多相关文章

  1. js性能优化文章集锦

    总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...

  2. 现代WEB前端的性能优化

    现代WEB前端的性能优化 前言:这只是一份学习笔记. 什么是WEB前端 潜在的优化点: DNS是否可以通过缓存减少DNS查询时间? 网络请求的过程走最近的网络环境? 相同的静态资源是否可以缓存? 能否 ...

  3. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  4. js 性能优化利器:prepack

    1. js 性能优化 js 本身是没有像 python 一样的预编译功能,更没有像 java 一样的编译功能,所以,这里所说的 js 代码预编译 只是通过工具实现的类似功能而已. 这就要提到 prep ...

  5. js 性能优化 篇一

    JS性能优化 摘自:http://www.china125.com/design/js/3631.htm  首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...

  6. web前端页面性能优化

    影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...

  7. web前端之性能优化

    作为一个前端工作人员,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益 ...

  8. web前端页面性能优化小结

    影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...

  9. (O)WEB:前端网站性能优化(原创)

    *从理论.实战编码.实战调试3个方面学习前端性能优化(包括页面加载时间和页面流畅度): -------------------------------理论----------------------- ...

随机推荐

  1. 视频编解码的理论和实践2:Ffmpeg视频编解码

    近几年,视频编解码技术在理论及应用方面都取得了重大的进展,越来越多的人想要了解编解码技术.因此,网易云信研发工程师为大家进行了归纳梳理,从理论及实践两个方面简单介绍视频编解码技术. 相关阅读推荐 &l ...

  2. JSON对象和JavaScript对象直接量的区别--不同之处

    JSON对象和JS对象直接量 在工作当中,我们总是可以听到人说将数据转换为JSON对象,或者说把JSON对象转换为字符串之类的话,下面是关于JSON的具体说明. JSON对象并不是JavaScript ...

  3. Jenkins+svn+ftp自动化发布asp.net项目

    今天将自己所掌握的(Jenkins+svn+ftp自动化发布asp.net项目)知识分享给大家,希望能帮组到大家: (1)先下载Jenkins并安装: (2)安装.Net所需要的插件: (3)配置插件 ...

  4. [WPF自定义控件库]好用的VisualTreeExtensions

    1. 前言 A long time ago in a galaxy far, far away....微软在Silverlight Toolkit里提供了一个好用的VisualTreeExtensio ...

  5. Java SpringBoot 如何使用 IdentityServer4 作为验证学习笔记

    这边记录下如何使用IdentityServer4 作为 Java SpringBoot 的 认证服务器和令牌颁发服务器.本人也是新手,所以理解不足的地方请多多指教.另外由于真的很久没有写中文了,用词不 ...

  6. signed char类型取值范围计算

    在C语言程序中,给定一个类型,如何计算这个类型变量的取值范围呢?比如有一个字符型变量定义如下: signed char c: 这个字符变量c的取值范围是[-128,127],是计算出来的呢? 假设字符 ...

  7. KVM :vnc 远程控制kvm创建虚拟机

    一.vnc远程控制服务器 前期准备: 1.编辑/etc/hosts vi /etc/hosts 10.1.16.32 kvm 2.关闭防火墙 service iptables stop 3.关闭sel ...

  8. 浅谈对static的理解

    相信很多朋友在面试过程中都遇到过关于static的相关题目,接下来我们来分析一下static. static(静态的),用来修饰成员变量,成员方法,它随着类的加载而加载,使用static修饰的数据可以 ...

  9. R语言矩阵

    矩阵是元素布置成二维矩形布局的R对象. 它们包含相同原子类型的元素. R创建矩阵的语法: matrix(data, nrow, ncol, byrow, dimnames) 参数说明: data - ...

  10. 【题解】跳房子-C++

    Description奶牛按不太传统的方式玩起小朋友玩的跳房子游戏,现给出一个5*%的由数字组成的网格.它们在格子中向前前跳,向后跳,向左跳,向右跳,跳到网格中另一个数字后,又这样继续跳(可能跳到某个 ...