Frontend - 工程化

[tomoya06]

性能监测

渲染时间点

白屏时间 First Paint 首次绘制 aka. FP

标记浏览器渲染任何在视觉上不同于导航前屏幕内容的时间点；仅有一个 div 根节点。

• 通常认为浏览器开始渲染 或者解析完 的时间是白屏结束的时间点。
• 记录方式：performance.timing.navigationStart 或在<header>后添加<script>，输出此刻时间

首屏时间 First Contentful Paint 首次内容绘制 aka. FCP

标记的是浏览器渲染第一帧内容 DOM 的时间点；包含页面的基本框架，但没有数据内容。

常见的计算方式有：

1. 以首屏中最慢的图片或iframe加载完成时间作为首屏完成时间；
2. 根据html顺序解析的特性，在html末尾插入<script>，记录此刻时间

First Meaningful Paint 首次有效绘制 aka. FMP

标记主角元素渲染完成的时间点；包含页面所有元素及数据。

应用

以Vue为例，在其生命周期中，mounted 对应的是 FCP，updated 对应的是 FMP。

Chrome Performance

在Chrome调试工具中Performance可以提供详细的加载分析，包括FP/FCP时间点以及DOMContentLoaded/onload事件触发时间点。

[tomoya06]

SEO

搜索引擎优化（英语：search engine optimization，缩写为SEO），是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。

优化方式

• 关键词的使用：合理地设置 title、description、keywords的值。
• 代码规范：尽量使用语义化的标签，让搜索引擎更容易理解网页。
• 内容生成技巧：不要使用js输出，因为爬虫不会执行js获取内容；不要使用iframe，搜索引擎不会抓取iframe中的内容；
• 图片注意事项：非装饰图片需要加 alt 关键字。
• 网站速度：网站速度是搜索引擎排序的一个重要指标，提高网站相应速度有助于SEO。

网站重定向对SEO的影响

主要是区分永久性重定向301与临时重定向302对SEO的影响。参考HTTP状态码一节

Vue项目的SEO

浏览器渲染的Vue项目，页面基本全靠JS执行渲染。需要考虑使用服务端渲染aka. SSR来做SEO。

[tomoya06]

各端渲染方案

定义

本段参考掘金博客

• 客户端渲染：用户访问 url，请求 html 文件，前端根据路由动态渲染页面内容。关键链路较长，有一定的白屏时间；
• 服务端渲染：用户访问 url，服务端根据访问路径请求所需数据，拼接成 html 字符串，返回给前端。
• 预渲染：构建阶段事先生成匹配预渲染路径的 html 文件，每个需要预渲染的路由都有一个对应的 html文件；与服务端渲染区别在于html文件的生成时机。

以vue-router为例，使用服务端渲染时必须使用history模式，因为hash模式下url的hash值不会被传到服务器。

比较

共同点

针对单页应用，服务端渲染和预渲染共同解决的问题：

• SEO：单页应用的网站内容是根据当前路径动态渲染的，html 文件中往往没有内容，网络爬虫不会等到页面脚本执行完再抓取；
• 弱网环境：当用户在一个弱环境中访问你的站点时，你会想要尽可能快的将内容呈现给他们。甚至是在 js 脚本被加载和解析前；
• 低版本浏览器：用户的浏览器可能不支持你使用的 js 特性，预渲染或服务端渲染能够让用户至少能够看到首屏的内容，而不是一个空白的网页。

预渲染能与服务端渲染一样提高 SEO 优化，但前者比后者需要更少的配置，实现成本低。弱网环境下，预渲染能更快地呈现页面内容，减少页面可见时间。

预渲染不适合的场景：

• 个性化内容：对于路由是 /my-profile 的页面来说，预渲染就失效了。因为页面内容依据看它的人而显得不同；
• 经常变化的内容：如果你预渲染一个游戏排行榜，这个排行榜会随着新的玩家记录而更新，预渲染会让你的页面显示不正确直到脚本加载完成并替换成新的数据。这是一个不好的用户体验；
• 成千上万的路由：不建议预渲染非常多的路由，因为这会严重拖慢项目的构建进程。

骨架屏

骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。

实现原理：对于整个页面的骨架屏实现，可以通过预渲染、在HTML中插入骨架屏的实现代码，加载完真实数据并完成真实模块的渲染之后，再把骨架屏的部分屏蔽掉。

以YouTube首页为例，其返回的html文件中就已经包含骨架屏，可以渲染出页面轮廓。其后再发起更多AJAX请求来填充数据。

[tomoya06]

移动端适配

user-agent返回不同路由

1. nginx实现

方法参考掘金博客

可以在nginx配置文件中设置判断$http_user_agent，若以移动设备标签开头，则路由重写至移动端路由。配置方法参考nginx篇

2. js实现

方法参考这篇博客

原理类似，js通过navigator.userAgent来判断ua