- 为什么要进行页面优化？
- 三个原因：
- 对于用户而言，进行页面优化可以提升网页响应速度，改善用户体验
- 对于浏览器而言，对搜索引擎友好（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