浅谈CSS在前端优化中一些值得注意的关键点

2020-05-06 09:25:20易采站长站整理

2016617115331114.jpg (291×104)

使用CSS写样式时,还应该多考虑模块化和可复用性。如果你写的代码是独立于内容的,它就是可复用的。另外从CSS类的命名上也经常可以看出问题,我的经验是尽量以元素的样式,而不是元素的功能去命名,例如给一个发送邮件按钮添加样式CSS类时,.btn-confirm就比.btn-send-mail好一些,前者可以复用到任何确认操作的按钮上(当然.btn-send-mail这个类也可以用于做js事件绑定用,只要它不绑定任何样式)。

1.3 渐进式增强
渐进式增强指的是首先有一个基本的设计是可以兼容所有浏览器的,然后再为较新式的浏览器做加强的样式或功能(渐进式)。例如设置渐变背景颜色时,可以先定义一条background-color属性(退化样式),再设置其他linear-gradient属性,这样可以确保在浏览器不支持CSS3的时候,也可以正常显示一个背景颜色。
强烈建议不要用判断浏览器类型或版本号的方式来判断是否支持某个功能,而是用特征检测来判断。关于特征检测,推荐用第三方库Modernizr。

2. 性能准则
前端开发人员不仅要给用户提供最好的界面体验,还要关心页面的加载时间。2010年4月,谷歌把页面加载的快慢列入了搜索排名的考虑因素,有很多研究数据表明用户流量和加载速度呈正相关关系,可见页面加载速度的优化是何等重要。以下是一些性能准则,根据对页面加载时间的影响强弱排序。

2.1 减少HTTP请求:HTTP请求数量是影响前端性能最明显的一个方面。现代很多浏览器支持4个并行连接,理解浏览器的并行连接机制,把资源文件分发到不同的域名下利用浏览器并发,可以提高加载效率。加载少量的大文件优于加载大量的小文件,因此线上的网站应尽可能合并CSS和JS文件。另外,使用图片精灵(CSS Sprite,俗称雪碧图)把许多图标之类的小图片合到一个大图片,可以减少大量的图片HTTP请求。

2.2 使用CDN加速:如果有能力的话,把静态资源文件如图片、字体、JS库等放到CDN可以大幅提高访问速度。使用CDN应该给每个文件引用加一个时间戳,这样就不用担心缓存在CDN服务器上过期对用户产生影响。

2.3 避免空的src和href属性值:空src的img元素会被JS动态赋值,导致浏览器会发起一个无用的HTTP请求。同样,点击空href的a标签也会导致浏览器发起HTTP请求,通常是重新加载当前页面,这也是许多初学者难以发掘出的bug的原因所在。

2.4 增加过期头:应该给静态资源文件都加上过期头,过期的日期要定得很遥远,基本上可以认为永不过期,这样浏览器就会缓存静态文件。但为了避免用户更新不到最新的文件,最好在文件名上加上版本控制。