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

一、前端开发规范

前端通用规范
  • 三层结构分离
    • 结构层(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,不推荐 forEachmap、简单循环
  • 尽量使用 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 ... catchwindow.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 地址,便于搜索引擎逐个抓取网站页面

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值