使用框架的问题

下载Vue.js

执行Vue.js

生成HTML页面(首屏显示,依赖于vue.js的加载)

以前没有前端框架时,用jsp/php在服务器端进行数据的填充,发送给客户端就是已经填充好的数据的HTML。首屏就没有问题

现在尼,使用JQuery异步加载数据,使用React和Vue前端框架,但是需要等待框架加载出来,首屏才显示,首屏渲染有问题,首屏性能会下降。所以需要想办法,在vue.js层面进行首屏的优化。

多层次的优化方案

  • 构建层模板编译。vue2.0将Vue拆成runtime和compile两个包,在webpack构建的时候,统一将工程的所有template相关的模板语法,在构建的时候编译成runtime可以执行的代码。在浏览器执行的过程中,就不需要再进行模板编译的过程。
  • 数据无关的页面做一个prerender。用户营销页面,所有用户看到的页面都是一样的,那么将这个页面在构建层完全执行掉,render掉,生成一个直出的HTML。那么在浏览器端不需要vue.js。
  • 服务端渲染。像用户中心这个页面,在服务端拿到这个个人中心的数据,在服务端将这个页面渲染掉,那么在浏览器得到的就是直出的HTML,在浏览器端就可以直接渲染页面。

七、SSR(服务端渲染)的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染(个人博客二)

    缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

  2. 实现ssr服务端渲染

    前言 前段时间寻思做个个人网站,然后就立马行动了.  个人网站如何实现选择什么技术方案,自己可以自由决定.  刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的.  所以就自己造 ...

  3. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染

    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...

  4. vue ssr服务端渲染

    SSR:Server Side Rendering(服务端渲染) 目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容 ...

  5. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

  6. 实现ssr服务端渲染demo

    最近在研究SSR服务器端渲染,自己写了的小demo. 项目布局 ├── build // 配置文件 │   │── webpack.base // 公共配置 │   │── webpack.clien ...

  7. Vue(三十二)SSR服务端渲染Nuxt.js

    初始化Nuxt.js项目步骤 1.使用脚手架工具 create-nuxt-app 创建Nuxt项目 使用yarn或者npm $ yarn create nuxt-app <项目名> 注:根 ...

  8. Vue(服务端渲染)

    一.前言 1.服务端渲染图解                                                 2.简介服务端渲染                             ...

  9. 教你如何在React及Redux项目中进行服务端渲染

    服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...

  10. [Next] 服务端渲染知识补充

    渲染 渲染:就是将数据和模版组装成 html 客户端渲染 客户端渲染模式下,服务端把渲染的静态文件给到客户端,客户端拿到服务端发送过来的文件自己跑一遍 js,根据 JS 运行结果,生成相应 DOM,然 ...

随机推荐

  1. Spinner 通过XML形式绑定数据时 无法从String.xml中读取数组

    在android应用程序中,通过XML形式给Spinner绑定数据,如果把数组放在系统的string.xml文件里,那么就有可能在运行时无法找到,导致程序异常结束,解决方法是自建一个XML文件来存放数 ...

  2. 【总结整理】javascript的函数调用时是否加括号

    javascript的函数调用时是否加括号 if(event.preventDefault){ event.preventDefault(); if判断条件里面不要加括号,不加括号是应该以属性形式,i ...

  3. JSP相关背景

    -----------------siwuxie095                             Sun Microsystems             SUN 即 Stanford ...

  4. Angular09 数据绑定、响应式编程、管道

    1 数据绑定的分类 1.1 单向数据绑定 1.1.1 属性绑定 -> 数据从组件控制类到组件模板 DOM属性绑定 HTML属性绑定 1.1.2 事件绑定 -> 数据从组件模板到组件控制类 ...

  5. 1、linux-wget

    1.常用下载与参数 wget + 空格 + 要下载文件的url路径 例如: # wget linuxsense.org/xxxx/xxx.tar.gz">http://www.linu ...

  6. product of大数据平台搭建------CM 和CDH安装

    一.安装说明 CM是由cloudera公司提供的大数据组件自动部署和监控管理工具,相应的和CDH是cloudera公司在开源的hadoop社区版的基础上做了商业化的封装的大数据平台. 采用离线安装模式 ...

  7. mooon模板的automake、autoconf、m4和libtool版本信息

    autoconf --version autoconf (GNU Autoconf) 2.59 automake --version automake (GNU automake) 1.9.6 m4 ...

  8. matlab 矩阵运算技巧

    1.a=a(:) 作用:将矩阵转化成列向量 a=[a11 a12 a13                      a=[a11 a21 a12 a22 a13 a23]^T a21 a22 a23] ...

  9. asp.net刷新本页面的六种方法总结

    第一: private void Button1_Click( object sender, System.EventArgs e )   {     Response.Redirect( Reque ...

  10. EasyOffice-.NetCore一行代码导入导出Excel,生成Word

    简介 Excel和Word操作在开发过程中经常需要使用,这类工作不涉及到核心业务,但又往往不可缺少.以往的开发方式在业务代码中直接引入NPOI.Aspose或者其他第三方库,工作繁琐,耗时多,扩展性差 ...