前端功能优化-CSS

发布时间：2022-06-24 13:21 所属栏目：21 来源：互联网

导读：在一篇文章中，我们介绍了性能优化的重要性，总结了JS的几种JS优化方法和方法。今天，我们将从CSS的角度来讨论前端优化图像压缩图像延迟加载，因为页面可以同时发送到后台的请求数量有限制（通常，浏览器有4到8个请求，ie67有2个请求）。因此，如果页面上有

　　在一篇文章中，我们介绍了性能优化的重要性，总结了JS的几种JS优化方法和方法。今天，我们将从CSS的角度来讨论前端优化

　　图像压缩图像延迟加载，因为页面可以同时发送到后台的请求数量有限制（通常，浏览器有4到8个请求，ie67有2个请求）。因此，如果页面上有许多资源需要请求，页面加载时间将变得非常长。该资源可以根据资源的活动位置实时加载

　　在加载图像预加载页面时，首先加载部分内容（通常是一个屏幕内容），然后在加载先加载的部分内容（通常是一个屏幕内容）之后再加载其他内容

　　当重画元素的外观发生变化时，避免页面重绘。在网站的使用中，重绘是不可避免的。但是，浏览器通过将多个重新排列和重画合并到一个执行中来优化这一点。虽然浏览器已经做了相应的优化，但要尽量避免重画，可以使页面更加流畅

　　减少一些属性的使用。当浏览器绘制屏幕时，所有需要浏览器操作或计算的属性都将花费更多。重新绘制页面时，会降低浏览器的渲染性能。因此，在编写CSS时，如果有替代方案，应该尽量减少box shadow/border radius/filter/transparency/：nth child等属性的使用，这样当浏览器绘制或重画时，浏览器会有更好的渲染效果

　　减少重新排列会导致浏览器重新计算整个文档并重建渲染树，这会降低浏览器的渲染速度。如下所示，有很多操作会触发重新排序，我们应该避免频繁触发它们

　　触发重新排列的属性：宽度、高度、填充、边距、显示、边框宽度、位置上、左、右、下、字体大小、浮动、文本对齐flow-y、字体粗细、溢出、字体系列高度、垂直对齐、清除、空白、小高度

　　注意使用特殊的CSS样式。将样式表放在页面顶部以删除多余和无用的CSS。可以统一设置重复样式，以避免重复设置CSS属性，这些属性可以在引用中统一设置。

（编辑：ASP站长网）