深入理解重排、重绘和回流
人们在做网页优化的时候，总得碰到“重排”“重绘”还有“回流”这几样东西。先说它们啥意思。所谓“重排”，就是浏览器看到网页里的东西有变，比如位置、大小或者样式之类的，那么它就会再算一遍网页怎么摆放这些元素；而“重绘”就只跟样式有关，每次只要网页里那些样式有变化，不管是什么原因导致的，浏览器都会把整个网页画一次；最后是“回流”，它其实就是个大杂烩，既有“重排”又有“重绘”，也就是全都干了。所以，咱们应该尽量少让“回流”出现。
影响性能的因素
你得知道哪些动作能引发网页出现重排、重绘和回流，才能干好网站速度优化这活儿。让页面变乱的通常有这么几个原因：元素搬家、缩放大小、换形状；还有就是给它们加漂亮衣服、换外貌（这里指修改元素样式）；最后，如果既搬家又增减，还换个新发型（也就是位置、尺寸和样式都变了）那结果可就更糟了。所以，写代码的时候可别这么折腾，免得拖慢站点速度！
优化技巧探讨
想少点重画啥的，咱们可以这么做：一次性改好多个样式，这样就不用老回流了；用“文档片段”搞下DOM操作，别老是刷树，没那么费劲；再不济也能用CSS动画代JavaScrip动画，这样对页面布局基本没影响~
代码示例及优化
下面来看几个实际例子，看看怎么优化代码提高速度。比如，大容量的DOM元素最好少动，因为DOM操作会拖慢;再比如，如果某个样式老是换来换去，可以想着用CSS类名来控制而不是硬生生地改style。这样一搞，速度就能上去了！
工具与技术辅助
除了刚才说的那些方法，还有别的办法帮咱们提高网站速度！比如说用个CDN服务，就能让访问者快速看到网站内容；把图片、CSS、JavaScript之类的文件压扁整合起来，这样就不用下载那么多东西了；再就是试试用推迟加载这种方法，能让你的主页在打开时更快。只要掌握好这些小窍门，相信咱们的网站肯定会越来越快！
var element = document.getElementById("element");
element.style.left = "100px";
element.style.width = "200px";
持续优化与调整
你可得记住，网页优化不是一蹴而就的事，得像打篮球比赛那样，随时改变策略。因为商业和用户需求总是变来变去的，咱们得看准了再做决定。所以，时不时地看看网站表现怎么样，然后适时地调整优化，让它始终保持高速运转就行。
var container = document.getElementById("container");
var element = document.createElement("div");
container.appendChild(element);
结语
这篇文章详细讲了重排、重绘和回流，还有实例和优化办法。看过后，你们应该对网页性能优化有更深理解。实际操练时，别忘了把理论知识跟实战经验结合起来！最后想问下，你在优化网页性能时都遇到了啥难题，咋解决的呀？
window.addEventListener("resize", function() {
// do something
});
window.addEventListener("scroll", function() {
// do something
});
。
评论0