web一次完整的的请求
首先从一次完整的的请求说起:(以此为例get,www,baidu.com)
1,webbrower 发出request,
2,然后解析www.baidu.com为ip,找到ip的服务器,
3,服务器处理请求资源并返回请求的内容,
4,browser接受请求内容过程,(返回内容是按顺序读取的)
4.1遇到外联css,就会并发去读取css内容(),
4.2遇到图片时,回去并发读取图片,目前浏览器的并发数为2,
4.3遇到js时则会阻塞其他请求。
4.4加载完css后,browse开始渲染页面,
4.5直到加载完页面中的文本资源,这时dom的结构已经确定,会出发 document.ready方法
4.6 browse继续加载 图片和js,完成后。页面就全部加载完成,这时会出发 window.onload()方法
来分析一下里面具体的时间开销:
1,从1--4.4 用户才开始看到页面上有内容,在这以前页面就是空白的
2,解析域名也是有一定时间开销的,如果是大机房的可以通过路由配置 dns 缓存,依赖于外部机房环境,可控性比较小。
3,这是服务器处理的时间,优化程序代码可以减少这里的时间
4,
4.1浏览器在接收完css之前,一般是不去渲染dom的,以避免无所谓的刷新和闪烁。所以直到4.4用户才真正在页面上看到内容。
4.2 浏览器的单域名并发访问数 为2,多域名下并发数没限制,可以通过定义域名别名改善
4.3 浏览器加载js时会阻塞其他请求,直到加载完成。改善的话可以把js放到页面下面去加载。
从上面的流程可以分析出以下建议:
1,减少连接数(原因:并发限制,dns开销)
2,将css放到 head中。(1,首先这符合w3c规范,2,应为css加载完后,遇到dom对象时就会直接显示,可以更快的显示页面。)
3,将js放到页面底部,(加载js时会阻塞其他请求,这段时间页面没有反映,如果js中没有write的话应该放到底部,页面渲染完后再加载js)
4,减少下载内容(网络是有速度限制的,内容越少当然加载越快)
针对上面4条建议给出具体做法:
1,使用 css sprite将小图片合并,合并css、js。使用浏览器缓存: cache-control、expires。不使用etag
2、3不用说了,上面已经解释清楚了。
4,采用gzip压缩,可以使用 jsmin 将js精简,使用工具将css,html精简,尽可能缩减图片。
按照 性能黄金法则 说明: 文本内容只占所有时间的10%-20%, 这样做以后 至少能将时间缩小40%-50%。能明显改善用户体验。
这只是一些建议参考,具体的需要你针对自己的网站进行分析,分析工具可以使用firedebug,yslow,(这两个可以集成)
yslow会直接给出你建议。
分享到:
相关推荐
这是与我的博客文章对应的资源,介绍了《深入分析Java Web技术内幕》中第一章深入Web请求过程的知识框架。欢迎下载
一次HTTP共7步 1:建立TCP连接 2:web浏览器想web服务器发送请求命令 3:web浏览器发送请求头信息 ...
两次请求相同的一个URL,会产生缓存问题。 博文链接:https://weiye.iteye.com/blog/100470
一、前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决...第一个OPTIONS的请求是由WEB服务器处理跨域访问引发的。OPTIONS是一种预检请求,浏览器在处理跨域
6.3.7 一次获取多篇帖子 146 6.4 Go与SQL的关系 147 6.4.1 设置数据库 147 6.4.2 一对多关系 150 6.5 Go与关系映射器 152 6.5.1 Sqlx 152 6.5.2 Gorm 154 6.6 小结 157 第三部分 ...
IIS应用初始化会在网站第一次创建后或者对应网站的应用程序池回收后,自动开启新程序池,并启动网站初始化,模拟一次正常请求,使网站一直处于在线状态。 修改IIS中的配置 1.修改启用应用程序池(AlwaysRunning):...
但是现在很多公司技术领导层,都在推行前后端分离理念,所以这一次我承担了Core Api 架构设计,采用的是Vue+Core 3.1 WebApi去实现前后端分离. 实现效果图:...
本章内容 理解Web服务器的作用 理解... URL 当用户打开浏览器,输入一个URL地址时,能够向远程的web服务器发送一个请求,并且收到远程Web服务器发送来的数据。 URL是uniform resource locator的缩写,表示统一资源定
Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。...
Charles是一款基于应用层http协议抓包的工具,借助这款工具,测试人员可以进行http/https数据抓包,包括对android和ios移动端的...附件包含了破解补丁以及使用说明,不用半小时重启一次Charels了,使用起来非常方便!
* 每次时间间隔:测试线程发出一个请求,并得到被测系统的响应后,间隔多少时间发出下一次请求 * 平均响应时间:测试线程向被测系统发请求,所有请求的响应时间的平均值 * 处理能力:在某一特定环境下,系统处理请求...
报告 ,每个会话一次请求(无跟踪); 关联有用的设备信息,例如cpus数, memory大小和connection类型; 报告自定义前端指标; 处理边缘情况,例如多个CLS调用,取整值和sendBeacon后备; 这是一个很小的库(800字节...
版 次:1 页 数:281 装 帧:平装 开 本:16开 所属分类:图书 > 计算机与互联网 > 计算机安全 内容简介 在你对Web应用所执行的测试中,安全测试可能是最重要的,但它却常常是最容易被忽略的。本书中的秘诀...
在这种机制下,ASP.NET runtime环境会在第一次请求Web应用程序时对其进行编译,并将编译结果缓存在内存中,以便后续请求能快速响应。 预编译是指在开发阶段手动对Web应用程序进行编译的过程。在这种机制下,开发...
自己也是第一次接触Webservices,对Webservices请求和解析进行了简单的处理和封装,里面还有些不足,大家可以给点建议和建议
针对Web缓存共享的系统响应迅速的要求提出一种路由步长为O(2)的路由协议,保证Web查询请求最多只经过一次转发就可到达目标节点。性能分析和仿真实验的结果证明其在路由可靠性、命中率、系统响应和缓存代价方面均有...
通过统计页面(就是Fiddler左边的那个大框)用户可以很轻松的使用多选,来得到一个WEB页面的“总重量”(页面文件以及相关js,css等)你也可以很轻松得看到你请求的某个页面,总共请求了多少次,以及多少字节被转化了...
之前一次面试时面试官问到了Get请求和Post请求的区别,对于web基础来说这个还是比较重要的,所以我打算整理一下分享给大家,以下是我个人的一些总结,如果大神有更好的理解,欢迎补充。 从三个方面来总结 Get请求...