给一个新西兰客户做了一个博客网站:
技术组件: Python/Flask + Mongodb + Linode/Ubuntu + Nginx + uWSGI
从目前的情况看, 问题似乎出在这台Macbook Air上. 客户甚至怀疑自己的电脑是不是中了病毒.
有一次白天我们一起喝咖啡的时候, 他把MBA带来了. 他通过MBA 连接iPhone 的热点访问网站, 我亲眼看到加载很慢. 而同时我们俩用手机访问都没有问题. 他访问别的网站也没有问题.
我打开 Chrome DevTools, 发现是静态资源耗时异常, 例如有一张图片加载了26秒.
请教各路大神, 这可能是什么原因呢?
1
Citrus 2015-05-04 08:08:26 +08:00 via iPhone
实际上你描述了半天没说到点子上。
Chrome 的 DevTool 可以详细展示每个资源每个阶段的耗时,你应该看这个然后找找是哪个阶段出现了问题。同时可以配合服务器日志查看。 |
2
lerry 2015-05-04 08:13:14 +08:00
他访问别的网站都没问题吗?我第一次打开也感觉有点慢,后来好些。
楼主可知道浏览器对于统一域名的并发请求数是有限制的? 建议把css合并成一两个文件,js也可以合并,用于样式的图片也可以用css sprite合并,页面上的图片建议放到子域名下,既然后端是Python也好控制。 可以把例如img1,img2,img3....等很多子域名解析过去,显示的时候随机选一个前缀,不管是哪一个都可以加载,我看豆瓣是这样做的。为了更好的缓存,也可以让图片和子域名的对应是固定的。 我也是个前端新手,希望这些对楼主有用。 |
3
mrhuiyu 2015-05-04 08:15:16 +08:00
我不是工程师但是我有过相同的经验。
例如在国外可以很快的访问加载完成网页(我当然没出国,是别人帮我看的) 然后我在国内就是迟迟加载不完成!那个气人啊!后来看浏览器右下角,会告诉你什么东西在加载,然后慢慢排除即可。 |
4
adami 2015-05-04 08:29:32 +08:00 via iPhone
客户用了代理
|
5
boai 2015-05-04 08:35:22 +08:00
google fonts?
|
6
tenione 2015-05-04 08:55:48 +08:00
我看你这个帖子的时候,顺手点了网站链接。现在回帖都写完了,网站还是一片白板。
|
8
T7 2015-05-04 09:04:54 +08:00
的确国内要翻才能打开
|
9
mongodb 2015-05-04 09:05:15 +08:00
|
10
jeansfish 2015-05-04 09:07:23 +08:00
现在Napier测试快速的
|
11
longquanwo 2015-05-04 09:07:47 +08:00
@mongodb 哥们这是啥软件
|
12
tvvocold 2015-05-04 09:32:01 +08:00
图片太多了,上 CDN
|
13
adspe 2015-05-04 09:35:17 +08:00 via Android
lazy load试过吗
|
14
tvvocold 2015-05-04 09:38:31 +08:00
BTW, 所有 Static Files 最好都上 CDN(最好是新西兰的 CDN)。另外,那张图片的确改删或压缩下。
|
15
tvvocold 2015-05-04 09:40:56 +08:00
|
16
cover 2015-05-04 09:45:51 +08:00
GET http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit net::ERR_CONNECTION_TIMED_OUT
|
17
cover 2015-05-04 09:46:03 +08:00
坐标 杭州
|
18
cover 2015-05-04 09:46:30 +08:00
这个timeout了以后 就加载出来了
|
19
endrollex 2015-05-04 09:50:17 +08:00
tracert 一下,看看笔记本的线路是不是和手机一样,mac不知道怎么检测,不过tracert不走代理也不走80端口
|
20
imn1 2015-05-04 10:11:36 +08:00
这张图片是1920*1080,即使不算网速,渲染也吃紧(我对手机不熟,手机是否内置图片优化不清楚)
我这边即使页面打开后,在标签间切换时,那图片也要延时半秒显示 另外这张图片在html找不到,应该是在css中后加载,这样就几乎是最后且最大字节 这幅图片只是灰度图,没必要做这么大,用技术铺满就可以了 静态内容可以分一个域名/cdn,这样对浏览器利用 pipelining 有利,不过关键还是那图片太大 |
21
pirex 2015-05-04 10:16:47 +08:00
safari国内访问
7s |
22
pirex 2015-05-04 10:18:13 +08:00
Chrome也测试了下,没问题。
检查下客户机器上的网络环境,代理啊什么的 |
23
b821025551b 2015-05-04 10:23:51 +08:00
@longquanwo 我感觉很像浏览器自带的开发人员工具耶
|
24
ericls 2015-05-04 10:33:43 +08:00
北美 很快
话说 我也是一直 flask mongodb uwsgi nginx 哈哈 真有缘 |
25
jyz19880823 2015-05-04 11:18:15 +08:00
有的 mac 确实有访问某些资源很慢的情况,之前遇到过,是卡在其中一步上,可以仔细看下
|
27
gamexg 2015-05-04 11:52:14 +08:00
|
28
cfan8 2015-05-04 12:19:41 +08:00
@gamexg 应该没什么关系,看16-18楼的reply应该是有blocking resources,楼主改成非block加载试试看?
|
29
Chrisplus 2015-05-04 12:23:07 +08:00
Black-White-Man-bg-v5.jpg 加载时间忒长
|
30
archbishop 2015-05-04 12:35:43 +08:00
在我这里是这个
http://writehere.com/index/json/simple?skip=0&last_page=false&sort=latest&writers=everybody 中间卡住很久 网页我不懂,仅供参考 |
31
chinawrj 2015-05-04 12:43:26 +08:00
支持LZ维护用户的合法权益!
|
32
phy25 2015-05-04 13:17:19 +08:00
@longquanwo FireFox 自带的 F12 开发工具。
|
33
guoqiao OP 抱歉各位, 大家没有登录时看到的是欢迎页, 所以有一张大图.
请大家先放过大图的问题, 我说的无法加载是登陆后这个页面(或者在欢迎页点"have a look"也能看到): ![]( ) @gamexg @lerry 浏览器的并发请求限制我是知道的, 这个地方的问题是早期采用了Flask的assets方式来加载静态资源, 经常出现一些问题. 后来为了调试, 全部改成了直接引用的方式, 所以资源数目很多. 当时测试了下, 发现问题也不是很大, 就暂时放下了. 大家如果要在网站上挑毛病, 自然是可以挑出一堆的, 那些细节我可以稍后优化. 我主要的困扰是: 为什么只有客户的这台电脑上出现无法加载的问题, 可能有哪些原因? |
34
yahoo21cn 2015-05-04 13:26:03 +08:00 via Android
内存不够了?
|
35
kozora 2015-05-04 13:33:31 +08:00
我这边秒开啊 不管是不是加了SS还是直连都是秒开
|
37
tczzjin 2015-05-04 13:42:36 +08:00
在客户电脑上直接打开单个静态文件看看timing的数据,比如直接地址栏打开那张加载了26s的图片,看看具体的timing是啥,截个图
|
38
seki 2015-05-04 14:11:05 +08:00
我看到几十K 的图片群中钻出来一张 596K 的图片
我觉得你可以试试把静态文件先放 CDN 上看看有没有改善,服务器这边能试的都试完了,那就只能是你客户电脑的问题了——听描述也挺像 |
39
daniel51 2015-05-04 15:19:24 +08:00
我用mac也是一直打不开。。。。。
|
40
pandorla1984 2015-05-04 15:44:29 +08:00
基本可以认为是客户端的问题吧,但要确认问题现在的信息不够,推荐在那台出问题的air上装多个浏览器 例如FF,CHROME加上原生的safari,看看是不是都慢。如果都慢,那就是网络设置的问题,可能air的wifi不太稳定,接网线试试看,或者ping -t看是否会偶尔超时。如果只是某个浏览器慢,那就是浏览器的问题,卸载重装或者研究一下具体卡在哪里,哪个版本的浏览器,然后有针对性地解决。
如果怀疑是网站代码问题,也很简单,在浏览器端禁用CSS和JS,再看打开速度。如果正常,说明网站服务器没问题,客户端代码有点问题,再有针对性的调试前端代码。 |
41
ywisax 2015-05-04 15:55:58 +08:00
我看了下,好像很多资源请求都是pending。之前在刷feed时候看过有人遇过过跟你类似的问题。
直接给传送门吧。http://fex.baidu.com/blog/2015/01/chrome-stalled-problem-resolving-process/ 希望对你有帮助。 |
42
YAFEIML 2015-05-04 16:46:09 +08:00
因为客户不想要了
|