「页面架构」页面优化

页面优化

页面优化可以提升页面的访问速度从而提高用户体验，优化的页面可以更好的提升 SEO 的效果同时也可以提高代码的可读性和维护性。

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

• 减少请求数
  • 图片合并
  • CSS 文件合并
  • 减少内联样式
  • 避免在 CSS 中使用 import
• 减少文件大小
  • 选择适合的图片格式
  • 图片压缩
  • CSS 值缩写（Shorthand Property)
  • 文件压缩
• 页面性能
  • 调整文件加载顺序
  • 减少标签数量
  • 调整选择器长度
  • 尽量使用 CSS 制作显示表现
• 增强代码可读性与可维护性
  • 规范化
  • 语义化
  • 模块化

减少请求

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

减少文件大小

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

页面性能

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

减少标签的数量也可以起到提升性能的作用，缩短 CSS 选择器的层级来提高性能。减少使用消耗性能的样式属性例如下面的这些：

• expression .class{width: expression(this.width > 100?'100px':'auto')}
• filter .class{filter:alpha(opacity=50)}
• border-radius
• box-shadow
• gradients

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

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

可读性与可维护性

开发之前需要明确规范，尤其是对人协作时。使用 HTML5 语义化的标签来制作页面，同样也适用于样式选择器的 ID 与类名。在使用开发中的奇技淫巧的适合需要深思是否需要使用。模块化的制作页面和样式，提高可复用性并减少文件大小。

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