页面优化与模块化

页面优化与模块化

这些关于前端优化、模块化的内容，我向来是不会去记的，因为在实际项目中碰到需要性能优化，很自然就会去查找这方面的解决方案。或者说要在编写程序的过程中就要考虑到这些准则。就好像学校里的行为准则从来不去记，也不影响日常生活，主要是本来就有很好的生活习惯，很自然地契合了准则要求。也就是说，在平时的开发过程中养成良好的编码习惯，也能够比准则做得更好。

尽管如此，还是把这些关于准则的内容写下来，等到需要用的时候，拿出来看两眼，熟能生巧是良训啊。

页面优化

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

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

• 减少请求数

  1. 图片合并
  2. CSS 文件合并
  3. 减少内联样式
  4. 避免在 CSS 中使用 import

• 减少文件大小

  1. 选择适合的图片格式
  2. 图片压缩
  3. CSS 值缩写（Shorthand Property)
  4. 文件压缩

• 页面性能

  1. 调整文件加载顺序
  2. 减少标签数量
  3. 调整选择器长度
  4. 尽量使用 CSS 表现样式

• 增强代码可读性与可维护性

  1. 规范化
  2. 语义化
  3. 模块化

减少请求

请求数与网页加载时长有直接的关系。所以对于图标可以使用 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 与类名。在使用开发中的奇技淫巧的适合需要深思是否需要使用。模块化的制作页面和样式，提高可复用性并减少文件大小。

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

规范与模块化

规范

规范的制订应从下面的几个方面来开始考虑：

• 文件规范
• 注释规范
• 命名规范
• 书写规范
• 其他规范

文件规范

文件规范又可以从三个方面入手，分类，引入，以及文本本身的内容。

• 分类（分类可分为通用类和业务类。通用类有第三方的库，团队开发的通用模块或者通用样式。业务类则有不同业务所对应的特定模块。）

• 引入

  1. CSS（引入文件则需尽少的使用行内样式）
  2. JavaScript（文件名的约束，以及编码设置通常使用 utf-8）

注释规范

注释可使用块状，单行注释和行内注释，需要统一缩进等细节要求。

命名规范

例如 CSS 选择器的命名规范:

• 分类命名（例如 g-header 来给布局类的样式设置命名空间来防止样式污染，m-header 来制定模块类的样式）
• 命名格式（大小写的规定，建议使用小写并使用 - 分隔，也许控制选择器的长度，避免过长的样式选择器名称,但不可失去选择器语义）
• 语义化命名（以内容的语义来给选择器命名）

书写规范

这里使用 CSS 的书写规范来做示例，可以参考下面的约束：

• 单行与多行（单行与多行的 CSS 书写格式，使用多行！）
• 空格与分号（使用空格进行缩进并保留最后一个属性的分号）
• 书写顺序（根据显示的重要性来安排可参照下表）
• Hack 方式（三思而后行）
• 值格式（例如颜色值的格式以及引用中是否使用引号）

其他规范

这里包括有 HTML 以及图片的规范：

• HTML

  1. 文档声明
  2. 闭合
  3. 属性
  4. 层级
  5. 注释
  6. 大小写

• 图片

  1. 文件名称（语言以及长度的规范）
  2. 保留源文件
  3. 图片合并

模块化

模块化是一系列相关的结果组成的整体，这部分具备独立存在的意义，不单纯只是表现。

在开发模块化时需要注意的一些步骤（以 CSS 模块化为例）：

• 为模块分类命名（m-module-name）
• 以一个主选择器作为开头（模块跟节点）
• 使用以主选择器开头的后代选择器（模块子节点）

模块化有利于多人开发，便于扩展，当然也可以提高代码的可读性与可维护性。