CSS和图片优化（将样式表置顶、避免使用CSS表达式、用＜link＞代替@import、GPU加速、

caozhijian 发布于2021-09-22 10:02 / 1690人阅读

摘要：避免表达式表达式可以动态的设置属性，在中支持，其他浏览器中表达式会被忽略。用代替避免使用的原因很简单，因为它相当于将放在网页内容底部。加速中以下属性可以触发渲染，请合理使用，过渡使用会引发手机过耗电增加。

CSS

CSS

将样式表置顶

经样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。

如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来之前只好对不起观众了。

避免CSS表达式

CSS表达式可以动态的设置CSS属性，在IE5-IE8中支持，其他浏览器中表达式会被忽略。例如下面表达式在不同时间设置不同的背景颜色。

{    background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );}

CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。

如果想达到类似的效果我们可以通过简单的脚本做到。

var currentTime = new Date().getHours();if (currentTime%2) {    if (document.body) {        document.body.style.background = "#B8D4FF";    }}else {    if (document.body) {        document.body.style.background = "#F08A00";    }}

用代替@import

避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。

避免在HTML标签中写样式

写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，

避免使用Filters

AlphaImageLoad也是IE5.5 - IE8中支持，这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。

GPU加速

CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）可以触发GPU渲染，请合理使用，过渡使用会引发手机过耗电增加。

值为0时不需要任何单位

为了浏览器的兼容性和性能，值为0时不要带单位

不声明过多的Font-size

过多的Font-size引发CSS树的效率。

不滥用Float

Float在渲染时计算量比较大，尽量减少使用

移除空的CSS规则

空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则

正确使用Display的属性

Display属性会影响页面的渲染，因此请合理使用

a) display:inline后不应该再使用width、height、margin、padding以及float

b) display:inline-block后不应该再使用float

c) display:block后不应该再使用vertical-align

d) display:table-*后不应该再使用margin或者float

图片

优化图像

当美工完成了网站的图片设计后，我们可以在上传图片之前对其做以下优化

检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。可以使用imagemagick检查：
identify -verbose image.gif
尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。下面这条简单的命令可以安全地把GIF格式转换为PNG格式：
convert image.gif image.png
在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。例如：
pngcrush image.png -rem alla -reduce -brute result.png
在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

优化CSS Sprite

Spirite中水平排列图片，垂直排列会增加文件大小；
Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，1000×1000就是100万像素。

不在HTML中缩放图片

不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片吧。

使用小且可缓存的favicon.ico

网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标

存在
文件尽量小，最好小于1k
设置一个长的过期时间

GPU服务器 GPU裸金属 php使用css样式 css样式页面css样式 css的样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/120029.html

【面试篇】JS基础知识查漏补缺

摘要：因为在页面加载完成后，引擎维护着两个队列，一个是按页面顺序加载的执行队列，还有一个空闲队列，使用定时函数就是将回调函数加入到空闲队列中，故和其他定时器是并发执行的。 1.window.onload和$(document).ready()的区别： ①执行时间：window.onload会在所有元素，包括图片,引用文件加载完成之后执行，而$(document).ready()则会在HTML...

myeveryheart 2019-08-20 16:02 评论0 收藏0
【译】如何对网站进行优化提速？

摘要：对于网站，建议使用插件来自动优化网站的图片。避免重定向重定向是对网站访问者的一种极大的刺激。另一种选择是将这些代码内嵌到网站上，同时需要确保的优化。那么，又该如何减少请求请见以下步骤减少网站上的对象数量。快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。如果网站不是以最好的性能在运行，迟缓的加载会让你在...

JessYanCoding 2019-05-29 18:00 评论0 收藏0
这么多前端优化点你都记得住吗？

摘要：不推荐移动端浏览器前端优化策略相对于桌面端浏览器，移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 GitHub链接：https://github.com/zwwill/blo... 围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意，是罗列不是展开，遇到不会不懂的点还请站外扩展开车...

ysl_unh 2019-08-21 17:30 评论0 收藏0
这么多前端优化点你都记得住吗？

摘要：不推荐移动端浏览器前端优化策略相对于桌面端浏览器，移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 GitHub链接：https://github.com/zwwill/blo... 围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意，是罗列不是展开，遇到不会不懂的点还请站外扩展开车...

Tecode 2019-08-01 17:58 评论0 收藏0
这么多前端优化点你都记得住吗？

摘要：不推荐移动端浏览器前端优化策略相对于桌面端浏览器，移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 GitHub链接：https://github.com/zwwill/blo... 围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意，是罗列不是展开，遇到不会不懂的点还请站外扩展开车...

Tonny 2019-08-29 13:47 评论0 收藏0