优化性能

一、Dom操作


1.使用fragment批量处理dom元素然后添加到页面中

2.在进行dom操作前隐藏dom元素 操作完毕后 进行显示 这样仅只重绘两次

3.把需要进行dom操作的元素克隆进行处理然后替换页面上的元素 仅进行一次重绘渲染

var old=document.querySeletor(class)

var clone=old.cloneNode(true);

old.parentNode.replace(clone,old);

进行获取dom属性时 如果存在复用 切记进行缓存 不要重复的获取某个元素的属性


二、Dom动画


给有动画效果的元素设定绝对定位脱离文档流,

避免页面频繁重绘 动画仅影响自身重绘渲染


三、优化连续获取Dom布局信息操作


当获取元素的布局信息时页面会强制重新渲染,

但是浏览器会优化连续的dom操作,

所以当需要获取大量的dom布局信息或者进行大量的dom操作时,

尽可能的把获取布局信息代码提前放在一起,便可只进行一次重排


四、使用事件委托


如果给大量元素绑定了事件则会占用比较大内存,

导致开销比较巨大,则建议给每个父元素绑定事件,

通过事件冒泡的形式给子元素委托事件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,776评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 1. 基本原理 向更大的世界迈出第一步。 1.1 render()函数 一般来说,要尽可能少地在 render 函...
    cbw100阅读 10,406评论 0 15
  • 作为一个高三的学生,我很不幸的无法去瞧瞧外面的世界,只能每天往返于学校和家,两点一线,生活被枯燥和单调填满。我烦恼...
    苏屹明阅读 2,750评论 0 0
  • 我差点忘记我是一个有血有肉的人。 很长一段时间以来,碰到事情第一想到的是怎样解决,解决不了应该怎样善后。 已经很久...
    羥羊阅读 1,306评论 0 0