我开发前端时，我几乎很少考虑这个问题，那就是如何让页面的响应时间最快，直到因为一个工具的国际化问题，才暴露出来这方面的技术问题。为什么呢？因为页面切换英文的时候，中文停留了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：表示同步加载，即这件事没完成之前，其他人你不能插手。

async:true：表示异步加载，即你可以一边看电视，一边手机跟美女聊天，这电视可以还没看完，但是美女还可以继续撩。

所以显而易见，我把所有的请求都改为了异步加载，就解决了锁死的问题，用户一进来，就可以直接操作了，用户的使用感受变得很友好。

同时我上面也说过，我的数据都是先全部请求完毕，保存在本地的localstorage；这样就能实现页面数据的快速响应，用专业术语说就是：预加载。

综上所述，其实页面的性能优化，是跟整个项目的设计有关，哪些数据是可以提前加载，懒加载的，就要分析哪些是第一时间需要呈现的，就这样按需引入，同时也跟整个js的操作逻辑布局有关，所以任何一门技术想要学精通，都任重而道远。

原创不易，欢迎大家一起讨论，一起进步，谢谢！