如何通过长尾关键词优化Next.js页面渲染速度？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1421个文字，预计阅读时间需要6分钟。
过去一年中，我主要使用Next.js框架进行工作。尽管这个框架在前后端同构方面有极佳的体验，但当页面JS文件过大及preload过多时，仍会出现页面跳转卡顿和渲染阻塞等问题。
在过去一年的工作中我所使用的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 加载完毕之后才渲染，那问题就来了。
本文共计1421个文字，预计阅读时间需要6分钟。
过去一年中，我主要使用Next.js框架进行工作。尽管这个框架在前后端同构方面有极佳的体验，但当页面JS文件过大及preload过多时，仍会出现页面跳转卡顿和渲染阻塞等问题。
在过去一年的工作中我所使用的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 加载完毕之后才渲染，那问题就来了。