卖链接前端性能优化-CSS

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

在性能优化中有一个重要的指标-一个有意义的绘制 FMP它指的是页面的主要内容出现在屏幕上的时间。这个指标影响用户在看到页面之前需要等待的时间这可以通过内联关键CSS来减少

减小文件大小压缩代码使用代码压缩工具压缩代码删除多余的空格和换行符以及其他冗余部分

CSS异步加载要立即使用的文件并将它们加载到页眉中。其他模块的CSS可以在页面呈现后通过loadcss和preload异步加载

DNS预取预解析将DNS预取属性添加到页面以通知浏览器预解析指定的域名。经过预解析后用户访问相应域名不会有任何延迟从而加快了加载速度

硬件加速通过GPU渲染使动画更加平滑。过程说明：-小心使用硬件加速。虽然改进是显而易见的但它也对内存产生了巨大的影响——GPU渲染会影响字体的抗锯齿效果并且文本会变得模糊

动画效果要优先使用变换优先选择变换尽量不要使用高、宽、边、填充因为与其他属性相比变换可以直接减少主线的计算量

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

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

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

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

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

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

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

正确使用display属性显示：行内宽度高度、边距、填充和浮动不得在之后使用；

显示：内联块浮点不应在之后使用；

显示：块垂直align之后不应使用；

显示：表格-*保证金或浮动不应在之后使用

小心使用浮动避免使用复杂的选择器。使用不超过三个层次结构。通过CSS继承属性来减少代码量。可以从父元素继承到子元素的属性 如颜色、字体大小等不需要重复设置

选择器的使用-保持简单不要使用太嵌套和太复杂的选择器。

-避免了选择器和通配符的最有效和最有效的使用。

-不要使用类选择器和ID选择器来装饰元素标记例如H3?降价内容。如果你这样做你也会降低效率。

服务器压缩使用工具规范CSS代码编写规范精心选择高消耗样式高消耗属性在渲染前需要大量计算：框阴影、边界半径、透明度变换、cssfilter 性能杀手

免责声明：本文内容来自用户上传并发布，站点仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。请核实广告和内容真实性，谨慎使用。