详解Next.js页面渲染的优化方案


Posted in Javascript onJanuary 27, 2019

在过去一年的工作中我所使用的js框架是Next.js,尽管这个框架在前后端同构方面有着绝佳的体验,但是当页面js文件过大以及preload过多的时候还是会出现页面跳转卡顿和渲染阻塞等比较糟糕的用户体验问题。由于我之前既不知道这个框架的工作原理,自然也就不知道如何去优化它。乘着农历春节前工地活少所以稍微研究一下。

第一个问题:宣称前后台同构的Next.js为何会出现卡顿现象?

Next.js 中的特有生命周期hook 函数 getInitialProps会在页面渲染的时候判断浏览器是否为首次渲染,如果是则是服务端渲染网页,如果不是则是客户端渲染。在页面首次渲染的时候,会加载 commons.xxxxx.js 文件,这个文件中打包了react.js、next.js 以及相关的框架代码也就是如果是客户端渲染打包后的 commons.xxxxx.js 负载了整个前端的页面逻辑,这个文件相对比较大一般会在180kb以上。如果仅从文件大小角度来说,这个文件并不算大,就算利用了next.js 的 preload机制把文件大小放到300kb以上,也还行。但是一旦这个文件阻塞了页面的渲染,页面的渲染要等到 commons.xxxxx.js 加载完毕之后才渲染,那问题就来了。

在next7中使用的打包工具是webpack4,这在打包和加载过程有一个比较蠢的机制(或许仅仅是我个人观点),那就是但凡React DOM上绑定了style 这些DOM都不会在服务端渲染出来,而是打包抽离成一个小的js文件,在 commons.xxxxx.js 加载完毕之后,再加载这个js,将DOM和内联style渲染到HTML。这就在某种程度上导致了next.js首次渲染是SSR失效了,更为糟糕的是卡顿感十足。

可能有人会说,那就不要写内联style不就好了。但是事实是在大量的后台数据动态渲染页面和用户自定义页面的情况下,不可能做到完全不写内联样式,而去傻乎乎地写一堆className。

所以我们要解决一个问题那就是如何保证,内联style的react dom在首次渲染页面的时候是服务器端直接输出后扔给后台,而不是让 commons.xxxxx.js 卡卡卡卡卡,然后砰的一下蹦出来。

要解决上一个问题,首先要了解Next.js是如何渲染页面的?

在Next.js的规则中,所有页面级的代码都是写在pages文件夹中,比如/pages/home:

export default () => (<div>你瞅啥?这是home页</div>)

而其框架内置的Document组件中,已经帮开发者配置好传统的HTML文件的 <head> , <body> 这些标签作为静态资源的外壳。Document组件中有一个 renderPage() 方法,如果代码正常运行,该方法就会将pages文件夹中的代码和它外部同步渲染到浏览器中。如果开发者希望自定义Document组件只需添加 /pages/_document.js 文件即可。

renderPage()本质是一个回调函数,它的作用只有一个那就是 执行React源码中渲染逻辑 同步加载到Next.js的Document组件中形成DOM节点。

import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
 static getInitialProps ({ renderPage }) {
  // renderPage()位于next.js特有生命周期函数getInitialProps中。 
  return renderPage();
 }

 render () {  
  return (
   <html>
    <Head>
     <title>没见过标题党吗?</title>
    </Head>
    <body>
     <Main />
     <NextScript />
    </body>
   </html>
  )
 }
}

服务端渲染样式

为了能让服务器端渲染样式,我们首先得先做两件事:

  1. 在页面首次加载的时候,也就是所谓的SSR.能让 renderPage 方法在服务器端就能对React Dom进行解析,让HTML归HTML,CSS归CSS;
  2. 能让 Document 组件在页面切换时,能及时更新 <head> ,这样不同的页面就能加载自己所需的script,style。

解决方案的登场

隆重介绍神器 styled-components 出场, styled-components 在github上目前为止已经超过1万stars,它的设计初衷在于在服务端渲染的时候,同时渲染出一个ServerStyleSheet,然后把这个ServerStyleSheet送入React DOM树中。它主要就做两件事:

  1. 把组件中 styles 抽离到 <style> 标签中;
  2. 把 <style> 标签放到 <head> 中

下面就是一段如何正确使用ServerStyleSheet的姿势步骤:

import { ServerStyleSheet } from "styled-components";

 static getInitialProps ({ renderPage }) {
  const sheet = new ServerStyleSheet()
  const transform = (App) => {
   return sheet.collectStyles(<App />);   
  }
  const styleTags = sheet.getStyleElement()
  const page = renderPage(transform);
  return { ...page, styleTags };
 }
 
 render(){
   return(
    <html lang="zh-Hans">
    <Head>
     <meta name="viewport" content="initial-scale=1.0, width=device-width" />
     <meta name="description" content="Kanseefoil"/>
     <link rel="shortcut icon" href="/static/favicon.ico" rel="external nofollow" ></link>
     {this.props.styleTags}
    </Head>
    </html>
    );
 }

上面的代码已经完美跟大家展示了如何将内联style抽离出dom,然后通过 <link style> 的方法渲染样式, 那么问题来了,如何在打包解析react dom时,给服务器一个"纯洁、干净、无暇"的DOM呢?

这个时候就需要使用 babel-plugin-styled-components 包,在babel中进行解析。

代码如下:

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
  ]
}

这个时候在去打开next.js页面就会发现,那家伙、那场面渲染速度嗖嗖的。至于负责前端逻辑的 commons.xxxxx.js ,您老人家就安静地慢慢地加载吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
js实现点赞效果
Mar 16 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 #Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 #jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 #jQuery
vue中子组件传递数据给父组件的讲解
Jan 27 #Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 #jQuery
JavaScript中的回调函数实例讲解
Jan 27 #Javascript
You might like
让PHP支持页面回退的两种方法
2008/01/10 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
python实现简单文件读写函数
2021/02/25 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
合同协议书格式
2014/04/18 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
大气污染防治方案
2014/05/19 职场文书