Open tomoya06 opened 3 years ago
搜索引擎优化(英语:search engine optimization,缩写为SEO),是一种透过了解搜索引擎的运作规则来调整网站,以及提高目的网站在有关搜索引擎内排名的方式。
主要是区分永久性重定向301与临时重定向302对SEO的影响。参考HTTP状态码一节
浏览器渲染的Vue项目,页面基本全靠JS执行渲染。需要考虑使用服务端渲染aka. SSR来做SEO。
本段参考掘金博客
以vue-router为例,使用服务端渲染时必须使用history模式,因为hash模式下url的hash值不会被传到服务器。
针对单页应用,服务端渲染和预渲染共同解决的问题:
预渲染能与服务端渲染一样提高 SEO 优化,但前者比后者需要更少的配置,实现成本低。弱网环境下,预渲染能更快地呈现页面内容,减少页面可见时间。
骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示出页面的大致结构(灰色占位图),在拿到接口数据后渲染出实际页面内容然后替换掉。
实现原理:对于整个页面的骨架屏实现,可以通过预渲染、在HTML中插入骨架屏的实现代码,加载完真实数据并完成真实模块的渲染之后,再把骨架屏的部分屏蔽掉。
以YouTube首页为例,其返回的html文件中就已经包含骨架屏,可以渲染出页面轮廓。其后再发起更多AJAX请求来填充数据。
性能监测
渲染时间点
白屏时间 First Paint 首次绘制 aka. FP
标记浏览器渲染任何在视觉上不同于导航前屏幕内容的时间点;仅有一个 div 根节点。
performance.timing.navigationStart
或在<header>
后添加<script>
,输出此刻时间首屏时间 First Contentful Paint 首次内容绘制 aka. FCP
标记的是浏览器渲染第一帧内容 DOM 的时间点;包含页面的基本框架,但没有数据内容。
常见的计算方式有:
<script>
,记录此刻时间First Meaningful Paint 首次有效绘制 aka. FMP
标记主角元素渲染完成的时间点;包含页面所有元素及数据。
应用
以Vue为例,在其生命周期中,mounted 对应的是 FCP,updated 对应的是 FMP。
Chrome Performance
在Chrome调试工具中Performance可以提供详细的加载分析,包括FP/FCP时间点以及DOMContentLoaded/onload事件触发时间点。