光辉飞翔

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
统计
 


首先从一次完整的的请求说起:(以此为例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会直接给出你建议。

posted on   光辉飞翔  阅读(194)  评论(0编辑  收藏  举报
编辑推荐:
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
阅读排行:
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
 
点击右上角即可分享
微信分享提示