使用layui渲染页面中用户信息时出现闪动一下的问题

需求:根据用户登录后的信息,对用户头像进行加载,如果用户未设置头像,则以用户名的第一个字母为头像,如果设置了头像,就加载用户的头像:
在使用layui渲染页面时，由于ajax的请求数据是异步请求，所以页面首先加载dom元素，加载完了之后ajax的数据才会返回，这就导致页面中用户信息的二次加载，会根据用户的实际信息进行判断应当如何加载，这时候页面会进行刷新，所以就出现一个闪动问题;
问题出现的原因:页面首先加载dom元素,其次获取ajax请求,根据返回的信息再次加载导致闪动;
解决方案:
把ajax请求放在dom结构的上面,并且通过设置async: false属性将ajax请求方式该为同步请求;

解决思路:
浏览器渲染页面时,首先发送ajax的同步请求,(因为是同步请求,所以必须得到回应后代码才会向下执行,这里可以设置一个超时时限),接着渲染dom元素,dom元素渲染完了之后,开始调用根据ajax返回的用户信息来渲染页面的函数,因为此时已经拿到了数据,所以就极大地缩短了这个dom元素两次渲染的时间差,提高了用户的体验;

ps:layui默认的是必须放在dom结构下方,否则会出现某些功能不能使用的问题,因此需要两次引入js文件,dom元素上下各一次;

加载dom之前发送ajax请求:

let userInfo = null;
getUserInfo(); //先发送ajax请求

//dom加载完之后进入入口函数
var layer = layui.layer
$(function () {
    if (userInfo) {
        // 渲染信息
        // console.log(userInfo);
        renderAvatar(userInfo);
    }
})

发送ajax函数:

function getUserInfo() {
    $.ajax({
        type: "get",
        url: "/my/userinfo",
        //改为同步请求
        async: false,
        //请求头(写到baseApi.js中了)
        // headers: {
        //     Authorization: localStorage.getItem('token')
        // },
        success: function (response) {
            if (response.status !== 0) {
                return layer.msg('获取用户信息失败');
            }
            
            userInfo = response.data;
        },
    });
}

按需渲染头像:

function renderAvatar(user) {
    var name = user.nickname || user.username;
    //渲染昵称
    $("#welcome").html('欢迎  ' + name)
    //按需渲染头像
    if (user.user_pic !== null) {
        // 3.1渲染图片头像
        $(".layui-nav-img").attr('src', user.user_pic).show();
        $('.text-avatar').hide()
    } else {
        // 3.2渲染文字头像
        $(".layui-nav-img").hide();
        var first = name[0].toUpperCase();
        $('.text-avatar').html(first).show();
    }
}

优化了用户体验…