从下面的几个方面可以进行页面的优化:

    • 减少请求数
      • 图片合并
      • CSS 文件合并
      • 减少内联样式
      • 避免在 CSS 中使用 import
    • 减少文件大小
      • 选择适合的图片格式
      • CSS 值缩写(Shorthand Property)
      • 文件压缩
    • 页面性能
      • 调整文件加载顺序
      • 减少标签数量
      • 调整选择器长度
      • 尽量使用 CSS 制作显示表现

    减少请求

    请求数与网页加载时长有直接的关系。所以对于图标可以使用 Sprite 来减少小图标的请求数,对于文本则可以通过合并缩小。(避免使用 import 引入 CSS 文件,并且请求是同步请求)

    页面上最大的流量产生与多媒体(视频或图片)所以为了减少文件大小,开发者需要使用合适的媒体格式并对文件进行压缩。

    页面性能

    页面文件的加载顺序自上而下,样式则需要放置于最顶部,脚本则放置于底部(因为 JavaScript 的加载会阻塞页面的绘制)。

    • expression
    • filter .class{filter:alpha(opacity=50)}
    • border-radius
    • box-shadow

    页面中所使用的图片尺子应该与现实尺寸相符否则在图标下载后需要重绘导致性能下降。

    能使用样式(使用 CSS 的类名)实现的交互就不使用脚本(需要重绘导致多次页面渲染)来实现。

    可读性与可维护性

    注释注释注释,在代码中添加注释,利人利己。