认识达内从这里开始

认真做教育专心促就业

南昌达内培训机构web前端培训css性能优化常用方法分享

发布：南昌达内IT培训
来源：互联网
时间：2022-07-21 10:24

我们在上文中给大家简单介绍了网页开发都会用到的一些编程元素和优化方式等内容，而本文我们就继续来学习一下，web前端培训css性能优化常用方法分享。

南昌达内培训机构web前端培训css性能优化常用方法分享

一般来讲一个网站上肯定会有很多个小图标，对于这些小图标，目前的主流的解决方案有三个，cssSprite(雪碧图)，字体图标，把图片转成base64。

cssSprite：把所有icon图片合成一张png图片，使用时对节点设置宽高，加上bacgroud-position进行背景定位。以背景图方式显展示需要的icon，如果一个网站有20图标，那么就要请求20次，使用cssSprite，只需要请求一次，大大的减少了http请求。缺点就是管理不灵活，如果需要新增一个图标，都需要改合并图片的源文件，图标定位也要规范，不然容易干扰图片之间的定位。

字体图标：简单粗暴的理解就是把所有的图标当成一个字体处理!这样不用去请求图片。一般是使用class来定义图标，要替换图标时，只需更换样式名，管理方便，语意明确，灵活放大缩小，并且不会造成失真。但是只支持单色的图片。

base64：另一种方案就是把小的icon图片转成base64编码，这样可以不用去请求图片，把base64编码直接整合到js或者css里面，可以防止因为一些相对路径，或者图片被不小删除了等问题导致图片404错误。但是找个方式会生成一大串的base64编码。一般来说，8K以下的图片才转换成base64编码。如果把一张50K的图片转成base64编码，那么会生成超过65000个字符的base64编码，字符的大小就已经是将近70K了!建议就是：8K以下的图片才转换成base64编码。

避免使用@import

不建议使用@import主要有以下两点原因：

使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建rendertree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。

多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。

不要在ID选择器前面进行嵌套其它选择器

在ID选择器前面嵌套其它选择器纯粹是多余的

ID选择器本来就是的而且人家权值那么大，前面嵌套(.content#text)完全是浪费性能。

除了嵌套，在ID选择器前面也不需要加标签或者其它选择器。比如div#text或者.box#text。这两种方式完全是多余的，理由就是ID在页面就是的。前面加任何东西都是多余的!

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。

< 上一篇：南昌达内Java培训网页开发性能优化常见问题分析

下一篇：南昌达内UI培训提高用户使用体验设计方法分享 >