V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
guoqiao
V2EX  ›  程序员

网站唯独在客户的电脑上加载超级慢, 集思广益下, 可能是什么原因呢?

  •  
  •   guoqiao · 2015-05-04 07:49:06 +08:00 · 5789 次点击
    这是一个创建于 3493 天前的主题,其中的信息可能已经有所发展或是发生改变。

    背景

    给一个新西兰客户做了一个博客网站:

    http://writehere.com/

    技术组件: Python/Flask + Mongodb + Linode/Ubuntu + Nginx + uWSGI

    问题

    • 客户用自己的Macbook Air每天晚间(上网高峰期, 20:00-00:00)访问网站时, 总是超级慢, 除了顶部的导航, 其它内容需要数分钟才能加载, 甚至一直加载不出来.
    • 白天大部分时候正常, 仅仅有时候要加载很久, 而晚上问题变得很严重.
    • 新西兰是小国, 高峰期时此站访问人数也不过几十人而已.
    • 其它网站都正常, 仅此站出现问题.
    • 问题仅仅出现在客户自己的Macbook Air上, 他自己的iPhone(同一个 WIFI 网络下)没问题. 同时, 当他说加载慢时, 我在自己家用我的Macbook Pro访问, 也没有问题.
    • 在 Chrome 中"Empty Cache and Hard Reload"也没用.
    • Chrome和Safari加载都很慢.
    • DNS 修改为8.8.8.8或8.8.4.4, 不起作用.

    从目前的情况看, 问题似乎出在这台Macbook Air上. 客户甚至怀疑自己的电脑是不是中了病毒.

    有一次白天我们一起喝咖啡的时候, 他把MBA带来了. 他通过MBA 连接iPhone 的热点访问网站, 我亲眼看到加载很慢. 而同时我们俩用手机访问都没有问题. 他访问别的网站也没有问题.
    我打开 Chrome DevTools, 发现是静态资源耗时异常, 例如有一张图片加载了26秒.

    请教各路大神, 这可能是什么原因呢?

    42 条回复    2015-05-04 16:46:09 +08:00
    Citrus
        1
    Citrus  
       2015-05-04 08:08:26 +08:00 via iPhone
    实际上你描述了半天没说到点子上。
    Chrome 的 DevTool 可以详细展示每个资源每个阶段的耗时,你应该看这个然后找找是哪个阶段出现了问题。同时可以配合服务器日志查看。
    lerry
        2
    lerry  
       2015-05-04 08:13:14 +08:00
    他访问别的网站都没问题吗?我第一次打开也感觉有点慢,后来好些。

    楼主可知道浏览器对于统一域名的并发请求数是有限制的?

    建议把css合并成一两个文件,js也可以合并,用于样式的图片也可以用css sprite合并,页面上的图片建议放到子域名下,既然后端是Python也好控制。

    可以把例如img1,img2,img3....等很多子域名解析过去,显示的时候随机选一个前缀,不管是哪一个都可以加载,我看豆瓣是这样做的。为了更好的缓存,也可以让图片和子域名的对应是固定的。

    我也是个前端新手,希望这些对楼主有用。
    mrhuiyu
        3
    mrhuiyu  
       2015-05-04 08:15:16 +08:00
    我不是工程师但是我有过相同的经验。
    例如在国外可以很快的访问加载完成网页(我当然没出国,是别人帮我看的)
    然后我在国内就是迟迟加载不完成!那个气人啊!后来看浏览器右下角,会告诉你什么东西在加载,然后慢慢排除即可。
    adami
        4
    adami  
       2015-05-04 08:29:32 +08:00 via iPhone
    客户用了代理
    boai
        5
    boai  
       2015-05-04 08:35:22 +08:00
    google fonts?
    tenione
        6
    tenione  
       2015-05-04 08:55:48 +08:00
    我看你这个帖子的时候,顺手点了网站链接。现在回帖都写完了,网站还是一片白板。
    guoqiao
        7
    guoqiao  
    OP
       2015-05-04 08:59:08 +08:00 via iPhone
    @tenione 你是在国内吗?也许是网站引用了一些被墙的资源
    T7
        8
    T7  
       2015-05-04 09:04:54 +08:00
    的确国内要翻才能打开
    mongodb
        9
    mongodb  
       2015-05-04 09:05:15 +08:00
    jeansfish
        10
    jeansfish  
       2015-05-04 09:07:23 +08:00
    现在Napier测试快速的
    longquanwo
        11
    longquanwo  
       2015-05-04 09:07:47 +08:00
    @mongodb 哥们这是啥软件
    tvvocold
        12
    tvvocold  
       2015-05-04 09:32:01 +08:00
    图片太多了,上 CDN
    adspe
        13
    adspe  
       2015-05-04 09:35:17 +08:00 via Android
    lazy load试过吗
    tvvocold
        14
    tvvocold  
       2015-05-04 09:38:31 +08:00
    BTW, 所有 Static Files 最好都上 CDN(最好是新西兰的 CDN)。另外,那张图片的确改删或压缩下。
    tvvocold
        15
    tvvocold  
       2015-05-04 09:40:56 +08:00
    cover
        16
    cover  
       2015-05-04 09:45:51 +08:00
    cover
        17
    cover  
       2015-05-04 09:46:03 +08:00
    坐标 杭州
    cover
        18
    cover  
       2015-05-04 09:46:30 +08:00
    这个timeout了以后 就加载出来了
    endrollex
        19
    endrollex  
       2015-05-04 09:50:17 +08:00
    tracert 一下,看看笔记本的线路是不是和手机一样,mac不知道怎么检测,不过tracert不走代理也不走80端口
    imn1
        20
    imn1  
       2015-05-04 10:11:36 +08:00
    这张图片是1920*1080,即使不算网速,渲染也吃紧(我对手机不熟,手机是否内置图片优化不清楚)
    我这边即使页面打开后,在标签间切换时,那图片也要延时半秒显示
    另外这张图片在html找不到,应该是在css中后加载,这样就几乎是最后且最大字节

    这幅图片只是灰度图,没必要做这么大,用技术铺满就可以了
    静态内容可以分一个域名/cdn,这样对浏览器利用 pipelining 有利,不过关键还是那图片太大
    pirex
        21
    pirex  
       2015-05-04 10:16:47 +08:00
    safari国内访问
    7s
    pirex
        22
    pirex  
       2015-05-04 10:18:13 +08:00
    Chrome也测试了下,没问题。
    检查下客户机器上的网络环境,代理啊什么的
    b821025551b
        23
    b821025551b  
       2015-05-04 10:23:51 +08:00
    @longquanwo 我感觉很像浏览器自带的开发人员工具耶
    ericls
        24
    ericls  
       2015-05-04 10:33:43 +08:00
    北美 很快

    话说 我也是一直 flask mongodb uwsgi nginx 哈哈 真有缘
    jyz19880823
        25
    jyz19880823  
       2015-05-04 11:18:15 +08:00
    有的 mac 确实有访问某些资源很慢的情况,之前遇到过,是卡在其中一步上,可以仔细看下
    tenione
        26
    tenione  
       2015-05-04 11:21:04 +08:00
    @guoqiao 了解。是在国内。
    gamexg
        27
    gamexg  
       2015-05-04 11:52:14 +08:00
    楼主的css、js 文件是不是太多了,30个文件...
    合并或者分域名处理下吧。

    向 @lerry 说的“楼主可知道浏览器对于统一域名的并发请求数是有限制的?”
    cfan8
        28
    cfan8  
       2015-05-04 12:19:41 +08:00
    @gamexg 应该没什么关系,看16-18楼的reply应该是有blocking resources,楼主改成非block加载试试看?
    Chrisplus
        29
    Chrisplus  
       2015-05-04 12:23:07 +08:00
    Black-White-Man-bg-v5.jpg 加载时间忒长
    archbishop
        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
    中间卡住很久
    网页我不懂,仅供参考
    chinawrj
        31
    chinawrj  
       2015-05-04 12:43:26 +08:00
    支持LZ维护用户的合法权益!
    phy25
        32
    phy25  
       2015-05-04 13:17:19 +08:00
    @longquanwo FireFox 自带的 F12 开发工具。
    guoqiao
        33
    guoqiao  
    OP
       2015-05-04 13:23:47 +08:00
    抱歉各位, 大家没有登录时看到的是欢迎页, 所以有一张大图.
    请大家先放过大图的问题, 我说的无法加载是登陆后这个页面(或者在欢迎页点"have a look"也能看到):

    ![]( )


    @gamexg @lerry
    浏览器的并发请求限制我是知道的, 这个地方的问题是早期采用了Flask的assets方式来加载静态资源, 经常出现一些问题. 后来为了调试, 全部改成了直接引用的方式, 所以资源数目很多. 当时测试了下, 发现问题也不是很大, 就暂时放下了.

    大家如果要在网站上挑毛病, 自然是可以挑出一堆的, 那些细节我可以稍后优化.
    我主要的困扰是:
    为什么只有客户的这台电脑上出现无法加载的问题, 可能有哪些原因?
    yahoo21cn
        34
    yahoo21cn  
       2015-05-04 13:26:03 +08:00 via Android
    内存不够了?
    kozora
        35
    kozora  
       2015-05-04 13:33:31 +08:00
    我这边秒开啊 不管是不是加了SS还是直连都是秒开
    guoqiao
        36
    guoqiao  
    OP
       2015-05-04 13:37:12 +08:00
    @yahoo21cn 那不至于
    tczzjin
        37
    tczzjin  
       2015-05-04 13:42:36 +08:00
    在客户电脑上直接打开单个静态文件看看timing的数据,比如直接地址栏打开那张加载了26s的图片,看看具体的timing是啥,截个图
    seki
        38
    seki  
       2015-05-04 14:11:05 +08:00
    我看到几十K 的图片群中钻出来一张 596K 的图片

    我觉得你可以试试把静态文件先放 CDN 上看看有没有改善,服务器这边能试的都试完了,那就只能是你客户电脑的问题了——听描述也挺像
    daniel51
        39
    daniel51  
       2015-05-04 15:19:24 +08:00
    我用mac也是一直打不开。。。。。
    pandorla1984
        40
    pandorla1984  
       2015-05-04 15:44:29 +08:00
    基本可以认为是客户端的问题吧,但要确认问题现在的信息不够,推荐在那台出问题的air上装多个浏览器 例如FF,CHROME加上原生的safari,看看是不是都慢。如果都慢,那就是网络设置的问题,可能air的wifi不太稳定,接网线试试看,或者ping -t看是否会偶尔超时。如果只是某个浏览器慢,那就是浏览器的问题,卸载重装或者研究一下具体卡在哪里,哪个版本的浏览器,然后有针对性地解决。

    如果怀疑是网站代码问题,也很简单,在浏览器端禁用CSS和JS,再看打开速度。如果正常,说明网站服务器没问题,客户端代码有点问题,再有针对性的调试前端代码。
    ywisax
        41
    ywisax  
       2015-05-04 15:55:58 +08:00
    我看了下,好像很多资源请求都是pending。之前在刷feed时候看过有人遇过过跟你类似的问题。
    直接给传送门吧。http://fex.baidu.com/blog/2015/01/chrome-stalled-problem-resolving-process/
    希望对你有帮助。
    YAFEIML
        42
    YAFEIML  
       2015-05-04 16:46:09 +08:00
    因为客户不想要了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1186 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:35 · PVG 02:35 · LAX 10:35 · JFK 13:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.