vue 如何优化首页的加载速度?vue 首页白屏是什么问题引起的?如何解决呢?

333 阅读1分钟

什么是 SSR

SSR 顾名思义就是 Server-Side Render, 即服务端渲染。原理很简单,就是服务端直接渲染出 HTML 字符串模板,浏览器可以直接解析该字符串模版显示页面,因此首屏的内容不再依赖 Javascript 的渲染(CSR - 客户端渲染)。

SSR 的核心优势:

  1. 首屏加载时间:因为是 HTML 直出,浏览器可以直接解析该字符串模版显示页面。
  2. SEO 友好:正是因为服务端渲染输出到浏览器的是完备的 html 字符串,使得搜索引擎 能抓取到真实的内容,利于 SEO。

SSR 需要注意的问题:

  1. 虽然 SSR 能快速呈现页面,但是在 UI 框架(比如 React)加载成功之前,页面是没法进行 UI 交互的。
  2. TTFB (Time To First Byte),即第一字节时间会变长,因为 SSR 相对于 CSR 需要在服务端渲染出更对的 HTML 片段,因此加载时间会变长。
  3. 更多的服务器端负载。由于 SSR 需要依赖 Node.js 服务渲染页面,显然会比仅仅提供静态文件的 CSR 应用需要占用更多服务器 CPU 资源。以 React 为例,它的 renderToString() 方法是同步 CPU 绑定调用,这就意味着在它完成之前,服务器是无法处理其他请求的。因此在高并发场景,需要准备相应的服务器负载,并且做好缓存策略。、
  • 优化 webpack 减少模块打包体积,code-split 按需加载
  • 服务端渲染,在服务端事先拼装好首页所需的 html
  • 首页加 loading 或 骨架屏 (仅仅是优化体验)