详解Next.js页面渲染的优化方案
在过去一年的工作中我所使用的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>
)
}
}
服务端渲染样式
为了能让服务器端渲染样式，我们首先得先做两件事：
- 在页面首次加载的时候，也就是所谓的SSR.能让 renderPage 方法在服务器端就能对React Dom进行解析，让HTML归HTML，CSS归CSS；
- 能让 Document 组件在页面切换时，能及时更新 <head> ,这样不同的页面就能加载自己所需的script,style。
解决方案的登场
隆重介绍神器 styled-components 出场， styled-components 在github上目前为止已经超过1万stars，它的设计初衷在于在服务端渲染的时候，同时渲染出一个ServerStyleSheet，然后把这个ServerStyleSheet送入React DOM树中。它主要就做两件事：
- 把组件中 styles 抽离到 <style> 标签中；
- 把 <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 ，您老人家就安静地慢慢地加载吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Next.js实现react服务器端渲染的方法示例
说明 实现 路由跳转.redux 文件版本 "next": "^4.2.3", "react": "^16.2.0", "react-dom": "^16.2.0" Next.js GitHub 文档 项目源码 使用 Next.js 使用文件体统作为API,可以自动进行服务器端渲染和代码分割 1. 安装 yarn add next react react-dom 2. package.j
-
详解使用Next.js构建服务端渲染应用
next.js简介 最近在学React.js,React官方推荐使用next.js框架作为构建服务端渲染的网站,所以今天来研究一下next.js的使用. next.js作为一款轻量级的应用框架,主要用于构建静态网站和后端渲染网站. 框架特点 使用后端渲染 自动进行代码分割(code splitting),以获得更快的网页加载速度 简洁的前端路由实现 使用webpack进行构建,支持模块热更新(Hot Module Replacement) 可与主流Node服务器进行对接(如express) 可自
-
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
vue里面本身带有两个回调函数: 一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调. 另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调. 栗子: ... <ul id="demo"> <li v-for="item in list">{{item}}</div> </ul> ... new Vue({ el:'#demo', data:
-
详解Next.js页面渲染的优化方案
在过去一年的工作中我所使用的js框架是Next.js,尽管这个框架在前后端同构方面有着绝佳的体验,但是当页面js文件过大以及preload过多的时候还是会出现页面跳转卡顿和渲染阻塞等比较糟糕的用户体验问题.由于我之前既不知道这个框架的工作原理,自然也就不知道如何去优化它.乘着农历春节前工地活少所以稍微研究一下. 第一个问题:宣称前后台同构的Next.js为何会出现卡顿现象? Next.js 中的特有生命周期hook 函数 getInitialProps会在页面渲染的时候判断浏览器是否为首次渲染,
-
详解 vue.js用法和特性
前 言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j
-
详解Node.js中间件是怎样工作的
目录 什么是 Express 中间件? 编写 Express 中间件的要求 Express中间件:基础 中间件解决什么问题?为什么要用它? 中间件函数是什么样的? 中间件链 Express中间件的类型 内置中间件 错误处理中间件 第三方级别的中间件 总结 什么是 Express 中间件? 中间件在字面上的意思是你在软件的一层和另一层中间放置的任何东西. Express 中间件是在对 Express 服务器请求的生命周期内所执行的函数. 每个中间件都可以访问其被附加到的所有路由的 HTTP 请求和
-
详解node.js中的npm和webpack配置方法
概述 Node.js用c++语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为8787的服务器.他与php,java等不同,像php本地还要基于阿帕奇服务器,node.js能用代码快速搭建一个服务器. // 引入http模块 var http = require("http"); // 调用http的
-
详解Vue.js中.native修饰符
修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>
-
详解用js代码触发dom事件的实现方案
背景 前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件.通常一些元素上会自带一些触发事件的方法,例如click.focus等,但是如果是其他的事件,例如mousedown.mouseup.mouseenter,这些事件怎么模拟呢? 思路 其实思路很简单,web标准中定义了一系列API接口,其中dispatchEvent允许我们向一个指定的事件目标派发一个事件,而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规
-
详解node.js 事件循环
Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高. Node.js 几乎每一个 API 都是支持回调函数的. Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现. Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数. 事件驱动程序 Node.js 使用事件驱动模型,当web server接收到请
-
详解Vue.js 响应接口
Vue 可以添加数据动态响应接口. 例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应. 实例中通过点击按钮计数器会加 1.setTimeout 设置 10 秒后计算器的值加上 20 . <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click
-
详解Howler.js Web音频播放终极解决方案
前言 相信有很多人在写移动端音频播放的时候都踩过不少坑,特别是复杂音频项目在兼容多种设备的时候更是让你抓狂,比如ios端不能一开始就播放音频,必须要用户进行了操作.... 偶然间了解到了一个兼容所有设备和浏览器的音频引擎Howler.js 使用了一下非常完美 Howler.js 是一个新的 JavaScript 库用于处理 Web 中的音频,该库最初是为一个 HTML5 游戏引擎所开发,但也可用于其他的 Web 项目,Howler.js 基于 Google 的 Web Audio API,能够帮
-
详解React的回调渲染模式
一.一个简单的小例子 1.父组件 <Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : <Badge info={user} />} </Twitter> 2.子组件框架 import React, { Component, PropTypes } from 'react' import fetchUser from 'twitter' // fetc