客户端渲染服务端渲染及代码实现

最新推荐文章于 2024-03-04 08:52:09 发布

Avici_Mix

最新推荐文章于 2024-03-04 08:52:09 发布

阅读量287

点赞数

分类专栏： JavaScript 计算机网络文章标签： html javascript

本文链接：https://blog.csdn.net/OriginalMIxss/article/details/120473063

版权

1 定义

1.1 客户端渲染

在此之前，页面的渲染流程：

浏览器请求一个HTML文本
渲染进程解析HTML文本构建DOM树
解析HTML的同时，如果遇到内联样式或者样式脚本，则下载构建样式规则，若遇到JavaScript脚本，则会下载并执行
渲染进程将DOM树和样式规则两者合并渲染成渲染树
渲染进程生成布局树
对布局树进行分层，栅格化每一层，得到合成帧
将合成帧信息发送到GPU进程显示到界面中

此时在执行JS脚本的时候，HTML页面已经开始解析和构建DOM树，JS脚本知识动态改变DOM树结构，这个就是动态渲染，也就是客户端渲染，其特点就是由浏览器构建DOM树，并不断请求后台数据文件（如JS），再修改DOM树

优点：

前后分离，开发效率高
用户体验好，当网页或者部分内容做成SPA单页面应用时，用户点击不会出现频繁的跳转

缺点：

由于需要在浏览器进行拼接，前端的响应会比较慢，特别是首屏响应
不利于搜索引擎优化

1.2 服务端渲染

在浏览器请求url的时候，服务端将需要的HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过JS脚本的执行，直接可以构建出希望的DOM树并展示到页面是，这个服务器组装HTML页面生成DOM树的过程，叫做服务端渲染

优点：

不占用前端资源，前端耗时少，响应快
有利于SEO优化，后端有完整的HTML页面，爬虫更容易爬取信息

缺点：

不利于前后端分离，开发效率降低
对于HTML解析，前端速度加快，但同时加大服务器压力

在这里插入图片描述

一般会使用服务端渲染和客户端渲染结合的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离

Vue 服务端渲染

初始简易版：

const Vue = require('vue');
const server = require('express')();
const renderer = require('vue-server-renderer').createRenderer();

server.get('*', (rep, res) => {
   

    //创建Vue实例
    const app = new Vue({
   
        data: {
   
            url: rep.url
        },
        template: '<div>当前访问的url是：{
   {url}}</div>'
    })

    //创建一个渲染器
    renderer.renderToString(app, (err, html) => {
   
        if (err) {
   
            res.status(500).end('Internal Server Error');
            return;
        }
        //返回HTML，并插入Vue实例中的HTML片段
        res.end(
            `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Hello SSR</title>
            </head>
            <body>
                ${
     html}
            </body>
            </html>`
        )
    })
})

server.listen(8080,()=>{
   
    console.log("服务器运行在8080端口");
})

在浏览器中：
在这里插入图片描述
浏览器所请求到的源码：

使用模板的方式

模板方式的使用：
server.js

const fs = require('fs');

const Vue = require('vue');
const server = require('express')();
const VueServerRenderer = require('vue-server-renderer');

server.get('*', (rep, res) => {
   

    //创建Vue实例
    const app = new Vue({
   
        data: {
   
            url: rep.url
        },
        template: '<div>The url currently accessed is:{
   {url}}</div>'
    }

最低0.47元/天解锁文章

Avici_Mix

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
客户端渲染服务端渲染及代码实现

1 定义1.1 客户端渲染在此之前，页面的渲染流程：浏览器请求一个HTML文本渲染进程解析HTML文本构建DOM树解析HTML的同时，如果遇到内联样式或者样式脚本，则下载构建样式规则，若遇到JavaScript脚本，则会下载并执行渲染进程将DOM树和样式规则两者合并渲染成渲染树渲染进程生成布局树对布局树进行分层，栅格化每一层，得到合成帧将合成帧信息发送到GPU进程显示到界面中此时在执行JS脚本的时候，HTML页面已经开始解析和构建DOM树，JS脚本知识动态改变DOM树结构，这个就是
复制链接

扫一扫