ajax div 赋值重新渲染_优化向：单页应用多路由预渲染指南

883cb0106b7f4001d81270cf561737ee.png

前言

Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一个 html 文件，然后根据访问的 url 来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也给我们带来了许多问题，例如 SEO 不友好、首屏可见时间过长等。服务端渲染(SSR)和预渲染(Prerender)技术正是为解决这些问题而生的。

阅读本文，你能够了解到什么是预渲染、预渲染与服务端渲染的异同以及预渲染在 Vue.js 项目中的使用。

服务端渲染与预渲染

一些概念

  1. 客户端渲染：用户访问 url，请求 html 文件，前端根据路由动态渲染页面内容。关键链路较长，有一定的白屏时间；

  2. 服务端渲染：用户访问 url，服务端根据访问路径请求所需数据，拼接成 html 字符串，返回给前端。前端接收到 html 时已有部分内容；

  3. 预渲染：构建阶段生成匹配预渲染路径的 html 文件(注意：每个需要预渲染的路由都有一个对应的 html)。构建出来的 html 文件已有部分内容。

下图简单展示了客户端渲染、服务端渲染和预渲染的请求流程。

647d66af96456aa1ef953aa25ca75f71.png

本文示例使用 vue-cli 生成，点击这里查看示例。dist 目录是启用了预渲染的打包目录，dist2 目录则是普通客户端渲染的打包目录。通过对比目录中的文件，你可以对预渲染有个初步的了解。若你还是不知道什么是预渲染，不妨先通读全文。

共同点

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

  1. SEO：单页应用的网站内容是根据当前路径动态渲染的，html 文件中往往没有内容，网络爬虫不会等到页面脚本执行完再抓取；

  2. 弱网环境：当用户在一个弱环境中访问你的站点时，你会想要尽可能快的将内容呈现给他们。甚至是在 js 脚本被加载和解析前；

  3. 低版本浏览器：用户的浏览器可能不支持你使用的 js 特性，预渲染或服务端渲染能够让用户至少能够看到首屏的内容，而不是一个空白的网页。

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

不适合的场景

那什么场景下不适合使用预渲染呢：

  1. 个性化内容：对于路由是 /my-profile 的页面来说，预渲染就失效了。因为页面内容依据看它的人而显得不同；

  2. 经常变化的内容：如果你预渲染一个游戏排行榜，这个排行榜会随着新的玩家记录而更新，预渲染会让你的页面显示不正确直到脚本加载完成并替换成新的数据。这是一个不好的用户体验；

  3. 成千上万的路由：不建议预渲染非常多的路由，因为这会严重拖慢你的构建进程。

Prerender SPA Plugin

prerender-spa-plugin 是一个 webpack 插件用于在单页应用中预渲染静态 html 内容。因此，该插件限定了你的单页应用必须使用 webpack 构建，且它是框架无关的，无论你是使用 React 或 Vue 甚至不使用框架，都能用来进行预渲染。本文示例基于 Vue.js 2.0 + vue-router。

下文会从生成项目讲起，然后看下没有配置预渲染前的样子，再配置预渲染进行构建，对比前后的差别。

生成项目

首先生成一个项目并安装依赖。

vue init webpack vue-prerender-demo
cd vue-prerender-demo && npm install复制代码

组件开发过程我们不关注，具体可以查看示例源代码。开发完成视图如下。

6b9830a8aca5a245432b0cf0d9496a7e.png

路由配置

这是一个新闻应用的页面，包括了最新、最热两个列表页和一个文章页。路由配置如下。

new Router({
mode: 'history',
routes: [
    {
path: '/',
component: Home,
children: [
        {
path: 'new',
alias: '/',
component: () => import('@/components/New')
        },
        {
path: 'hot',
component: () => import('@/components/Hot')
        }
      ]
    },
    {
path: '/article/:id',
component: Article
    }
  ]
})复制代码

预渲染的单页应用路由需要使用 History 模式而不是 Hash 模式。原因很简单，Hash 不会带到服务器，路由信息会丢失。vue-router 启用 History 模式参考这里。

History 模式需要后台配置支持，最简单的是通过 nginx 配置 try_files 指令。

location / {
  try_files $uri $uri/ /index.html;
}复制代码

没有配置预渲染前

配置完成后执行构建 npm run build，根据 nginx 配置，现在无论访问哪个路由都会返回 dist/index.html。

访问 / 路由。

51b824b853b9d64585f797a75c598cd2.png

可以看到，在 Fast 3G 网络下，首屏可见时间是 4.34s，页面至少在加载下面文件后才能被看到。

  1. html

  2. app.css - 样式

  3. manifest.js - webpack manifest

  4. vendor.js - 第三方库

  5. app.js - 业务逻辑

  6. 0.js - 路由分包文件

其中 vendor 文件包含了引用的第三方库，文件规模较大。加载文件多，增加了白屏时间。所以，最有效的优化方案是减少首屏依赖文件。这里开始配置预渲染。

预渲染配置

安装 prerender-spa-plugin，安装时件略长，因为其依赖了 phantomjs，请耐心等待。

npm install prerender-spa-plugin --save-dev复制代码

我们只在生产环境中进行预渲染，修改 build/webpack.prod.conf.js，在配置插件的地方加入如下代码。

var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

{
// ...
  plugins: [
// ...
new PrerenderSpaPlugin(
// 输出目录的绝对路径
      path.join(__dirname, '../dist'),
// 预渲染的路由
      [ '/new', '/hot' ]
    )
  ]
}复制代码

实例化 PrerenderSpaPlugin 需要至少两个参数，第一个参数是单页应用的输出目录，第二个参数指定预渲染的路由，这里执行了两个路由 /new 和 /hot。执行构建 npm run build。

预渲染效果

访问 /new 路由。

dd91741b877a3349c4462e5bd0e054f1.png

同样在 Fast 3G 网络下，首屏可见时间缩短至 2.30s。事实上，只要加载 html 和 app.css 文件，页面内容就能看到了。

dist
│  index.html
│
├─hot
│      index.html
│
├─new
│      index.html
│
└─static复制代码

对比构建完成目录，可以发现预渲染的目录多了两个文件 new/index.html, hot/index.html。

查看 new/index.html

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>vue-prerender-demotitle><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><link href="/static/css/app.23611ac69a9fa48640e3bad8ceeab7bf.css" rel="stylesheet"><script type="text/javascript" charset="utf-8" async="" src="/static/js/0.41194d76e86bbf547b16.js">script>head><body><div id="app"><div><div class="mu-appbar mu-paper-1"><div class="left"><i class="mu-icon material-icons">homei>div><div class="mu-appbar-title"><span>新闻span>div><div class="right">div>div>
      ...div>div><script type="text/javascript" src="/static/js/manifest.4410c20c250c68dac5bc.js">script><script type="text/javascript" src="/static/js/vendor.d55f477df6e96ccceb5c.js">script><script type="text/javascript" src="/static/js/app.f199467bd568ee8a197a.js">script>body>html>复制代码

相比 index.html, new/index.html 中的  是有内容的，且  中多了当前路由分包的 js 文件。其余部分跟 index.html 一样。虽然有多个 html，但从 /new 跳转到其他路由时，还是单页内跳转的，不会有新的 html 请求。

根据上面配置的 nginx 规则，路由对应的返回文件分别是：

/ -> index.html
/new -> new/index.html
/hot -> hot/index.html
/article/:id -> index.html复制代码

其中，/new 和 /hot 路由返回的 html 包含了对应路由的内容，从而实现预渲染。没有配置预渲染的路由跟原来一样，还是访问 /index.html，请求脚本，动态渲染。

预渲染达到了类似服务端渲染的效果。区别在于预渲染发生在构建时，服务端渲染发生在服务器处理请求时。

prerender-spa-plugin 原理

那么 prerender-spa-plugin 是如何做到将运行时的 html 打包到文件中的呢？原理很简单，就是在 webpack 构建阶段的最后，在本地启动一个 phantomjs，访问配置了预渲染的路由，再将 phantomjs 中渲染的页面输出到 html 文件中，并建立路由对应的目录。

b76a75dbac99cd2aed6fb27cc18c7b0d.png

查看 prerender-spa-plugin 源码 prerender-spa-plugin/lib/phantom-page-render.js。

// 打开页面
page.open(url, function (status) {
  ...
// 没有设置捕获钩子时，在脚本执行完捕获
if (
    !options.captureAfterDocumentEvent &&
    !options.captureAfterElementExists &&
    !options.captureAfterTime
  ) {
// 拼接 html
var html = page.evaluate(function () {
var doctype = new window.XMLSerializer().serializeToString(document.doctype)
var outerHTML = document.documentElement.outerHTML
return doctype + outerHTML
    })
    returnResult(html) // 捕获输出
  }
  ...
})复制代码

最佳实践

指定捕获钩子

默认情况下 html 会在脚本执行完被捕获并输出。你也可以指定一些钩子，html 将会在特定时机被捕获。

var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

{
// ...
  plugins: [
// ...
new PrerenderSpaPlugin(
      path.join(__dirname, '../dist'),
      [ '/new', '/hot' ],
      {
// 监听到自定事件时捕获
// document.dispatchEvent(new Event('custom-post-render-event'))
        captureAfterDocumentEvent: 'custom-post-render-event',

// 查询到指定元素时捕获
        captureAfterElementExists: '#content',

// 定时捕获
        captureAfterTime: 5000
      }
    )
  ]
}复制代码

预渲染骨架屏

本文实例中更多是变化的数据，时效性要求比较高，不太适合预渲染的场景。如果想用预渲染来减少白屏时间，让页面反馈更及时的话，可以预渲染骨架屏。

<template>
<div>
<new-list v-if="news.length > 0">new-list>
<new-list-skeleton>new-list-skeleton>
div>
template>复制代码

请求 news 数据需要一定时间，所以插件在脚本执行完捕获的一般就是骨架屏。如果你想更灵活地指定捕获时机，可以使用自定义事件钩子，在组件挂载且请求数据前捕获。

{
  mounted () {
document.dispatchEvent(new Event('sketelon-render-event'))
    fetchNews()
  }
}复制代码
39c3efc42b9d326b4f5da63ae06a99bb.png

访问页面时，用户首先看到预渲染的骨架屏(左图)，等待 js 加载完成后，再拉取数据渲染出正确的内容。

代理完整路径

如果你配置了引用资源链接为带域名的完整路径。

// config/index.js

module.exports = {
build: {
    ...
    assetsPublicPath: '//www.example.com/'
  },
  ...
}复制代码

那么构建时需要将域名代理到本地，否则 prerender-spa-plugin 捕获的将会是线上的代码。

127.0.0.1 www.example.com复制代码

预渲染根路由

通常情况下，动态路由如 /users/:id 不会配置预渲染，因为你没法枚举出所有的 User ID。访问动态路由时，服务器会返回根路由 / 的 html，所以根路由也不适合做预渲染。但根路由往往是一个网站的首页，是访问量最大的一个路由。通过一些 nginx 可以解决这个问题。

location = / {
  try_files /home/index.html /index.html;
}

location / {
  try_files $uri $uri/ /index.html;
}复制代码

用户访问 / 路由，实际上是访问了 /home/index.html，用 router 中配置的 /home 作为首页。/index.html 可以作为其他没有匹配到路由的响应。

结语

预渲染是实现成本较低，效果提升明显的性能优化方案。预渲染有它适合的场景，当你的页面内容变化不大，又想让它更快地呈现给用户时，试试预渲染吧。

❤️ 看完两件事

如果你觉得这篇内容对你挺有启发，我想邀请你帮我两个小忙：

  1. 点个「在看」，让更多的人也能看到这篇内容(喜欢不点在看，都是耍流氓 -_-)

  2. 关注公众号「Vue社区」，每周重点攻克一个前端面试重难点，

    公众号后台回复「电子书」即可免费获取 27本 精选的前端电子书！

    回复「100」免费获取 100本 最棒的前端电子书！

9ed847195f30b26a3bd0b8be4aff3272.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/344245.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

fpga运算服务器_一张图了解CPU、GPU、ASIC、FPGA性能、功耗效率、灵活性

fpga运算服务器_一张图了解CPU、GPU、ASIC、FPGA性能、功耗效率、灵活性

​CPU&#xff1a;中央处理器&#xff08;Central Processing Unit&#xff0c;CPU&#xff09;&#xff1a;通用芯片&#xff0c;主要生产厂家如intel、AMD等&#xff0c;用于PC、服务器等领域。CPU作为通用芯片&#xff0c;可以用来做很多事情&#xff0c;灵活性最高&#xf…
阅读更多...
aspen变压吸附塔_空压机科普：吸附式干燥机的结构和原理

aspen变压吸附塔_空压机科普：吸附式干燥机的结构和原理

精彩内容本文以主流的“变压吸附式”干燥机为例进行讲解。“吸附”原理一致&#xff0c;“脱附再生”流程有所区别。从而大致形成以下几种常见类型&#xff1a;●无热吸附式——使用一部分经过干燥后的压缩空气&#xff0c;经降压后吹扫吸附剂&#xff0c;实现吸附剂“再生”&a…
阅读更多...
小学计算机管理,小学计算机室管理制度

小学计算机管理,小学计算机室管理制度

小学计算机室管理制度 (2页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;19.90 积分芹菜小学计算机室制度1、计算机室由上电脑课老师负责管理。2、计算机室是进行电脑技术学习和操作的场所&#xff…
阅读更多...
异形3×3魔方还原教程_【初级篇】（四）最简单的三阶魔方入门教程——中层还原...

异形3×3魔方还原教程_【初级篇】（四）最简单的三阶魔方入门教程——中层还原...

本系列教程适合刚刚接触魔方&#xff0c;又比较有好奇心&#xff0c;是为渴望学会还原魔方&#xff0c;又不想死记公式的人准备的。全部教程只使用三种公式&#xff0c;还原过程以理解为主&#xff0c;公式为辅。第四部分 中层棱块还原4.1 预览中层棱块还原后的效果中层还原以后…
阅读更多...
吞吐量-Corda的故事

吞吐量-Corda的故事

我最近开展了一个针对特定用例的Corda性能项目。 这个项目的结果使我们在170多个节点的网络上一天之内处理了1.15亿个请求。 此外&#xff0c;Corda每秒能够处理6300个请求&#xff0c;确认满足了网络的最高要求。 迄今为止&#xff0c;这是迄今为止已部署的最大的Corda网络&am…
阅读更多...
httpurlconnect设置中文参数_数控三菱CNC机床参数的设置及报警解除！

httpurlconnect设置中文参数_数控三菱CNC机床参数的设置及报警解除！

数控三菱CNC的硬件连接检查与设置执行完毕向系统送电后&#xff0c;显示器上的READY绿灯仍然不亮。而且在〔诊断〕――〔报警〕 画面上显示很多报警内容&#xff0c;哪些是开机时必须设置的呢&#xff1f;又如何解除故障报警呢&#xff1f;1.开机参数1.1 基本参数的设置原装系统…
阅读更多...
计算机如何更新苹果系统,苹果系统怎么更新_苹果电脑mac如何更新升级系统-win7之家...

计算机如何更新苹果系统,苹果系统怎么更新_苹果电脑mac如何更新升级系统-win7之家...

苹果电脑跟windows系统一样&#xff0c;也是会在发布之后不断的推送新版本让用户们进行升级&#xff0c;不仅可以修复bug还可以增加新功能&#xff0c;不过很多用户可能都会有一个疑问&#xff0c;就是苹果系统怎么更新呢&#xff1f;方法并不难&#xff0c;本文给大家讲述一下…
阅读更多...
手术步骤_近视飞秒激光手术和传统Lasik手术比较

手术步骤_近视飞秒激光手术和传统Lasik手术比较

传统LasikLASIK手术操作时分为两个步骤&#xff1a;第一个步骤医生需要制作一个角膜瓣&#xff1b;第二个步骤是掀开角膜瓣&#xff0c;以准分子激光雕琢角膜&#xff0c;进行视力矫正&#xff0c;雕琢完毕后将角膜瓣复位即手术完成。传统的角膜制瓣是用机械式的设备与一个微型…
阅读更多...
jenkins部署java_在Window上使用Jenkins自动部署和上传快照Java工件

jenkins部署java_在Window上使用Jenkins自动部署和上传快照Java工件

jenkins部署java这篇文章将展示如何使用Jenkins Continuous Integration自动执行Java Web应用程序&#xff08;使用MYSQL DB和基于Hibernate ORM在基于REST的Jersey2 Spring环境中开发的学生申请应用程序&#xff09;的部署过程-生成项目&#xff0c;运行单元测试&#xff0c;上…
阅读更多...
苹果电脑怎么更换计算机模式,图文详解苹果电脑如何切换成windows系统

苹果电脑怎么更换计算机模式,图文详解苹果电脑如何切换成windows系统

苹果电脑默认安装的是Mac系统&#xff0c;有的人很喜欢&#xff0c;有一部分人却怎么都用不习惯&#xff0c;觉得windows系统用起来比较顺手。为了能提高办公效率&#xff0c;给苹果电脑安装双系统&#xff0c;那么有什么办法能将苹果电脑切换成windows系统&#xff1f;方法当然…
阅读更多...
input内的字体颜色_嘉兴市硅胶喷涂颜色油订制

input内的字体颜色_嘉兴市硅胶喷涂颜色油订制

嘉兴市硅胶喷涂颜色油订制&#xff0c;博越硅胶服务惠万家&#xff0c;欢迎惠顾。嘉兴市硅胶喷涂颜色油订制&#xff0c; 而它配合硅胶原材制作时是按照相应的比例来进行分配在加上硫化剂的配合才能够得到制作产品的原材料&#xff0c;色母的性能选择也影响着一个产品的性能&am…
阅读更多...
计算机部件动漫,因一个片段肝了整部番，电脑配件上榜，它满屏“虎狼之词”...

计算机部件动漫,因一个片段肝了整部番，电脑配件上榜，它满屏“虎狼之词”...

原标题&#xff1a;因一个片段肝了整部番&#xff0c;电脑配件上榜&#xff0c;它满屏“虎狼之词”现在的动漫行业格外迎来了鼎盛时期&#xff0c;就连以前不被看好的国漫最近几年也是突飞猛进。一部动漫想要有人看&#xff0c;就必定有自己的亮点&#xff0c;甚至一句话一个场…
阅读更多...
获取周一_Ace足球网冬至版周一推介

获取周一_Ace足球网冬至版周一推介

WINTER SOLSTICE冬至冬至又称“冬节”、“贺冬”,华夏二十四节气之一、八大天象类节气之一&#xff0c;与夏至相对。Ace足球网祝全体球友冬至快乐身体健康 波运亨通Lorem Ipsum周一推介微信支付失败&#xff0c;请使用支付宝购买推介后请与Ace客服联系获取推介请勿相信其他客服…
阅读更多...
oauth2和jwt_使用具有OAuth2的Web应用程序和JWT的使用来调用API – WSO2 API Manager

oauth2和jwt_使用具有OAuth2的Web应用程序和JWT的使用来调用API – WSO2 API Manager

oauth2和jwt在这篇文章中&#xff0c;我将分享我在WSO2 API管理器&#xff08;API-M&#xff09;中针对行业中非常常见且有用的场景的经验和理解。 简要地说明以下流程。 公开了一个API&#xff0c;供应用程序开发人员在API管理器的控制下使用&#xff08;这增加了对该API的访…
阅读更多...
android listview 去掉水波纹效果_CocosCreator之分层管理的ListView

android listview 去掉水波纹效果_CocosCreator之分层管理的ListView

前言进入公众号回复listview即可获得demo的git地址。之前写的一篇文章《Creator之ScrollView那些事》中提到了官方Demo中提供的ListViewCtl,只是实现了纵向滑动&#xff0c;没有实现横向滑动。并且建议官方可以把功能做全然后放入组件库中供开发者使用。然后有个牛逼大神说这个…
阅读更多...
小米小爱蓝牙音箱_UG绘制一个小米小爱同学蓝牙音箱

小米小爱蓝牙音箱_UG绘制一个小米小爱同学蓝牙音箱

今天来绘制这么一个小米蓝牙音箱&#xff0c;渲染后的效果如下建模步骤&#xff1a;1打开UG&#xff0c;首先绘制一个直径为135mm的圆拉伸80mm。2在XZ平面上绘制草图&#xff0c;以Y轴旋转360度求差3整体抽壳2mm4继续在拉伸面上绘制这么一个大概的草图5选择草图的小圆&#xff…
阅读更多...
ajax17,17个使用AJAX技术的数据表格控件

ajax17,17个使用AJAX技术的数据表格控件

为了将数据高效的展示出来&#xff0c;数据需要有合适的结构&#xff0c;展现结构设计的越好&#xff0c;用户就越容易理解信息的内容。因此&#xff0c;提高数据的可萃取性和可扫描性非常有意义。表&#xff0c;是一个非常好的数据呈现结构&#xff0c;非常便于人们分析和理解…
阅读更多...
tx2无法识别网络_织点智能算法大牛刘思伟：商品识别在收银结算场景的应用与落地...

tx2无法识别网络_织点智能算法大牛刘思伟：商品识别在收银结算场景的应用与落地...

线下门店消费越快捷、过程越便利&#xff0c;就越能吸引顾客的二次购物。相较于传统的人工收银方式&#xff0c;使用自助收银设备不仅可以减少顾客排队等候的时间&#xff0c;提升收银效率&#xff0c;同时对经营者来说&#xff0c;可以有效降低人工成本。目前&#xff0c;市面…
阅读更多...
windows服务器网站日志,windows服务器网站日志文件

windows服务器网站日志,windows服务器网站日志文件

windows服务器网站日志文件 内容精选换一换华为云帮助中心&#xff0c;为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档&#xff0c;帮助您快速上手使用华为云服务。网页防篡改可实时监控网站目录&#xff0c;并通过备份恢…
阅读更多...
初始化创建画布_使用HTML5，画布和开放数据创建全球降水（雨）可视化

初始化创建画布_使用HTML5，画布和开放数据创建全球降水（雨）可视化

初始化创建画布我目前正在为Three.js编写下一本书&#xff0c;其中一章涉及可视化开放数据。 在寻找可以使用的数据时&#xff0c;我遇到了来自NOAA的一组数据。 通过此站点&#xff0c;您可以以网格格式下载一组全世界的每月降水报告。 因此&#xff0c;我下载了它们&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023