前端性能优化-精确的控制dom元素

6.dom操作

  • 精确的控制dom元素(id 选择器)

1.浏览器的开发者工具针对页面进行调优

  • Network窗口
  • Stalled（阻塞）
  • DNS Lookup（域名解析）
  • dns缓存
  • 建立持久连接
  • Initial connection（初始化连接）
  • SSL（包含于HTTPS连接中）
  • Waiting（等待响应）
  • Request sent（发送请求）
  • Content Download（下载）

2. js调试

  • 设置在DOM node发生变化时触发断点
  • dom 右键 Break on
  • 可以设置成这个节点被删除、节点的属性有任何变化，或它的某个子节点有变化发生。
  • js断点
  • 移动设备模拟环境
时间： 2024-11-06 16:49:43

前端性能优化-精确的控制dom元素的相关文章

前端性能优化－－－DOM操作

小结 1缓存DOM对象 场景:缓存DOM对象的方式也经常被用在元素的查找中,查找元素应该是DOM操作中最频繁的操作了,其效率优化也是大头.在一般情况下,我们会根据需要,将一些频繁被查找的元素缓存起来,在查找它或查找它的子孙元素时,以它为起点进行查找,就能提高查找效率了. var ulNode = document.getElementById("container"); 2在内存中操作DOM元素 由于DOM操作会导致浏览器的回流,回流需要花费大量的时间进行样式计算和节点重绘与渲染,所以

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

浅谈前端性能优化（移动端）

上一篇讲了PC端的部分:前端性能优化(PC端),这次继续说移动端的.相对于PC端的,移动web浏览器上有一些明显的特点:设备的屏幕小.新特性兼容性较好.支持一些比较新的HTML5和CSS3.需要与Native应用交互等.但移动端可用的CPU资源和网络资源极为有限,因此要做好移动端web上的优化往往需要考虑做更多的事情.首先在移动web的前端页面渲染中,PC的优化规则同样适用,此外针对浏览器也要做一些更细节的优化达到更好的效果.需要注意的是,并不是移动端的优化在PC端不适用,而是由于兼容性的原因,

Web前端性能优化的9大问题

1.请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时,将

Web 前端性能优化【转】

Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端优化最佳实践之 内容篇Web 前端优化最佳实践之 Server 篇Web 前端优化最佳实践之 Cookie 篇Web 前端优化最佳实践之 CSS 篇Web 前端优化最佳实践之 JavaScript 篇Web 前端优化最佳实践之 图象篇Web 前端优化最佳实践之 Mobile(iPhone) 篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作

前端性能优化：jquery性能优化

jQuery是前端最常用的一个js框架,其实有部分操作也是可以改进的.大部分情况下,封装的后性能是会降低的,如果发现很影响,就可以改为原生的. 另外使用jQuery需要注意一下几点来提高性能: 1不使用each, jQuery 的each循环比原生的for循环性能相差几十倍. 前端性能优化:循环优化 2尽量使用ID,类型,类选择器,避免使用属性选择器 尽量使用ID,类,类型选择器,避免属性选择器.ID,类,类型都有原生的方法,属性选择器需要遍历整个DOM,还需要读取每个节点的属性进行判断,性能很

WEB前端性能优化小结

1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时

Web前端性能优化全攻略[转载]

1. 尽量减少  ">HTTP 请求 (Make Fewer  ">HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益.有几种常见的方法能切实减少  ">HTTP 请求: 1) 合并文件,比如把多个  ">CSS 文件合成一个: 2)  ">CSS Sprites 利用  ">CSS background 相关元

Web前端性能优化全攻略

网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条--真是与时俱进啊.最新的 34 条也针对不同的角度做了分类. 面向内容的优化规则