VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 第 15 题:谈谈你对回流和重绘的理解?

什么是回流?

  • 当一个元素自身的宽高,布局,显示或隐藏,或元素内部的文字结构发生变化,导致需要重新构建页面的时候,就产生了回流

什么是重绘?

  • 当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就产生了重绘

什么时候会进行回流?

  • 添加或者删除可见的 DOM 元素的时候

  • 元素的位置发生改变

  • 元素的尺寸发生改变

  • 内容改变

  • 页面第一次渲染的时候

  • 列举一些相关的 CSS 样式:width、height、line-height、padding、margin、diaplay、border、top、position、float、font-size、overflow 等

什么时候会进行重绘?

  • 列举一些相关的 CSS 样式:color、background、background-size、visibility、box-shadow

如何进行性能优化?

  • 用 transform 代替 top,left ,margin-top, margin-left… 这些位移属性

  • 不要使用 js 代码对 dom 元素设置多条样式,选择用一个 className 代替之

  • 不要在循环内获取 dom 的样式例如:offsetWidth, offsetHeight, clientWidth, clientHeight 等。浏览器有一个回流的缓冲机制,获取这些属性时会产生回流

  • 避免设置多层内联样式,写个外部类这样只回流一次

  • 让多次回流的元素脱离文档流比如动画,使用 position 属性的 fixed 值或 absolute 值

  • 一起变化(同时修改所有需要变化的属性)

来源:https://www.cnblogs.com/noxussj/p/15117093.html

相关教程