文章详情
前端性能优化-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(性能杀手)
上一文章:「站长平台」为什么很多公司利用软文来提升搜索引擎排名
下一文章:网站建设中不容忽视的几个问题
相关推荐
- 11-02哈尔滨网站建设,设计网站时要牢记哪些因素?
- 11-11岳阳网站建设,内容的运营和高质量外链技能的
- 12-09「网站建设公司」深圳网站建设公司哪家好?
- 11-23中小型企业选择深圳网站建设怎样明确需求
- 10-22企业网站制作的基本步骤
- 10-29我们应该使用哪些细节来优化网站
- 11-09如何判断你的方案在网站中的报价是多少
- 11-11SEO推广公司新闻软文营销八大优势
- 10-27网络推广网站时,url应该如何优化?
- 11-06湘潭网站建设,湘潭网站定制的价格?
- 10-27类似的页面在网络推广中会产生什么影响?
- 10-30响应式网站建设有哪些好处?
- 11-05如何把做好的网站和营销做好捆绑
- 10-29网络推广:介绍降级网站的恢复方法