如何解决pug渲染页面耗时的问题?

发布于 2022-09-07 08:58:58 字数 1830 浏览 23 评论 0

layout.pug 代码:

doctype html
html
    head
        meta(charset="UTF-8")
        title #{title}
        link(rel="stylesheet" href="xxx.css")
        link(rel="stylesheet" href="xxx.css")
        
        block links
        
        script(type="text/javascript" src="xxx.js")
    body
        
        include header
        
        include ../Include/homeInclude
        include ../Include/modals
        include ../Include/userInfoComponent
        include ../Include/page
        .contain_box
            block content
        
        include footer
        
        +modal_a
        +modal_b
        +modal_c
        
        block scripts
        
        script(type="text/javascript", src="xxx.js")
    

Index.pug 代码:

extends ../Shared/layout.pug

block links
    
block scripts
    
block content
    .box_content
        include ../Include/worksList
        +worksList
        +page(0)

有时页面渲染要3s左右的时间:
图片描述

首次打开页面是很慢。

exports.index = function(req, res, next){
    console.time('中间层向后端请求数据');
    axios.all([
        axios.get('http://xxx.com/api/xxx'),
        axios.get('http://xxx.com/api/xxx'),
        axios.get('http://xxx.com/api/xxx'),
    ]).then(axios.spread(function(res1, res2, res3){
        console.timeEnd('中间层向后端请求数据');
        
        console.time('中间层返回数据给浏览器')
        res.render('Default/index', {
            res1: res1.data,
            res2: res2.data,
            res3: res3.data
        })
        console.timeEnd('中间层返回数据给浏览器');
    })).catch(e => {
        console.log(e);
    })
}
中间层向后端请求数据:85.427ms
中间层返回数据给浏览器:1077.347ms

图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文