zoukankan      html  css  js  c++  java
  • web性能优化--减少DOM操作(三)

    • 减少DOM数量
    • 减少DOM操作
    • 批量处理DOM操作
    • 批量处理样式修改
    • 尽量不要使用tabel布局
    • 尽量不要使用css表达式
    • string用数组join
    • css选择符优化

    1.减少DOM数量

      在HTML生成DOM树的时候,DOM数量越少,HTML渲染速度越快

    2.减少DOM操作

      每次操作DOM,都会带来repaint和refolw

    3.批量处理DOM操作:

      将元素移除DOM Tree,修改完后再放回去,因此只会调用一次repaint或者reflow

    4.批量修改样式

      改变classname,或者用css(),原理和批量处理js一样

    5.尽量不要使用tabel布局

      tabel中某个元素改变了,整个tabel就会reflow.

      如果非用不可,可以设置tabel-layout:auto或者tabel-layout:fixed,让tabel一行一行的渲染,限制渲染范围

    6.尽量不要使用css表达式

      每计算一次就会触发reflow一次

    7.string用数组join连接

      在js中使用“+”来拼接字符串效率比较低,因为每次运行都会开辟新的内存并生成新的字符串变量,然后将拼接的字符串赋值给新变量。使用数组的话效率就高一点

    8.css选择符优化

      因为css是从右向左解析的,根据这个规则,尽量使右边的样式唯一

  • 相关阅读:
    mysql dump 完全备
    CentOS7位安装MySql教程
    mysql 数据备份
    Linux下iostat命令详解
    端口映射
    git+jenkins jar包代码的发布加新建项目
    腾讯面试题
    PHP-----类与对象,成员方法,成员属性,构造方法,析构方法
    PHP-----二维数组和二分查找
    PHP-----数组和常见排序算法
  • 原文地址:https://www.cnblogs.com/thonrt/p/6589648.html
Copyright © 2011-2022 走看看