页面优化与模块化
这些关于前端优化、模块化的内容,我向来是不会去记的,因为在实际项目中碰到需要性能优化,很自然就会去查找这方面的解决方案。或者说要在编写程序的过程中就要考虑到这些准则。就好像学校里的行为准则从来不去记,也不影响日常生活,主要是本来就有很好的生活习惯,很自然地契合了准则要求。也就是说,在平时的开发过程中养成良好的编码习惯,也能够比准则做得更好。
尽管如此,还是把这些关于准则的内容写下来,等到需要用的时候,拿出来看两眼,熟能生巧是良训啊。
页面优化
页面优化可以提升页面的访问速度从而提高用户体验,优化的页面可以更好的提升
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
与类名。在使用开发中的奇技淫巧的适合需要深思是否需要使用。模块化的制作页面和样式,提高可复用性并减少文件大小。
在代码中添加注释,利人利己。
规范与模块化
规范
规范的制订应从下面的几个方面来开始考虑:
- 文件规范
- 注释规范
- 命名规范
- 书写规范
- 其他规范
文件规范
文件规范又可以从三个方面入手,分类,引入,以及文本本身的内容。
- 分类(分类可分为通用类和业务类。通用类有第三方的库,团队开发的通用模块或者通用样式。业务类则有不同业务所对应的特定模块。)
-
引入
-
CSS
(引入文件则需尽少的使用行内样式) -
JavaScript
(文件名的约束,以及编码设置通常使用utf-8
)
-
注释规范
注释可使用块状,单行注释和行内注释,需要统一缩进等细节要求。
命名规范
例如 CSS
选择器的命名规范:
-
分类命名(例如
g-header
来给布局类的样式设置命名空间来防止样式污染,m-header
来制定模块类的样式) - 命名格式(大小写的规定,建议使用小写并使用 - 分隔,也许控制选择器的长度,避免过长的样式选择器名称,但不可失去选择器语义)
- 语义化命名(以内容的语义来给选择器命名)
书写规范
这里使用 CSS
的书写规范来做示例,可以参考下面的约束:
- 单行与多行(单行与多行的
CSS
书写格式,使用多行!) - 空格与分号(使用空格进行缩进并保留最后一个属性的分号)
- 书写顺序(根据显示的重要性来安排可参照下表)
-
Hack
方式(三思而后行) - 值格式(例如颜色值的格式以及引用中是否使用引号)
其他规范
这里包括有 HTML
以及图片的规范:
-
HTML
- 文档声明
- 闭合
- 属性
- 层级
- 注释
- 大小写
-
图片
- 文件名称(语言以及长度的规范)
- 保留源文件
- 图片合并
模块化
模块化是一系列相关的结果组成的整体,这部分具备独立存在的意义,不单纯只是表现。
在开发模块化时需要注意的一些步骤(以 CSS
模块化为例):
- 为模块分类命名(
m-module-name
) - 以一个主选择器作为开头(模块跟节点)
- 使用以主选择器开头的后代选择器(模块子节点)
模块化有利于多人开发,便于扩展,当然也可以提高代码的可读性与可维护性。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。