页面优化

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