博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
提高网站的性能----回流与重绘
阅读量:6440 次
发布时间:2019-06-23

本文共 1391 字,大约阅读时间需要 4 分钟。

hot3.png

以前在写网页的时候很少关注到网站的性能,时间进入今天,一个网站不在是单纯几张图片或者几段文字,组成一个网站,今天的用户更加注重网站体验,所以写一个页面的时候网站的性能优化变得格外重要,作为一个前端的开发人员,一定的要对网站的每一个页面做到最大性能优化,今天的学习了一下如果提高网站性能重要的知识:

回流与重绘

----------------------------------------让你的网页快点在快点-----------------------------------------------

html中的每个tag都是dom 树中的1个节点,document(根节点)。

回流:

当视图中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就叫着回流(也可以叫做重新布局)

重绘:

当视图中的有些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,就叫着重绘

这里提到重要的一点: 回流一定会重绘,而重绘未必回流。

会产生回流或者重绘的操作:

1、添加、删除元素(回流+重绘)

2、隐藏元素 display:none,(回流+重绘),visibility:hidden(重绘,不回流)

3、移动元素:改变top,left,或者移动元素到另外1个父元素中(重绘+回流)

4、对style的操作()

5、改变浏览器的大小(回流+重绘)

浏览器在处理回流和重绘的时候,会把所有的引起回流、重绘的操作放入一个队列里面,一定数量或者时间间隔就会flush对象,这样就会让多次的回流、重绘变成一次回流重绘

减少回流、重绘

1.不要改变一个元素的样式属性,最后直接改变类名,类名是预先定义好的样式,不是动态的,你要动态的改变一些样式,可以使用字符串拼接形式进行改变

示例:

// 不好的写法

var left = 1;var top = 1;
el.style.left = left + "px";
el.style.top  = top  + "px";// 比较好的写法 
el.className += " className1";// 比较好的写法 
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

2.让要操作的元素的进行“离线处理”,

3.不要经常访问会引起浏览器fiush队列的属性,如果确实要访问,可以先对变量进行缓存,应聘哪的时候就可以直接读取变量

示例:

// 别这样写,大哥

for(循环) {
    el.style.left = el.offsetLeft + 5 + "px";
    el.style.top  = el.offsetTop  + 5 + "px";
}// 这样写好点
var left = el.offsetLeft,top  = el.offsetTop,s = el.style;for(循环) {
    left += 10;
    top  += 10;
    s.left = left + "px";
    s.top  = top  + "px";
}

4.一定要思考清除,操纵元素会影响到多少个节点,尽量减少对节点的影响,影响越多,就越耗费资源、

转载于:https://my.oschina.net/u/1403169/blog/202440

你可能感兴趣的文章
Android之剪贴薄实现
查看>>
Sonix SN9P701 OCR点读笔二维码识别源码
查看>>
oracle 单引号 双引号 连接符
查看>>
如何使用fileupload工具来实现文件上传
查看>>
EZ GUI Button和Checkbox创建
查看>>
指针[收藏]
查看>>
审批流程设计方案-介绍(一)
查看>>
Python多进程编程
查看>>
使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示。
查看>>
IIS_右键点击浏览网站没有反应
查看>>
POJ训练计划1035_Spell checker(串处理/暴力)
查看>>
Makefile 使用总结【转】
查看>>
一起学微软Power BI系列-官方文档-入门指南(4)Power BI的可视化
查看>>
Android.util.Log 关于Android开发中打印log
查看>>
转:Python yield 使用浅析 from IBM Developer
查看>>
仪表板颜色
查看>>
NodeJS、NPM安装配置步骤(windows版本)
查看>>
mysql oom之后的page 447 log sequence number 292344272 is in the future
查看>>
chrome禁用某个网站js脚本的执行
查看>>
数组排序 和 二分法查找
查看>>