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

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

图片描述

阅读 2.4k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题