一、CSS 优化


CSS 优化概述

  - CSS优化的作用

      - 减轻服务器压力

      - 缩短服务器响应时间

      - 提高用户的体验度


CSS 优化原则

  - 尽量减少HTTP 请求个数

      - CSS sprites:合并多个背景图像到一个单独图像，然后通过background-p_w_picpath和background-position进行调整

      - Image maps: 结合多个图像到一个单独图像。其总体现规模大致是相当的，但是减少HTTP请求的数量，从而加快页面显示速度

  - 页面顶部引入 CSS

      - 可以提高页面加载速度

      - 样式表放在头部，允许页面逐步呈现

wKioL1byfQ_i2e0ZAABwf8-7KT8761.png

  - 将 CSS 和 JS 放到外部文件中


      - 页面引入外部文件，将由浏览器缓存

      - 后续页会使用缓存


CSS 代码优化

  - 合并样式

      - 提前定义统一的样式

      - 利用 CSS 继承

  - 缩小样式文件

      - 尽量使用简写属性

  - 选择更优的样式属性值

      - 比如，border:none;

  - 减少样式重写

      - 使用 Reset，但并非全局 Reset，比如针对性的清除边距

  - 代码压缩

      - 使用工具压缩 CSS 代码

      - 比如 yuicompressor

  - 不要在 HTML 中缩放图像

      - 图像在网络传输时仍然保持原来图像的字节数

  - 避免空的 src 和 href


总结：本章内容主要介绍了 Css优化(概述、原则、代码优化)