预渲染原理
# 预渲染原理
在网络上搜索预渲染的原理,基本都是在说 webpack 构建完成之后,使用 puppeteer 抓取页面,然后在特定时机保存 html 结果。倒也不是说它不正确。但是我比较关心的是预渲染是怎么提升页面性能的?
# 没有想象中的完美
一句话解释就是预渲染只能解决 html 和 css 的问题,不能解决 js 的问题。
实际运行过程是这样的。当用户访问网址时,服务器返回的是带有 html 和 css 内容的 html 文件,这样浏览器就能立即渲染页面了,所以看上去页面加载会很快。
但实际上此时的按钮是没有事件响应的。它必须等到 html 文件中引用的 js 文件加载成功之后,作为一个 SPA 应用,在mount('#app')
之后,会完全替换掉<div id="app"></div>
中的所有内容。此时相应的按钮才会响应点击事件。
总之就是页面实际上渲染了两次。第一次是服务器端返回的完整的 html 内容。第二次是作为普通的 SPA 应用再次渲染。只有第二次渲染之后页面上的按钮才能响应响应的点击事件。
# vue 有没有针对 mount 做优化
我比较好奇就是当el
元素中含有内容时,在mount('#app')
时有没有复用 dom,还是直接替换的。
目前来看是没有这种优化的,应该就是直接替换。
# 对比普通 html 网页
服务器返回 html 内容后,浏览器开始渲染,同时开始下载 js 文件,当 js 文件下载成功后。然后 js 会查找 dom 元素,然后在 dom 上注册事件。
对比来说,这里并不会导致页面重新渲染。
# 对比 SPA 网页
服务器返回 html 内容后,一般这里的 html 内容是一个空壳 html,需要等待 js 下载完成后,js 将动态生成的 dom 写入到<div id="app"></div>
。
对比来说,这里也是只会渲染一次,但是需要等待 js 下载完成之后才能渲染内容。导致页面白屏的时间较长。