实现1秒渲染的页面体验

研究显示,任何超过1秒的延迟都将打断用户的思维流畅状态,带来不好的体验,从而流失客户,我希望做的是不论在任何设备和网络环境下都要保持网页的流畅性,提供更好的体验。

想要满足,一秒的预算可不是那么容易,但幸运的是,我们可以在一秒内完成可见区域的渲染,让用户尽快可以与页面互动。可以当在用户和页面互动时,在后台持续加载剩余页面。

DNS Lookup (200 ms)

TCP Connection (200 ms)

HTTP Request and Response (200 ms)

DNS 查询 (200 ms)

TCP 连接 (200 ms)

HTTP 请求与响应 (200 ms)

在移动页面上达到“首屏秒开”的准则,则会碰到不同网络环境的挑战,可能用户正在以 2g/3g/4g的环境来访问你的网站,移动网络的延迟明显高于有限链接,并将消耗我们一秒内首屏秒开的预算

不同网络环境下,访问速度不同

以下3g/4g的网络传输率

200-300 ms roundtrip times for 3G networks

50-100 ms roundtrip times for 4G network

你要明白,你的主流用户依然是3g,我们不得不把3g每次网络访问的消耗时间,假设为200ms

明白了这一点之后,我们来倒推一下时间。如果我们来分析一下浏览器与服务器之间一次典型的通信过程,会发现 600 ms 的时间就已经被网络本身消耗掉了:一次 DNS 查询用于将主机名(比如 google.com)解析为 IP 地址,一次网络往返用于发起 TCP 握手,以及最后一次完整的网络往返用于发送 HTTP 请求。我们就只剩下 400 ms 了!

建立请求1秒已消耗600ms

DNS Lookup (200 ms)

TCP Connection (200 ms)

HTTP Request and Response (200 ms)

DNS 查询 (200 ms)

TCP 连接 (200 ms)

HTTP 请求与响应 (200 ms)

这600ms是不可避免的3g网络消耗,对此无能为力。

————————————分割线

服务器必须在200ms内渲染出响应内容

除去网络延迟后,仍有400ms的时间以供我们进行优化,服务端必须渲染出相应内容,客户端应用程序代码必须执行,而且浏览器要完成内容的布局和渲染。服务器响应时间就是除去网络传输时间之后,一台服务器首先会返回HTML所花费的时间。因为我们剩下的时间太少了,这个时间应该控制在最低限度,理想程度应该控制在200ms以下,越少越好。

—————————————分割线

最大程度减少重定向次数

在开发中最大可能的减少HTTP重定向次数,因为每一次重定向会额外的增加网络往返1次或者2次(如果再次查询dns则是两次)在3g网络上将会导致几百毫米的延迟,如果需要,尽量避免重定向到二级域名。

—————————————分割线

首次渲染网络返回的渲染次数应该减到最少

由于TCP评估链接状态方面采取了一种特殊机制 (参见TCP慢启动)一次全新的TCP链接无法一次用满客户端和服务器之间的全部有效带宽,这种情况下,服务器在首次网络往返中,通过一个人新的链接(约14kb)最多发送10个TCP包,必须等待客户端应答这些数据才可以增加它的拥塞窗口并且继续发送数据,因为考虑到TCP的这种行为,所以优化你的内容就显得十分重要,完成页面首次渲染所需的网络往返次数应减到最少,首屏内容应该不大于14kb,这样浏览器在一次网络往返后就可以绘制页面,还有记得服务器软件要升级到最新版本,否则你的数据包上限可能只有3~4个。

时间: 2024-10-10 16:58:04

实现1秒渲染的页面体验的相关文章

PHP 爬虫体验(三) - 使用PHP + puppeteer爬取js动态渲染的页面内容

之前写的两篇爬虫体验基本上涵盖了一般的Html页面提取场景,但是有些时候,如果目标页面不是纯静态的页面,而是使用js动态渲染的页面(比如one),之前的爬虫就不好使了,这种时候就要借助一些其他工具来进行实现. 一般爬取动态页面的思路是通过软件模拟浏览器行为获取到渲染后的页面镜像,然后再对渲染后的页面进行分析,常用的工具有selenium,phantomJs,puppeteer等,通过对项目维护程度.对PHP友好度的对比,我选用的是puppeteer. 根据官方介绍,谷歌在2017年开发了自家Ch

利用jQuery Ajax技术实现每隔5秒向某页面传值

有时候我们需要每隔一段时间向某页面传值,比如说聊天室,每隔几秒就像数据库处理页面传值并取回,然后显示在聊天窗口.又或者是每隔一段时间就查询用户最后发言时间到现在是否间隔2分钟,如果是则将用户退出.这个时候我们就要用到HTML DOM setInterval() 方法. setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回

nodejs渲染到页面的理解

一般逻辑都是: 打开页面,前端发请求到服务端,服务端返回数据到前端,前端根据数据生成DOM节点,然后append到DOM中. 如果是nodejs渲染到页面,我的理解是: 打开页面,服务端直接把数据查询出来,然后把数据整合成最终的DOM节点,再返回到前端,这时前端只需要append操作,省去其他操作. 减轻客户端的压力.

将JSOn数据渲染进页面表格(一)

实现:将后台JSOn数据在页面以表格显示最后n条,折叠前面的内容. 除了处理JSOn数据比较麻烦,原理还是DOM操作,所以原生基础很重要啊.这种情况是在页面写好表头,然后再插入行,筛选. JSOn数据格式,差不多这个格式吧,随便写的 [ {"version":"1.2.1", "333":"44", "fruit":[ {"apple":"one"}, {"

五秒自动刷新页面

<meta http-equiv="refresh" content="5; url=https://www.baidu.com/" />

ajax获取数据后怎么去渲染到页面?

关于,这个问题呢!一直没有在网上找到一个合适答案(可能这问题比较傻,嘿嘿).今天把自己常用几种方式说下: 第一种: 比较常见的就是直接把字符串拼接,然后插入到元素中. var html='<li>' + data.num + '</li><li>' + data.floor + '</li><li>' + data.name + '</li><li>' + data.money + '</li>'; elem.

5秒后,页面跳转

html: <img src="img/tutu.png"/> <div> <span>跳过 5s</span> </div>jquery: $(function(){ $('img').css('height',$(window).height()); var text = 5; var DSQ = setInterval(function(){ text --; $('div span').text('跳过 '+text+

页面加载时每隔30秒刷新本页面

window.onload = function () { ChkTicketSuccess(); } var timer; var times = 0; function ChkTicketSuccess() { clearTimeout(timer); if (times > 0) { window.location.reload(); } timer = setTimeout("ChkTicketSuccess()", 30000); times = 1; }

Ajax简单的请求数据以表格的形式渲染到页面

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>长安汽车</title> <meta name="viewport" content="width=device-width, initial-sc