Quickling技术

 

 Doc的分享。

 

Quickling技术。

通过Quickling，Facebook将所有的用户点击访问自动地转变成AJAX调用，避免了大量的服务器端重复计算和客户端的重复渲染。

url访问自动转成ajax调用

比如：facebook.com/Home.php#!profile.php
用户其实想去个人信息页，实际会跑到首页。
#后面是用户真正想去的页面
!感叹号是为了搜索，因为不少网站用了quickling的技术，爬虫抓不到这些页面，所以谷歌和这些公司约定了一个标准，建议hash前有一个感叹号，区别这种带ajax请求的url

 

通过ajax提高用户体验性能。

网页在渲染的过程中大概可以分成3个部分：

1、在服务器端生成网页所花的时间

2、网络传输时间

3、到达客户端渲染时间

网页引用的静态资源js、css通过cdn，这些时间也会被算进来，有部分重叠。

 

网站越来越大，页面越来越多，页面的内容也越来越多，在页面中，有些内容是比较重要的。

在测量用户体验的过程中，希望那些最重要的内容，需要保证页面最重要的内容能最快的时间到达用户的浏览器，最快的速度呈现在用户面前。所以定义了一个性能参数Time to interact（TTI）。页面中最重要的内容到达客户端被渲染完成所需要的时间。

 

观察用户使用网站的数据，研究用户的使用特性，是个黏性很强的网站。用户登录界面不是访问一两个页面就走了，通常要连续地访问十几，甚至几十个页面。这些页面之间包含很多相同的部分，比如头部导航和连接，这些和页面的具体内容没有什么关系。如果能去除这些固定的内容，就能节省服务器开销，而且能够降低页面过度的复杂度。2、用户访问很多页面，但是浏览器不知道页面之间的关系，从一个页面过渡到另一个页面，用户离开一个页面的时候需要卸载这个页面的资源，虽然有很多资源都是相同的，我们的js、css有很多都是相同的。请求重复的资源，都是相同的。浏览器不停的卸载资源重载资源，通过js技术让浏览器认为用户没有离开这个页面，让浏览器不需要卸载前一个页面的资源，加载下一个页面的时候，也不需要下一个页面的资源。页面内容的更换是通过ajax的技术来完成的。从用户的角度来看这个而技术，用户点击了一个链接，或者点击向前向后按钮，截获事件，

1、  清空内容区，替换内容区，整个过程都是通过javascript来完成。

2、  用户点击一个链接，或者浏览器的前进、后退按钮。 

3、  这个链接带有一个特殊标志（就是#!），页面js检索到这个标志，会向服务器发送一个ajax请求。

4、  服务器收到请求；

5、  仅仅清除内容区域（公共页头还留着）。 

6、  5、加载js、css 

7、  展示内容

避免浏览器重复操作，不停卸载资源加载资源。

页面过度的时候鼠标会变成沙漏，进度条。

Css资源积累太多，离开时

性能的提高，没有采用技术的延迟

页面上最重要的内容到达用户所需要的时间

内容的重要性大于导航。

评论

1 楼 jozo 2015-09-17  

[color=orange][/color]