网站优化之异步js加载技术实践

    现在的网站都在对用户体验上面下足了功夫，包括UI,样式 但是在这里想着重说明一点 就是js的异步加载会给你带来不可思议的功效。
我记得在最开始的时候。我们根本不懂什么叫做页面优化，以为只是把页面稍微整合的漂亮点就ok 。
到后来慢慢的知道把js放到页面的最下边。感觉这样似乎比以前把js放在网页顶部要好了很好。可是，还有没有比这样更优秀的加载技术呢。
答案就是in.js 异步加载技术，我的网站开始的时候就是把所有的js文件全部放到网页底部，因为js的数据大。所有感觉服务器还是hold不住，特别是当网站的访问量在周末上升到1W的时候，感觉tomcat很吃力，后来分析了页面的加载每个时间段的消耗值。发现js的加载会占用很大的时间。会很大的影响用户的体验。那么怎么样采用in。js来实现异步加载呢？我用我的网站 bushere.com 来作为例子来解释。
    1  首先 在最开始的只是加载一些必要的js文件。例如我在我的网站中底部就只是加载了in.js这个异步加载框架。这个框架只有6K，所以速度很快。
    2  为了方便用户更好的找到所需要的数据。我在页面中采用了搜索指导技术，就是你数据公交线路102的时候。我自动把深圳市公交线路中符合10*开头的公交线路都给你找出来。这样用户肯定觉得很舒服，但是带来一个新的问题 ，就是这些数据文件很大怎么办？要是一开始的就是加载，那就有一下两个问题：1 一开始就加载这些js会导致页面速度慢，用户体验差。2. 如果用户不搜索公交线路。而是搜索其他的公交信息，例如站点名称等等。那一开始加载的这些数据信息 不就是占用了时间，影响了速度，但是用户却不需要的。 所以我采用了 当用户点击这个搜索框的时候，我再开始加载这些公交数据信息，这样既不影响速度，而且也不浪费无用的时间。
    3.还有其他的方面的优化，今天就只讲到这里。经过这个步骤的优化，bushere.com 的速度比以前有了相当大的提高，而且在并发方面经过压力测试，有了显著的提高。当然还有很到其他的方面的优化，我会陆续写出来。欢迎大家指点。

评论

16 楼 mazzystar 2012-07-17  

sqj820123 写道

mazzystar 写道

sqj820123 写道

    也许你觉得是跑题，但是也许是我没有写清楚，但是我的网站就是这样慢慢改进，速度才这样快的，我的网站是跑在虚拟机上面的，你可以感觉下速度怎么样？用户体验怎么样？我写的都是我的网站改进之路。

嗯 可能是看题目先入为主了。

看了你的网站，速度是不错，有个小建议啊 。搜索框中点到“公交线路”这几个灰体字时输入框失去焦点，不能输入文字了。可以改进下哦。

   谢谢你的提醒，其实不是不能输入文字，只是在后台异步加载js数据文件，所以产生暂时的浏览器假死现象，其实一个人做网站 挺累是。

嗯 一个人做会有不同的收获的，加油吧

15 楼 sqj820123 2012-07-17  

mazzystar 写道

sqj820123 写道

    也许你觉得是跑题，但是也许是我没有写清楚，但是我的网站就是这样慢慢改进，速度才这样快的，我的网站是跑在虚拟机上面的，你可以感觉下速度怎么样？用户体验怎么样？我写的都是我的网站改进之路。

嗯 可能是看题目先入为主了。

看了你的网站，速度是不错，有个小建议啊 。搜索框中点到“公交线路”这几个灰体字时输入框失去焦点，不能输入文字了。可以改进下哦。

   谢谢你的提醒，其实不是不能输入文字，只是在后台异步加载js数据文件，所以产生暂时的浏览器假死现象，其实一个人做网站 挺累是。

14 楼 mazzystar 2012-07-17  

sqj820123 写道

    也许你觉得是跑题，但是也许是我没有写清楚，但是我的网站就是这样慢慢改进，速度才这样快的，我的网站是跑在虚拟机上面的，你可以感觉下速度怎么样？用户体验怎么样？我写的都是我的网站改进之路。

嗯 可能是看题目先入为主了。

看了你的网站，速度是不错，有个小建议啊 。搜索框中点到“公交线路”这几个灰体字时输入框失去焦点，不能输入文字了。可以改进下哦。

13 楼 sqj820123 2012-07-17  

mazzystar 写道

sqj820123 写道

mazzystar 写道

sqj820123 写道

mazzystar 写道

有个疑问：你说的例子和异步加载js有啥关系？

这样的问题你提出来 我感觉你在页面上面还有很大的提升空间，js异步加载 用户肯定是感觉不到的。你要通过页面分析 才能看到的 。或者是在网络慢的情况下 ，才可以感觉到异步加载的妙用。像你网速很快的话，异步加载体现不出多大的效果的

... 你举得例子根本就不搭边，硬套概念

   我只能这样跟你说。有人说榴莲很臭 很难吃，有吃觉得是宝贝，那就看个人喜好了。

我不是不喜欢js的异步加载，只是感觉这个例子里后面说的已经跑题了，同样是优化用户体验的东西，但完全不是一个概念。感觉很别扭。你说的in.js 倒是个好东西

    也许你觉得是跑题，但是也许是我没有写清楚，但是我的网站就是这样慢慢改进，速度才这样快的，我的网站是跑在虚拟机上面的，你可以感觉下速度怎么样？用户体验怎么样？我写的都是我的网站改进之路。

12 楼 mazzystar 2012-07-17  

sqj820123 写道

mazzystar 写道

sqj820123 写道

mazzystar 写道

有个疑问：你说的例子和异步加载js有啥关系？

这样的问题你提出来 我感觉你在页面上面还有很大的提升空间，js异步加载 用户肯定是感觉不到的。你要通过页面分析 才能看到的 。或者是在网络慢的情况下 ，才可以感觉到异步加载的妙用。像你网速很快的话，异步加载体现不出多大的效果的

... 你举得例子根本就不搭边，硬套概念

   我只能这样跟你说。有人说榴莲很臭 很难吃，有吃觉得是宝贝，那就看个人喜好了。

我不是不喜欢js的异步加载，只是感觉这个例子里后面说的已经跑题了，同样是优化用户体验的东西，但完全不是一个概念。感觉很别扭。你说的in.js 倒是个好东西

11 楼 sqj820123 2012-07-17  

mazzystar 写道

sqj820123 写道

mazzystar 写道

有个疑问：你说的例子和异步加载js有啥关系？

这样的问题你提出来 我感觉你在页面上面还有很大的提升空间，js异步加载 用户肯定是感觉不到的。你要通过页面分析 才能看到的 。或者是在网络慢的情况下 ，才可以感觉到异步加载的妙用。像你网速很快的话，异步加载体现不出多大的效果的

... 你举得例子根本就不搭边，硬套概念

   我只能这样跟你说。有人说榴莲很臭 很难吃，有吃觉得是宝贝，那就看个人喜好了。

10 楼 mazzystar 2012-07-17  

sqj820123 写道

mazzystar 写道

有个疑问：你说的例子和异步加载js有啥关系？

这样的问题你提出来 我感觉你在页面上面还有很大的提升空间，js异步加载 用户肯定是感觉不到的。你要通过页面分析 才能看到的 。或者是在网络慢的情况下 ，才可以感觉到异步加载的妙用。像你网速很快的话，异步加载体现不出多大的效果的

... 你举得例子根本就不搭边，硬套概念

9 楼 sqj820123 2012-07-16  

gxz1989611 写道

没感觉你说的跟异步加载有啥关系，至少要有个类似lazyInit的方法吧？

你可以抽空看看 in.js 的源码  。里面有详细的说明和调用方法。

8 楼 sqj820123 2012-07-16  

qdch520 写道

我觉得公交路线信息，在页面初始化加载的时候本来就是不应该加载的。楼主举这个例子来说明一部js加载可能有点不合适。因为我用ajax来获取数据照样可以实现你的功能！

 


  有ajax 的确是可以实现这样的功能   本来就是所有的的异步加载技术 都是通过ajax来实现的 只不过是做了封装而已。

7 楼 qdch520 2012-07-16  

我觉得公交路线信息，在页面初始化加载的时候本来就是不应该加载的。楼主举这个例子来说明一部js加载可能有点不合适。因为我用ajax来获取数据照样可以实现你的功能！

6 楼 gxz1989611 2012-07-16  

没感觉你说的跟异步加载有啥关系，至少要有个类似lazyInit的方法吧？

5 楼 sqj820123 2012-07-16  

而且我想说的时 ，做网站要考虑到不同的用户，也就是在不同的网络速度，不同的浏览器都要给用户很好的效果，至少要让用户不能有一种不知所措的感觉，要让用户很清楚的知道。网站在指引着我做什么。我接下来应该怎么样做，才能得到我要的数据信息。

4 楼 sqj820123 2012-07-16  

mazzystar 写道

有个疑问：你说的例子和异步加载js有啥关系？

这样的问题你提出来 我感觉你在页面上面还有很大的提升空间，js异步加载 用户肯定是感觉不到的。你要通过页面分析 才能看到的 。或者是在网络慢的情况下 ，才可以感觉到异步加载的妙用。像你网速很快的话，异步加载体现不出多大的效果的

3 楼 sqj820123 2012-07-16  

jy02405651 写道

bushere.com  楼主的网站 能达到1W的访问量？？

可以不可以hold1W的并发量，结果严格压力测试的，放心好了。  至少目前好几千的访问量服务器还很稳定。

2 楼 jy02405651 2012-07-16  

bushere.com  楼主的网站 能达到1W的访问量？？

1 楼 mazzystar 2012-07-16  

有个疑问：你说的例子和异步加载js有啥关系？