- 为什么要进行页面优化?
- 三个原因:
- 对于用户而言,进行页面优化可以提升网页响应速度,改善用户体验
- 对于浏览器而言,对搜索引擎友好(SEO)
- 对于开发人员而言,进行页面优化可以提高代码的可读性、可维护性
- 页面优化包括哪些方面?
- 减少页面请求
- 减少文件大小
- 如何进行页面优化?
- 如何减少页面请求?
- 合并图片:使用CSS sprites(CSS 精灵)技术,将多张图片整合到一张图片中,即将多个请求变为一个请求,再利用CSS(的background-image、background-repeat、background-position的组合)进行背景定位:
- 合并CSS文件:
- 多个CSS文件合并为一个
- 少量CSS样式内联
- 避免使用import的方式引入CSS文件:每个import语句都会产生一个请求
- 如何减少文件大小?
- 减小图片大小
- 选择合适的图片格式
- 如果需要半透明的图片,如一些小图标,那就选择.png图片
- 如果图片色彩绚丽、尺寸大,就选择.jpg图片(.jpg图片会对图片进行压缩)
- 压缩图片:使用图片压缩工具(ImageOption、...)对图片进行无损或有损压缩
- 减小CSS文件大小
- css值缩写:margin、padding、border、boredr-radius、font、background
- 省略值为0的单位
- 颜色值最短表示
- css选择器合并
- 使用工具(cssmin、...)压缩文件
- 如何优化页面性能?
- 合理的页面加载顺序
- 建议将CSS文件放在<head>中,这样解析html时会先解析CSS,再解析标签时就可以把样式直接应用在标签上,这样用户会看到顺畅的页面。
- 建议将js文件放在body的底部,因为js的加载和执行会阻塞其他资源的加载、页面的渲染,而且js的很多处理逻辑也需要等到页面加载完成才去处理。
- 减少标签数量:没用作用的标签不要写,比如不要随意加<div>
- 选择器长度要尽量短:选择器很长时一方面会影响到CSS查找元素的性能,另一方面也会使文件变大。
- 避免使用耗性能属性:expression、和效果相关的一些属性(border-radius、box-shadow、gradients、filter)。
- 给图片设置宽高:一定要设置宽高,而且宽高要正好,否则会引起页面的回流和重绘,重新渲染图片会耗损很多时间。如需要一个400*300的图片,就不要不设置图片宽高,也不要在<img>中设置图片大小为800*600(导致图片缩放),因为浏览器在解析html代码时,有可能在图片下载完成前就会对页面布局进行定位,如果没有给图片设置宽高或者设置的宽高不一样时,那么浏览器在图片下载完成时就需要回流和重绘。
- 所有表现用CSS实现,不要使用js(因为js每次都要重绘列表,通过css可以把多次渲染变成一次渲染)
- 如何提高代码的可读性、可维护性?
- 制定规范,不同的开发人员按照统一的规范编写代码
- 使用语义化的标签,标识、变量的命名做到见名知意
- 添加注释
- 模块化开发
- 尽量避免使用Hack(为了兼容不同浏览器,需要Hack一些代码)。如果有其他方法可以避免Hack,优先选择其他方法;如果没有,或避免的代价比较大(需要写大量html、css),则用Hack。使用Hack时要尽量使用统一的语法,如Hack IE7用*,Hack IE6用_
- 什么是CSS Hack? 指针对不同的浏览器写不同的CSS