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. 【练习题】proj1 判断二叉树子树和是否为指定的值

    #include <stdio.h> #include <vector> #include <list> #include<iostream> usin ...

  2. kubernetes实战篇之helm填坑与基本命令

    系列目录 其实前面安装部分我们已经分享一些互联网上其它网友分享的一些坑,本篇介绍helm的基本使用以及在使用过程中碰到的一些坑. 客户端版本和服务端版本不一致问题 有些朋友可能在使用helm init ...

  3. 使用docker运行GitLab

    从docker镜像拉取代码,docker pull gitlab/gitlab-ce:latest. 创建/srv/gitlab目录sudo mkdir /srv/gitlab 启动GitLab CE ...

  4. 图片加载时间缓慢问题API

    一.背景       最近段时间,开发写值工具项目中,出现图片加载问题API,响应时间缓慢:为了优化图片加载问题,我进行图片压缩方法,然后API的图片加载还是慢,最终在自己无意中乱写找到了根本的原因. ...

  5. Redis中的Stream数据类型作为消息队列的尝试

    Redis的List数据类型作为消息队列,已经比较合适了,但存在一些不足,比如只能独立消费,订阅发布又无法支持数据的持久化,相对前两者,Redis Stream作为消息队列的使用更为有优势.   相信 ...

  6. Python入门基础(2)

    如果你是博客园团队,,看到不符合您们要求的地方可否指出来?不要你不符合要求,然后我不符合哪项要求?是要我自己去找么? python条件语句 首先介绍的是if语句,python中的if语句格式如下: i ...

  7. 数字IC前后端设计中的时序收敛(六)--Max Fanout违反

    本文转自:自己的微信公众号<数字集成电路设计及EDA教程>(二维码见博文底部) 里面主要讲解数字IC前端.后端.DFT.低功耗设计以及验证等相关知识,并且讲解了其中用到的各种EDA工具的教 ...

  8. C++学习书籍推荐《More Effective C++》下载

    百度云及其他网盘下载地址:点我 编辑推荐 <More Effective C++:35个改善编程与设计的有效方法(中文版)>:传世经典书丛 媒体推荐 <Effective c++&g ...

  9. Java项目案例之---开灯(面向对象复习)

    开灯(面向对象复习) 设计一个台灯类(Lamp)其中台灯有灯泡类(Buble)这个属性,还有开灯(on)这个方法 设计一个灯泡类(Buble),灯泡类有发亮的方法 其中有红灯泡类(RedBuble)和 ...

  10. python接口自动化(二十九)--html测试报告通过邮件发出去——上(详解)

    简介 前边几篇,已经教小伙伴们掌握了如何生成HTML的测试报告,那么生成测试报告,我们也不能放在那里不管了,这样即使你报告在漂亮,领导也看不到.因此如果想向领导汇报工作,不仅需要提供更直观的测试报告. ...