现代前端技术解析-第5章 前端项目与技术实践（四）

《现代前端技术解析》第5章阅读笔记（四）

---

• 笔记章节目录

• 第1章 Web前端技术基础
• 第2章 前端与协议
• 第3章 前端三层结构与应用
• 第4章 现代前端交互框架
• 第5章 前端项目与技术实践
  • 一（5.1 前端开发规范）
  • 二（5.2 前端组件规范 & 5.3 自动化构建）
  • 三（5.3 自动化构建）
  • 四（5.5 前端用户数据分析 & 5.6 前端搜索引擎优化基础 & 5.7 前端协作）
• 第6章 前端跨栈技术
• 第7章 未来前端时代

---

• 2020/02/24

5.5 前端用户数据分析

5.5.1 用户访问统计

（p266 - 267）

• PV（Page View）： 一般指在一天时间之内页面被所有用户访问的总次数。通常用来统计获取关键入口页面或临时推广性页面的访问量或推广效果。因为可以认为的刷新来提升数量，所以单纯靠PV是无法反应页面被用户访问的具体情况。

• UV（Unique View）： 指一天时间之内访问页面的不同用户数。可以认为是前端页面统计中最有价值的统计指标。但一般情况下无法用于精确地统计。所以通常结合PV、UV来一起分析访问情况，如可以对站点的一天新增客数、新访客比率来判断网站用户增长等。

  目前有较多站点的UV是按照一天之内访问目标页面的IP数来计算的，严格来说是不严谨的。为了得到更准确的结果，一般需要结合其他辅助信息来识别不同UV，常用的2种方式：

  • 根据浏览器Cookie和IP统计： 在目标页面打开时添加唯一的Cookie信息，结合IP一起上报。缺点：手动清除Cookie后再次访问会视作第二次。
  • 结合用户浏览器标识userAgent和IP统计： 缺点：IP和userAgent相同的情况也很常见，但是只能算作一次。

• VV（Visit View）： 指网站被用户访问次数的参考数据，通常用户从进入网站到离开网站的整个过程算作一次VV。PV和UV更多是针对单页面进行统计，而VV则是用户访问整个网站的统计指标。

• IP： 是一天时间内访问页面或网站的独立IP数。

---

5.5.2 用户行为分析

（p267 - 270）

用户行为分析能够更加直接反应网页内容是否受用户喜欢或满足用户需求的一个重要指标，用户在页面上的操作行为有很多种，每种操作都可能对应页面上不同的展示内容。如果我们能知道用户浏览目标页面时所有的行为操作，一定程度上就能知道用户对页面的哪些内容感兴趣，有利于产品内容的调整和改进。

• 页面点击量： 页面点击量用来统计用户对页面某个可点击或可操作区域的点击或操作次数。可以统计出用户对页面上的哪些按钮或区域对应的内容是感兴趣的。

• 页面点击流分析： 点击流用来统计用户在页面中发生点击或操作动作的顺序，可以反应用户在页面上的操作行为。实现：p268

• 用户访问路径分析： 类似页面点击流，记录用户访问不同页面的路径。实现：p268

• 用户点击热力图： 统计用户的点击或操作发生在整个页面的哪些区域位置的一种分析方法，一般是统计用户操作习惯和页面某些区域内容是否受用户关注的一种方式。实现：p269

• 用户转化率与导流转化率： 一般在临时推广页面或拉取新用户宣传页面上比较有用。

  用户转换率 = 通过该页面注册的用户数 / 页面PV

  导流转化率 = 通过源页面导入的页面访问 / 源页面PV

• 用户访问时长、内容分析： 用户访问时长和内容分析是统计用户在某些关键内容页面的停留时间，用来判断用户是否对内容感兴趣。

---

5.5.3 前端日志上报

（p271 - 275）

我们需要在用户使用产品出错时知道有用户出错，而且尽量定位错误。由于运行环境是浏览器端的，因此可以在前端页面脚本执行出错时将错误信息上传到服务器，然后打开服务器收集错误信息并进行分析来提高产品质量。

• 怎么获取错误日志： 浏览器提供了try...catch和window.onerror两种机制来帮助我们获取用户页面的脚本错误信息。（p271 - 273）

  • try...catch局限： try...catch只能在相同作用域下捕捉异常，不同作用域出错时会直接报错，不会捕捉异常，如异步的回调作用域，必须要在异步的回调里面再写一层try...catch。解决方法：对常用异步函数进行简单包装，在内部添加try...catch，调用这些异步函数时调用包装后的函数来实现目标。
  • window.onerror局限： 不能跨域。

• 文件加载失败监控： 静态资源（如img、script）加载失败时，也可以添加异常监控。比如使用readyChange(IE)或者onload(其他浏览器)来判断是否家加载成功。（p274）

5.5.4 前端性能分析上报

（p275）

类似错误日志上报，还可以将用户打开页面的性能进行上报。例如将Performance Timing数据、埋点数据等页面性能统计数据通过JS统一上报到服务器，在服务端分析性能。推荐性能：移动端不超过3秒（推荐1.5秒），PC端不超过1.5秒（推荐1秒）。

---

5.6 前端搜索引擎优化基础

5.6.1 title、keywords、description的优化

（p275 - 277）

title、keywords、description是可以在HTML的meta标签内定义的，有助于搜索引擎抓取到网页的内容。其中，title的权重最高、keywords权重较低。

• title的分隔符：

  • “_”：容易被百度抓取；
  • “-”：容易被谷歌抓取；
  • “,”：容易被英文站点抓取。

• title的优化设置： p276

---

5.6.2 语义化标签的优化

• 使用具有语义化的H5标签结构： 如<header>, <nav>, <aside>, <article>, <footer>等标签。
• 位移的h1标题： 建议每个页面都有一个唯一的<h1>标题，但一般不是网站的标题。<h1> 作为页面的最高层级的标题能够更容易的被搜索引擎收录，并赋予页面相对较高权重的内容描述。

---

5.6.3 URL规范化

（p278 - 279）

• 301跳转： 如果URL发生改变，一定要使旧的地址301指向新的页面，否则搜索引擎会把原有的这个URL当作死链处理，之前完成的页面内容收录权重的工作就都失效了。
• canonical： p279

---

5.6.4 robots

robots.txt是网站站点用来配置搜索引擎抓取站点内容路径的额一种控制方式，放置于站点根目录下。搜索引擎爬取访问网站时会访问robots.txt文件，robots.txt可以指导搜索引擎爬虫禁止抓取网站某些内容或只允许抓取哪些内容，这就保证了搜索引擎不抓取站点中临时或不重要的内容，保证网站的主要内容被搜索引擎收录。

---

5.6.5 sitemap

sitemap格式一般分为HTML和XML两种，命名为sitemap.html或sitemap.xml。作用是列出网站所有的URL地址，方便搜索引擎爬取。

---

5.7 前端协作

p280-283

• 沟通能力和沟通技巧；
• 与产品经理的“对抗”；
• 与后台工程师的合作；
• 与运维工程师的“周旋”；
• 对前端团队的支持。

---

–第5章 前端项目与技术实践 End–