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资源积累太多,离开时
性能的提高,没有采用技术的延迟
页面上最重要的内容到达用户所需要的时间
内容的重要性大于导航。