环保公司网站模板,账号注册网站,电脑软件推广,做自己的网站logo前端css性能优化 1. 减少样式表数量和压缩文件大小#xff1a; 通过合并多个样式表、删除未使用的样式、压缩样式表等方式来减少样式表数量和大小#xff0c;从而减少网络请求和提高加载速度。 通常来说#xff0c;样式文件会被浏览器缓存#xff0c;进入到其他页面样式文件… 前端css性能优化 1. 减少样式表数量和压缩文件大小 通过合并多个样式表、删除未使用的样式、压缩样式表等方式来减少样式表数量和大小从而减少网络请求和提高加载速度。 通常来说样式文件会被浏览器缓存进入到其他页面样式文件不用再去下载。一般是样式表数量越少越好但是如果样式文件偏大也会影响加载速度所以需要取舍。如果是大项目应该合并成不同的样式文件如果是简单的项目建议合并成一个文件即可。如果无法确认项目规模建议分开成不同的样式文件日后要合并也比较方便。 浏览器想要渲染出网页必须要先将CSS等文件下载下来所有文件越小那么就能够更快的下载和渲染特别是在一些网络速度比较慢的场景下效果尤为明显。我们可以借助一些打包工具进行压缩比如webpack、gulp/grunt、rollup等。
2. 不要嵌套过多复杂的选择器使用尽可能简洁的选择器来匹配元素避免使用过于复杂的选择器可以减少匹配时间和提高渲染速度。
如下 法2的写法性能更高因为css选择器是从右到左解析的法2可以直接获取child而法1需要先获取所有的child再获取family下的所有child
/* 法1 */
.family .child {font-size: 14xp;
}
/* 法2 */
.child {font-size: 14xp;
}3. 避免使用通配符*选择器通配符选择器*会匹配所有元素会消耗大量计算资源。尽可能避免使用通配符选择器或者将其限制在具体的元素或类别上。
4. 使用ID选择器代替类选择器ID选择器比类选择器更具体匹配速度更快。在需要使用样式的地方尽可能使用ID选择器代替类选择器。
5. 避免在全局范围内使用过多的类选择器为了提高选择器的效率可以限定类选择器的范围避免在全局范围内使用过多的类选择器。
6. 减少全局选择器的使用全局选择器会匹配文档中的每一个元素因此会降低选择器的效率。应尽量避免使用全局选择器而是限定选择器的范围。
7. 使用子选择器子选择器的效率比后代选择器高因为子选择器只会选择直接子元素而后代选择器会选择所有后代元素。因此应尽量使用子选择器来提高选择器的效率。
8. 使用类选择器代替标签选择器类选择器比标签选择器的效率高。因此应尽量使用类选择器来代替标签选择器从而提高选择器的效率。
9. 避免使用importimport会阻塞页面的加载影响浏览器的并行下载并且会增加页面的请求次数。使用import引用的CSS文件只有在引用它的那个css文件被下载、解析之后浏览器才会知道还有另外一个css需要下载这时才去下载然后下载后开始解析、构建render tree等一系列操作这就导致浏览器无法并行下载所需的样式文件。尽量避免使用import或者将其放在样式表的开头。
10. 避免使用过多的浮动浮动元素会影响其他元素的布局和渲染如果使用过多的浮动会导致页面的渲染速度变慢。尽量避免使用过多的浮动或者使用其他布局方式代替。
11. 使用雪碧图将多个小图标合并成一个大图并使用CSS来控制显示区域可以减少网络请求和提高加载速度。
12. 避免使用!important!important会覆盖其他所有样式会增加计算时间和降低渲染速度。尽量避免使用!important或者将其限制在必要的地方。
13. 使用缩写属性使用缩写属性可以减少样式表的大小从而提高加载速度。例如使用margin代替margin-top、margin-right、margin-bottom、margin-left。
14. 慎用一些需要浏览器计算的CSS属性 如果某些CSS属性需要浏览器计算那都是需要耗费一些性能的比如box-shadow、border-radius、filter、透明度、:nth-child、calc等等而且除了计算这些属性也容易造成重绘和重排
如果非必要情况下可以不必使用这些属性当然大多数都是必要情况。
15. 利用继承减少代码量 我们都知道CSS有一些属性是可以继承的比如colorfont-sizefont-family等等但是很多开发人员不注意这种细节编写很多重复性代码从而使得CSS文件变得比较大影响加载速度。
16. 首屏关键css使用内联样式 网站性能是留住用户的关键那么网站首屏的加载速度更是关键的关键。
通常我们不会去写内联样式因为这会造成代码维护困难而且内联样式浏览器不会缓存的每次刷新都会重新加载css。
但是凡事都有两面性内联CSS能够使页面渲染的开始时间提前因为在HTML下载完成之后就能渲染了不像link那样引用样式需要耗费更多时间。
那么我们是否可以全部使用内联样式呢答案是否定的刚刚说了内联样式还是存在许多问题的所以最好的解决办法就是首屏关键CSS可以使用内联的形式。
17. 异步加载CSS CSS会阻塞渲染在CSS文件请求、下载、解析完成之前浏览器将不会渲染任何已处理的内容。
但是有些CSS文件可能不是我们渲染必须的CSS文件我们可以让它异步加载从而提升渲染速度比如下面两种异步加载CSS的方式 使用JavaScript动态创建样式表link元素并插入到DOM中 // 创建link标签
const myCSS document.createElement( link );
myCSS.rel stylesheet;
myCSS.href mystyles.css;
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );修改link标签有兼容性问题 link relpreload hrefmystyles.css asstyle onloadthis.relstylesheet或者 link relalternate stylesheet hrefmystyles.css onloadthis.relstylesheet18. 不要为了速度而放弃了可维护性和可读性 渲染速度很重要但是我们在编码过程中也需要注意代码的可维护性和可读性比如不能盲目的为了压缩样式文件的大小写一些很简单的类名如a,b,c,d等
19. 减少页面重排、重绘 页面的重排重绘都会耗费浏览器性能我们在非必要情况下应该避免比如下面这些情况。
改变元素的内外边距 CSS伪类激活 能使用background-color,就尽量不要使用background 改变font-size和font-family 当然有些情况我们是不能避免重绘和回流的我们视情况而定
20.其它优化小点 慎重使用高性能属性浮动、定位 去除空规则 属性值为0时不加单位 将css文件放在页面最上面 尽量少的去对标签进行选择而是用class 尽量少的去使用后代选择器降低选择器的权重值。后代选择器的开销是最高的尽量将选择器的深度降到最低最高不要超过三层更多的使用类来关联每一个标签元素 属性值为浮动小数0.**可以省略小数点之前的0 标准化各种浏览器前缀带浏览器前缀的在前。标准属性在后 选择器优化嵌套尽量避免层级过深
