1

页面优化与模块化

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

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

页面优化

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

图片描述

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


寒青
10.4k 声望3.8k 粉丝