css优化 网页优化

原创 沦落 随笔 css 532阅读 2017-05-02 10:16:13 举报

优化主要分为:

1、图片优化
2、css代码优化
3、减少HTTP请求
4、HTML标签语义化

图片优化:
1、图片压缩
①存储为web所用格式
②使用压缩工具进行压缩(ps\)
2、选择正确的图片格式
3、加上高度和宽度
4、ALT-代替属性

CSS代码优化:
一、CSS代码优化作用与意义:
1、减少占用网页字节。在同等条件下缩短浏览器下载CSS代码时间,相当于加快网页打开速度
2、便于维护。简化和标准化CSS代码让CSS代码减少,便于日后维护
3、让自己写的CSS代码更加专业。
(整理和优化代码不仅是为了减小css文件,还包括了维护性和可读性以及提升css渲染速度。)

二、CSS代码优化方法:
1)缩减代码
1、代码简写。
2、提取共用 css选择器:可在最后整合。
3、排列代码,不要每个属性都独占一行,少用回车和空格。
4、减少注释内容。注释中不使用汉字。
2)增强维护性和可读性。
1、命名规范。:功能命名
2、合适注释(不能出现汉字)
3、条理化代码:css代码整理归类。如头部内容与中间内容隔开,方便以后维护。上中下,代码排列按顺序。
4、Css属性的顺序:以字母顺序写属性。
3)提高渲染速度
1、不要使用低效率的选择器:{}#zishu{} 或者指定标签
2、不要使用滤镜
3 、少用绝对定位
4、平铺的背景图片尽可能大一些
5、让属性尽量多的去继承
6、不要放置空的或者没有的class在html中

减少HTTP请求
1、一个网站中,每个页面对应一个css文件?
对于大站,为了规范和方便后期维护可以将一些常用属性设置放置在一个css文件,将页面结构内容放在一个css文件中,如(main.css、style.css)但是对于中小型网站来说,一个css文件足矣。
2、Css sprite( css精灵或称css雪碧)
通过将网页中用到的所有背景图片(或所有不需要做链接的图片)置于一张图片之上。通过css的背景中background-position属性来定位。注意平铺的背景图片与不平铺的要分别集合到不同的图片上。

Html结构语义化标签的使用
1、避免使用不合理的html元素。
类似<font>标签或者无意义的元素比如<br />或者使用 实现留白等来冒充一个貌似合理但实际上不能使用的结构
“根据元素的含义使用元素,而不是因为它们看起来像什么。”结构元素应该只用于传达结构,而不要强制用于表现。
2、避免标记中的常见错误
classitis:代码标记的麻疹 (即每个标签中都引用class)
divtis:当使用div来替换那些完好的(或者更适当的)元素的时候,divtis就出现了。

其他
在链接后面使用斜线。
当浏览器打开一个像“http://www.domain.com/about”这样的链接时,它需要计算这个地址包含哪些文档或者网页,浪费时间。如果在链接后面使用斜线,变成“http://www.domain.com/about/”,浏览器就会识别出这个地址是指向一个文件夹的,减少加载时间

对网站的文件和资源进行优化
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复