如何对前端页面响应性能进行优化？

程序员蔡大爷 06-10 110

前言：

眼前大家对“ajax无闪烁刷新”大体比较讲究，我们都需要剖析一些“ajax无闪烁刷新”的相关文章。那么小编在网上收集了一些有关“ajax无闪烁刷新””的相关内容，希望看官们能喜欢，你们快快来学习一下吧！

我开发前端时，我几乎很少考虑这个问题，那就是如何让页面的响应时间最快，直到因为一个工具的国际化问题，才暴露出来这方面的技术问题。为什么呢？因为页面切换英文的时候，中文停留了3秒，才全部切换到英文，这对海外的用户来说是不可接受的，我本来并不重视，直到不断有人吐槽，我才重视起这个问题。

但是我并不知道问题在哪里，我在页面的引入，用了延迟加载的属性：defer或者异步async,让不必要的js文件延迟加载，但是效果有那么丁点，但是对于解决这个切换产生的问题毫无意义。

然后通过谷歌调试控制台中的NetWork我发现，加载的时间是请求后台数据需要的时间最多，导致整个页面加载的总时间需要5秒，这是什么概念?但是我却无可奈何，因为加载后台数据不是我所能干涉的，不过我通过分析发现，页面加载时用到的数据并不需要立即出现后台的数据，但是我却全部加载保存在本地了，导致了页面加载出现了大量的延迟，响应速度比较慢。我明白了这点，我就将所有的请求的封装全部放到一个定时器函数中：

setTimeout(function(){ s若干封装的请求方法}，500)

做了这样的设置，5ms后请求后台数据。根据js的加载，设置有定时器的它会对齐进行排序加载，它会直接跳过加载封装在定时器里面的方法，优先加载其他文件的相关方法等，这时候我测试了一下，嗯，可以，中英文的切换顺间便完成，整个加载的总时间没变，但是切换速度快了。但是还可以看到切换的一闪。但是我目前暂时没有办法解决，因为我用的是i18n国际化插件，整个项目只有一个html,其他弹窗之类的，我直接用js把html当做变量，即组件化使用。所以页面是切换速度极快。

上面我说的有一点：整个文档加载的时间没变。当时我并不在意了，但是后面发现页面被锁死了2-3秒，无法操作，突然头皮有些发麻，这是什么回事？

分析了之后，问题还是出在了请求数据这里，小项目我都是前后台自己搞的，所以搭配Jquery开发，它强大的操作能力，让我很喜欢它。请求数据所以用的是jquery.ajax:

$.ajax({

type: "POST",

url: url,

async:false,

data: s,

success: function(response, status, request) {

}

})

不知道大家看出来问题没有，出在哪里？没错！就是出现在异步与同步这两点上：

async:false：表示同步加载，即这件事没完成之前，其他人你不能插手。