页面优化与模块化

页面优化与模块化

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

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

页面优化

页面优化能够提高页面的访问速度从而提升用户体验，优化的页面能够更好的提高 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）
• 以一个主选择器做为开头（模块跟节点）
• 使用以主选择器开头的后代选择器（模块子节点）

模块化有利于多人开发，便于扩展，固然也能够提升代码的可读性与可维护性。