一、前端开发规范
前端通用规范
- 三层结构分离
- 结构层(HTML)、表现层(CSS)、行为层(JS)
- 缩进
- 推荐使用 4 个空格缩进
- 内容编码
- 在 HTML 文档中用
- 大小写
- 小写:HTML 标签、属性、样式名、规则
- 小驼峰:JS 命名
- 代码单行长度限制
- 不用超过 120 字符(或 80 字符)
- 注释
- 添加必要的代码注释(单行注释、段注释)
- 行尾空格与符号
- 删除行尾空格和多余的符号
前端 HTML 规范
-
文档类型定义
- 统一使用 HTML5 的标准文档类型来定义
- 不使用 HTML4.01 的 DTD 定义
-
head 内容
- 必须定义 title、keyword、description
- 移动端要添加 viewport 禁止页面缩放
- 建议加上基本的社交 RICH 信息
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta itemprop="name" content="页面标题"> <meta name="description" itemprop="description" content="页面内容描述"> <meta itemprop="image" content="http://xxx.com/logo.png">
-
省略 type 属性
- 引入 CSS 或 JavaScript 时,可以省略 type 属性不写
-
必须使用双引号包裹属性名
- 有利于区分标签的属性名和属性值
-
属性值省略
省略非必要的属性值:readonly、disabled、required -
嵌套
- 不允许在 inline 元素中包含 block 元素
-
标签闭合
在 HTML5 中自闭合标签可以不添加 / -
使用 img 的 alt 属性
-
使用 label 的 for 属性
-
按模块添加注释
-
标签元素格式
-
语义化标签
前端 CSS 规范
- CSS 引用规范
- 用 link 引入外部样式文件
- 强烈不建议在标签元素中使用内联样式
- 样式的命名规定
- 由单词、中划线组成
- 简写方式
- 属性值为 0 时可以不写单位
- 整数部分为 0 的小数可以省略 0(0.6 => .6)
- 颜色代码用小写,尽量缩写成三位
- 属性书写顺序
- 先写布局属性,在写内容属性
- CSS 高效实现规范
- 尽量避免标签名、id、class组合的选择器
- 避免继承属性的重复定义
- 使用预处理脚本编码开发
ES5 常用规范
- JS 语句后面统一加上分好
- 在所有运算符、数字、英文单词之间加上空格
- 在代码块后保留空行
- JS 的字符串最外层统一使用双引号
- 变量命名
- 标准变量用驼峰式
- 常量全大写,下划线
- 对象
- 对象属性名不加引号
- 属性后不能加逗号
- 大括号
- 条件判断
- 使用 typeof 对 ‘undefined’ 判断
- 用 === 和 !==
- 不在条件语句或循环语句中声明函数
ES6+ 常用规范
- 使用 ES6 的变量声明关键字 let
- 字符串拼接使用字符串模板完成
let str = `<h1> ${name} </h1>
<p>aaaa</p>
`;
- 解构赋值尽量使用一层解构
- 数组拷贝推荐使用
...
实现 - 数组循环遍历使用
for...of
,不推荐forEach
、map
、简单循环 - 尽量使用 constructor 进行属性成员变量赋值
- 用 yield 时用
try...catch
包裹 - 推荐使用 promise
- 避免使用迭代器
- 合理使用 Generator,推荐使用 await/async
前端防御性编程规范
- 对外部数据的安全检测判断
-
定义默认内容
<div>{{data.info && data.info || '默认内容'}}
-
对后端数据先做检验再处理
-
- 规范化的错误处理
- error(exception) {}
- try … catch
二、前端组件规范
UI 组件规范
- UI 层风格统一化
- 增加 UI 层复用性
- 符合用户的体验习惯
- 增加开发规范的统一性
- 考虑
- 统一的布局方案
- 基础 UI 结构和样式实现
- 组件化 UI 结构和样式实现
- 响应式布局
- 扩展性
模块化规范
AMD(异步模块定义)
- define、require 方法
- 主模块处理函数在文件加载完成之后执行
CMD(通用模块定义)
- seajs.use
※ CommonJS
- 使用 require 进行模块引入
- 使用 module.exports 来定义模块导出
import / export
- ES6 定义的 JS 模块引用方式
项目组件化设计规范
Web Component 组件化、MVVM 框架组件化、Visual DOM 组件化
三、自动化构建
自动化构建的目的
模块化引入、依赖分析、资源合并、压缩优化、文件嵌入、路径替换、生成资源包
自动化构建的原理
读取入口文件 -> 分析模块引用 -> 按照引用加载模块 -> 模块文件编译处理 -> 模块文件合并 -> 文件优化处理 -> 写入生成目录
四、前端性能优化
前端性能测试
Performance Timing API
用于记录页面加载和解析过程中关键时间点的机制,从而得到页面每个过程所消耗的时间
几个关键数据:解析 DOM 树耗时、load 事件耗时、整个加载过程耗时
Profile 工具
用于测试页面脚本运行时系统内存和 CPU 资源占用情况的 API
- 分析页面脚本执行过程中最好资源的操作
- 记录页面脚本执行过程中 JavaScript 对象消耗的内存及堆栈的使用情况
- 检测页面脚本执行过程中 CPU 占用情况
页面埋点计时
在需要记录的操作执行前后保存时间戳,通常在移动端页面中使用
资源加载时序图
通过时序图可以确保文件加载顺序的情况,查看是否存在十分耗时的阻塞页面展示的资源加载
桌面浏览器前端优化策略
网络加载类
- 减少 HTTP 请求次数:尽量合并资源,避免重复资源
- 减少 HTTP 请求大小:压缩资源,移除注释
- 将 CSS 或 JavaScript 放到外部文件中,避免使用
<style>
或<script>
标签直接引入 - 避免页面中空的 href 和 src
- 为 html 内容指定 Cache-Control 或 Expires,缓存避免频繁向服务器发送请求
- 合理设置 Etag 和 Last-Modified,避免下载未修改的文件
- 减少页面重定向
- 使用静态资源分域存放来增加下载并行数
- 使用静态资源 CDN 来存储文件
- 使用 CDN Combo 下载传输内容
- 使用可缓存的 Ajax
- 缩小favicon.ico并缓存:一般Web应用的favicon.ico是很少改变的
- 推荐使用异步 JavaScript 资源
- 避免使用CSS import引用加载CSS:因为这样会增加CSS资源加载的关键路径长度,代用
@import
的CSS样式需要在CSS文件串行解析到@import时才会加载另外的CSS文件,大大延后CSS渲染完成的时间
页面渲染类
- 把 CSS 资源引用放到 HTML 文件顶部:优先下载 CSS 并尽早完成页面渲染
- 把 JavaScript 资源引用放到 HTML 文件底部:防止 JavaScript 的加载和解析执行对页面渲染造成阻塞
- 不要在 HTML 中直接缩放图片
- 减少 DOM 元素的数量和深度
- 尽量避免使用
<table>
、<iframe>
等慢元素 - 避免使用 CSS 表达式和 CSS 滤镜
移动端浏览器前端优化策略
网络加载类
- 首屏数据请求提前,避免 JavaScript 文件加载后才请求数据
- 首屏加载和按需加载,保证首屏内容最小化,不超过 1MB
- 模块化资源并行下载
- 将首屏必备的 CSS 和 JavaScript 内联到页面中
- meta dns prefetch 设置 DNS 预解析:让浏览器提前解析获取静态资源的主机IP
- 资源预加载
- 合理利用 MTU 策略:TCP网络传输最大传输单位(MTU)为 1500B,即一个RTT(网络请求往返时间)内可以传输的数据量最大为 1500 字节,因此尽量保证页面HTML内容控制在 1KB 内
缓存类
- 合理利用浏览器缓存:在移动端可以使用 localStorage 来保存 Ajax 的返回数据
- 资源离线方案
- 尝试使用 AMP HTML:使用 AMP Component 中的元素来代替原始的页面元素进行直接渲染
图片类
- 图片压缩处理
- 使用较小的图片,合理使用 base64 内嵌图片:较小的图片可以转化为 base6 编码嵌入到 HTML 页面或 CSS 中,大于 2KB 不推荐使用 base64
- 使用更高压缩比格式的图片:如 webp
- 图片懒加载
- 使用 Media Query 或 srcset 根据不同屏幕加载不同大小的图片
- 使用 iconfont 代替图片图标
- 定义图片大小限制
脚本类
- 尽量使用 id 选择器:因为 id 选择器速度最快
- 合理缓存 DOM 对象
- 页面元素尽量使用事件代理,避免直接事件绑定:使用事件代理可以避免对每个元素都进行绑定,并且可以避免出现内存泄漏及需要动态添加元素的事件绑定问题
- 使用 touchstart 代替 click:touchstart 和 click 事件触发时间之间存在300毫秒的延时
- 避免 touchmove、scroll 连续事件处理:需要对这类可能连续触发回调的事件设置事件节流,例如设置每隔 16ms 才进行一次事件处理
- 避免使用 eval、with,使用 join 代替连接符 +,推荐使用 ES6 的字符串模板
- 尽量使用 ES6 的特性来编程
渲染类
- 使用 Viewport 固定屏幕渲染,可以加速页面渲染内容:禁止缩放
- 避免各种形式重排重绘
- 使用 CSS3 动画,开启 GPU 加速
- 合理使用 Canvas 和 requestAnimationFrame,尽量避免直接使用 setTimeout、setInterval 等方式处理连续动画
- SVG 代替图片:SVG 格式内容更小,且 DOM 结构方便完整
- 不滥用 float:使用float的元素布局计算比较消耗性能
- 不滥用 web 字体和过多的 font-size 声明
架构协议类
- 尝试使用 SPDY 和 HTTP2:SPDY基于TCP,对HTTP的增强版(多路复用,请求优先级,HTTP报头压缩)
- 使用后端数据渲染
- 使用 Native View 代替 DOM 的性能劣势
!!在优化的同时考虑性价比,兼顾性能、代码结构、维护成本等各个方面,而不要一味地追求极致的优化!!
五、前端用户数据分析
用户访问统计
- PV:一天内页面被访问总次数(每次刷新记一次)
- UV:一天内访问页面的不同用户个数
- VV:用户从进入网站到最终离开网站记一次
- IP:一天内访问网站的独立 IP 数
用户行为分析
- 页面点击量,判断用户对哪一部分内容感兴趣
- 用户点击流分析,统计用户操作的顺序
- 用户访问路径分析
- 用户点击热力图,统计页面区域内容的关注度
- 用户转化率与导流转化率
- 用户转化率 = 通过该页面注册的用户数 / 页面 PV
- 导流转化率 = 通过源页面导入的页面访问 PV / 源页面 PV
- 用户访问时长、内容分析
前端日志上报
浏览器提供了 try ... catch
和 window.onerror
两种机制来帮助我们获取用户页面的脚本错误信息
六、前端搜索引擎优化基础
title、keywords、description
- 有助于搜索引擎抓取网页内容,其中 title 的权重最高,keywords 相对权重较低
- 多个 title 值使用分隔符(’ _ ‘、’ - ‘、’ ‘、’ , '),确保每个页面的 title 是对一无二的
语义化标签
- 使用具有语义化的 HTML5 标签
- 建议每个页面都有一个唯一的 H1 标题
<img>
添加 alt 属性
URL 规范化
- 301 跳转:如果URL发生改变,一定要使旧地址301指向新的页面,否则搜索引擎会把这个当成死链处理
//:domain.com/index.html
//:domain.com/index.html?from=123
//:domain.com/index.html?form=456
可以在 <head>
上加上 canonical 声明,告诉浏览器将按照这个href进行收录:
<link rel="cononical" href="//:domain.com/index.html" />
robots
将robots.txt放置站点根目录,禁止抓取网站某些内容
sitemap
sitemap 格式分 HTML 和 XML 两种,命名为 sitemap.html 或 sitemap.xml,作用是列出网站所有 URL 地址,便于搜索引擎逐个抓取网站页面