现代前端技术解析：前端项目与技术实践

一、前端开发规范

前端通用规范

• 三层结构分离
  • 结构层（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

1. 分析页面脚本执行过程中最好资源的操作
2. 记录页面脚本执行过程中 JavaScript 对象消耗的内存及堆栈的使用情况
3. 检测页面脚本执行过程中 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 地址，便于搜索引擎逐个抓取网站页面