请求一个网页的全过程

关键词:打开一个网页几个HTTP请求

总结:若网站是纯服务端渲染,那么浏览该网站至少发起一次请求,否则浏览该网站至少发起两次请求。

页面加载全过程

分析

众所周知,打开一个网页的过程中,浏览器会因页面上的css/js/image等静态资源而多次发起连接请求,所以我们暂且把这个网页加载过程分成两部分:

(1)html(jsp/php/aspx) 页面加载(假设存在简单的Nginx负载均衡)

(2)css/js/image等 网页静态资源加载(假设使用CDN)

补充:

Chrome浏览器开发者工具Network窗口下,Timing中显示资源在整个请求生命周期过程中各部分花费的时间。

1)因为有“队头阻塞”,谷歌浏览器对每个域名最多开 6 个并发连接(HTTP/1.1),当页面里链接很多的时候就必须排队等待(Queued、Queueing),这里它就等待了 9.33 秒,然后才被浏览器正式处理;

2)浏览器要预先分配资源,调度连接,花费了 23.24 毫秒(Stalled);

3)连接前必须要解析域名,这里因为有本地缓存,所以只消耗了 11微秒(DNS Lookup);

4)与网站服务器建立连接的成本很高,总共花费了 153.40 毫秒,其中有 88.83 毫秒用于 TLS 握手,那么 TCP 握手的时间就是 65.57 毫秒(Initial connection、SSL);

5)实际发送数据非常快,只用了 0.48 毫秒(Request sent);

6)之后就是等待服务器的响应,专有名词叫 TTFB(Time To First Byte),也就是“首字节响应时间”,里面包括了服务器的处理时间和网络传输时间,花了 75.28 毫秒;

7)接收数据也是非常快的,用了 0.60 毫秒(Content Dowload)。

从这张图你可以看到,一次 HTTP“请求 - 响应”的过程中延迟的时间是非常惊人的,总时间 254.66 毫秒里占了多于99%。

优化措施详见https://blog.csdn.net/qgnczmnmn/article/details/118086642

一、服务端渲染

就是服务端接收到客户端发来的html字符串时,使用模板引擎(ejs、jade等)将数据传到模板,最后返回一个数据+html的字符串给浏览器,浏览器自动解析成一个完成的html页面,很明显浏览器渲染过程只发生了一次网络请求。

服务端渲染过程

二、客户端渲染

客户端向服务端发起请求,服务端不做任何处理,直接以原文件的形式返回给客户端,客户端渲染html页面,当遇到ajax请求,又发起一次网络请求,服务器端根据接口返回相应的数据,客户端结合模板引擎(art-template)和数据拼装,最后以dom形式插入html页面,当然这种方式是比较老套的方式了,如当下用得火热的 spa 框架,Angular、React、Vue等。很明显浏览器渲染过程发生了两次网络请求。

客户端渲染过程
服务端渲染和客户端渲染的优缺点

三、服务端渲染和客户端渲染抉择

那么我们到底什么时候用服务端渲染什么时候用客户端渲染呢?一般网站既不是纯异步也不是纯服务端渲染出来的。例如:京东的商品列表就采用的是服务端渲染,目的:为了 SEO 搜索引擎优化,而它的商品评论列表,为了用户体验,而且也不需要 SEO 优化,所以采用是客户端渲染。

性能优化

我们需要知道的是,从prompt for unload一直到Processing页面一直是白的。我们可以根据上图来考虑需要优化的几个点:

1) 缓存

2) CDN

3) TCP连接时间,加大带宽,服务器端响应速度

4) 请求,响应速度,数据量越小,响应越快

5) Processing,优化dom结构


参考:

使用 Performance API 获取页面性能

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容