zoukankan      html  css  js  c++  java
  • 浏览器的重绘、回流及网页优化

    定义

    重绘是指当colorackground-color等与视觉相关的样式属性值被更新时触发绘制过程,在绘制过程中要重新计算元素的视觉信息,使元素呈现新的外观。
    回流是指当窗口尺寸被修改(resize),发生滚动操作,或者positiondisplaywidthheight等元素位置相关属性被更新时触发布局过程,在布局过程中要计算所有元素的位置信息。


    触发回流的操作

    [1]DOM元素的几何属性变化
    [2]DOM树的结构变化
    [3]获取某些属性:offsetTopoffsetLeftoffsetWidthoffsetHeightscrollTopscrollLeftscrollWidthscrollHeightclientTopclientLeftclientWidthclientHeightgetComputedStyle()currentStyle()
    [4]改变元素的一些样式
    [5]调整浏览器窗口大小

    减少重绘和回流的方法

    [1]不要一条一条地修改DOM样式,而是修改className或者修改style.cssText
    [2]在内存中多次操作节点,完成后再添加到文档中去
    [3]对于一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示
    [4]在需要经常获取那些引起浏览器重排的属性值时,要缓存到变量中
    [5]为需要多次重排的元素的position设置为fixed或absolute
    [6]不要使用table布局,因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间


    优化网页的方法:

    html:
    [1]使用新标签,提高浏览器识别能力
    [2]减少html标签嵌套深度
    [3]为图片指定大小,减少回流
    [4]压缩html
    [5]不要使用table布局,因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间

    css:
    [1]cssSprite
    [2]模块化css
    [3]简化和优化css选择器,将嵌套层数控制在最小,最右边的选择器使用优先级较高的选择器
    [4]避免使用css表达式
    [5]不使用@import
    [6]合并和压缩css代码

    js:
    [1]压缩js代码
    [2]不要一条一条地修改DOM样式,而是修改className或者修改style.cssText
    [3]在内存中多次操作节点,完成后再添加到文档中去
    [4]对于一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示
    [5]在需要经常获取那些引起浏览器重排的属性值时,要缓存到变量中
    [6]为需要多次重排的元素的position设置为fixed或absolute

  • 相关阅读:
    c#创建对象并动态添加属性
    js从$scope外部调用$scope内部函数,跨js调用非全局函数
    JQuery中$.ajax()方法参数详解
    c#关于int(或其他类型)的字段在对象初始化时默认初始化问题的解决方法
    SQLServer中存储过程StoredProcedure创建及C#调用(转)
    2020年将热门的8大IT职业领域
    2015总结+2016计划
    hadoop程序在本地模式调试作业
    Flume+Kafka+storm的连接整合
    scp 和 pscp
  • 原文地址:https://www.cnblogs.com/yulei126/p/6789773.html
Copyright © 2011-2022 走看看