php图书管理系统网站开发,h5小程序,ppt模板免费下载百度网盘,dw软件主要做什么前言
最近写的都是写基础知识#xff0c;为了提高巩固自己的知识体系#xff0c;抽空就总结或复习一个知识点。为了防范于未然#xff0c;说不定哪天就得重新找工作了。如何提高渲染时间#xff0c;优化前端性能#xff0c;必有减少重绘和重排。之前在前端性能优化上叶有…前言
最近写的都是写基础知识为了提高巩固自己的知识体系抽空就总结或复习一个知识点。为了防范于未然说不定哪天就得重新找工作了。如何提高渲染时间优化前端性能必有减少重绘和重排。之前在前端性能优化上叶有介绍到这个。这篇文章系统性总结一下。
概念
重绘Repainting和重排Reflow是与网页渲染和布局有关的两个关键概念它们在前端性能优化中非常重要。 重排Reflow 重排是指浏览器重新计算并重新布局网页中的元素的过程以确定它们的几何尺寸和位置。这通常发生在以下情况下 页面首次加载时因为需要计算和布局整个文档。当用户调整浏览器窗口大小。当DOM结构发生变化例如添加、删除或修改元素。当元素的样式属性发生变化如修改元素的宽度、高度、边距、填充、字体大小等。 重排是一项昂贵的操作因为它会影响整个页面的布局然后会触发重绘。 重绘Repainting 重绘是指在不改变元素的几何布局尺寸和位置的情况下浏览器重新绘制元素的过程。这通常发生在以下情况下 当元素的视觉属性发生变化如颜色、背景、边框、阴影、文字内容等。 重绘比重排轻量因为它不需要重新计算布局。
它们的关系是重排一定会触发重绘 重绘不一定触发重绘。
触发时机
重绘Repainting和重排Reflow在网页中的触发时机有很多情况通常是由DOM操作、CSS属性变化或浏览器事件等触发的。下面是一些触发重绘和重排的常见情况
重排Reflow的触发时机 页面首次加载当浏览器首次加载页面时需要进行初始的布局计算这会导致重排。 改变窗口大小当用户调整浏览器窗口大小时页面的布局会发生变化触发重排。 修改DOM结构添加、删除或更改页面上的元素、文本内容或其结构通常会触发重排。 修改样式属性当元素的CSS样式属性发生变化如宽度、高度、边距、填充、字体大小等会引起重排。 获取某些布局属性访问一些需要计算布局属性的方法如offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeight等会触发重排。 字体加载当网页中使用的字体在加载完成之前会导致重排。
重绘Repainting的触发时机 改变颜色、背景、边框当元素的颜色、背景、边框等视觉属性发生变化时会触发重绘。 文本内容变化当元素的文本内容变化例如修改文字或标签文本会触发重绘。 阴影、透明度等样式变化改变元素的阴影、透明度、文本阴影等视觉属性会引发重绘。
浏览器优化
现在的Web浏览器都具有各种优化机制旨在提高性能、提升用户体验以及降低资源消耗。以下是一些常见的浏览器优化机制 页面缓存 浏览器会缓存页面的静态资源例如CSS文件、JavaScript文件和图片以减少重复下载的次数。这可以提高页面加载速度特别是在用户再次访问相同页面时。 HTTP缓存 浏览器支持HTTP缓存它允许服务器指定哪些资源可以在客户端缓存多长时间。这减少了对服务器的请求提高了页面加载速度。 预加载 现代浏览器可以通过预加载机制在用户导航到某个链接之前预先加载页面的资源以提前准备数据加快导航速度。 DOM解析和渲染优化 浏览器会尝试尽早开始DOM解析和渲染以提供更快的首次页面渲染。 异步加载 使用async和defer属性来异步加载JavaScript文件以避免阻塞页面的渲染和提高性能。 图片延迟加载 延迟加载图片只在用户滚动到可见部分时加载以减少页面初次加载时间。 硬件加速 浏览器可以利用计算机的GPU来加速图形渲染从而提高性能特别是在处理复杂动画和3D效果时。 预渲染和预取 浏览器可以根据用户的行为预先加载链接或页面以提供快速导航体验。 资源压缩 浏览器支持gzip等压缩方法以减小传输的数据大小减少网络带宽消耗和提高加载速度。 资源合并和减少请求数 通过合并CSS和JavaScript文件、使用雪碧图、减少HTTP请求等方法减少请求数从而加快页面加载速度。
如何减少重绘重排
避免肯定是不可能的所以为了优化渲染过程提高用户体验在平时的开发过程中要尽可能减少重绘重排。 以下是一些减少重绘和重排的实用方法 使用硬件加速 使用 CSS 属性transform 和 opacity 可以触发硬件加速减少重排和重绘的开销。例如使用transform进行动画而不是修改元素的位置。 使用 requestAnimationFrame 使用requestAnimationFrame来调度动画操作它可以确保动画在浏览器的下一次绘制帧之前进行以避免不必要的重绘。 使用 CSS 动画 使用 CSS 动画而不是JavaScript动画因为浏览器可以优化CSS动画减少对页面的影响。 批量DOM操作 避免多次单独的DOM修改。相反尽量将多个DOM操作合并成一个然后一次性进行处理。 避免频繁读取布局属性 避免在循环中多次读取布局属性因为每次读取都会导致重排。将布局属性的值缓存到变量中以减少性能开销。 使用文档碎片Document Fragments 如果需要创建大量DOM元素使用文档碎片可以减少DOM操作次数从而减少重排。 延迟加载图片 图片的加载是重排的常见原因。通过延迟加载图片只在它们进入视口时加载可以减少页面加载时的性能开销。 避免表格布局 表格布局的改变通常会导致整个表格的重排尽量避免使用表格布局。 使用CSS属性will-change 使用will-change属性可以告诉浏览器某个元素可能会发生变化从而使浏览器能够做出优化。 减少重排的影响范围 如果不是整个页面的布局都发生了变化可以尝试减小重排的影响范围只重新布局受影响的部分。 使用工具进行性能分析 使用浏览器的开发者工具来分析页面的性能找出触发重排和重绘的问题并进行优化。
