• 一步
    2019-08-10
    对于浏览器缓存地方的选择一直搞不明白其中的原理,在浏览器中访问的时候打开network面板,发现缓存的来源有的from disk有的是from memory。对于资源什么情况下缓存到硬盘什么时候缓存到内存,想请教一下老师

    作者回复: 这是浏览器的三级缓存机制,使用memory cache比disk cache 的访问速度要快,但是具体什么规则等我回头看下源码再来回答你了。

    还有另外一种cache,是service worker的cache。

     13
     31
  • mfist
    2019-08-10
    1 首先猜测最可能的出问题的地方,网络传输丢包比较严重,需要不断重传。然后通过ping curl看看对应的时延高不高。
    2 然后通过wireshake看看具体哪里出了问题。
    3 假如别人访问很快,自己电脑很慢,就要看看自己客户端是否有问题了。

    感觉平常碰到很多http问题,基本都能通过上面方式搞定

    作者回复: 👍

    
     30
  • 宇宙全栈
    2019-08-16
    老师好,请教下TCP连接如何断开的问题:
    1、没有 keep-alive 时,http数据传输完成后,是由浏览器主动发起断开TCP连接,还是由服务器主动发起断开 TCP 连接?
    2、设置了 keep-alive 时,当关闭页面时,浏览器会发起断开 TCP 连接吗?如果不关闭页面,浏览器会一直保持这个 TCP 连接吗?
    3、设置了 keep-alive 时,如果浏览器出现故障时了(挂掉了),此时服务器保持的 TCP 连接多久会释放?
     1
     16
  • Hurry
    2019-08-13
    使用 chrome network 面板,看那个 瀑布图 中每个阶段的含义,就可以判断问题出现在那个方向了,每个阶段的含义,https://developers.google.com/web/tools/chrome-devtools/network/reference#timing-explanation 举个例子 Content Download 如果太长,很有可能是下载的资源太大,但也有可能是网络慢导致的下载太慢,简单计算一下,在例如 Waiting (TTFB) 这个太长的话,有可能是网络慢,或者就是 后端处理时间过长导致的,至少可以排查掉前端原因,还有很多,例如 DNS lookup 等,但是最终要确认具体哪里慢,最好是结合系统日志去分析

    作者回复: 结合网络模块来分析,总结的挺好

     2
     16
  • 小美
    2019-08-12
    set cookie 会不会有安全问题,麻烦老师指导下

    作者回复: cookie是不安全的,比如黑客可以通过一些手段插入一些脚本到你的页面里面(具体一些途径我们浏览器安全篇再讲),通过脚本获取到你的cookie数据,然后就可以利用cookie做一些坏事了。

    当然也有一些方法规避,常用的一个是将部分cookie设置成httponly的属性,设置了httponly属性后cookie,就无法通过js脚本来读取了,只是在发送http请求时候会被带上!

    当然还有一些其他防范的方法,这个同样咱们后面在聊!

     1
     16
  • XWL
    2019-08-12
    浏览器刷新操作,ctrl+F5和F5有什么区别

    作者回复: 一个是强制刷新,也就是资源都走网络。

    一个是正常处理流程。

    比如通过网络面板,打开一个站点,再使用强制刷新,可以看到如下信息
    176 requests
    3.1 MB transferred
    3.5 MB resources
    Finish: 26.30 s
    DOMContentLoaded: 5.04 s
    Load: 14.88 s

    如果使用正常的刷新,看到的信息如下:
    171 requests
    419 KB transferred
    3.2 MB resources
    Finish: 25.09 s
    DOMContentLoaded: 1.41 s
    Load: 6.24 s

    其中的transferred是真正的网络传输的数据,使用强制刷新,传输的数据体积就大多了,而且请求时间也变得更长了。

     1
     14
  • 月隐千山
    2019-08-10
    老师,在做前端页面的时候,是否可以设置当前页面是否可以被缓存,以及哪些部分可以被缓存?还是说整个缓存机制都是由浏览器自己控制的?

    作者回复: 是没有办法通过前端代码来控制缓存的,缓存是后端或者部署的同学来控制的,但是前端同学应该知道那些内容要被缓存,和后端或者部署的同学配合来打!

     4
     11
  • liu_xm
    2019-08-10
    同域名只能建立6个tcp链接的话,那加载大量图片或者其他资源的时候不是很卡呢?

    作者回复: 是的,通常如图片这种静态资源都是直接配置到cdn上的

     7
     11
  • nissan
    2019-08-10
    请问老师,使用者的资讯(如UID=3431uad)是放在cookie还是localstorage中好呢?我的理解是存不存cookie是后端决定(要求set-cookie)存localstorage是前端程式控制的。是这样吗?

    作者回复: 是否要使用localstorage,还是要看具体应用场景。其实使用cookie会很方便,因为它会随着http请求头把cookie内容发送服务器,用localstorage需要重新实现数据上传和下载。

    
     9
  • houqx
    2019-08-23
    问一个今天遇到的跟本篇文章没有太大关系的问题:
    问题描述:前端有一按钮,点击可以签到(比如调用的接口名为doSign),签到成功后置灰,不能再点击。但是看服务端日志存在同一时间同一用户该接口的多次调用(通常为3次,间隔10ms以内)。
    我想问的问题是:
    1:这里的重复调用是哪里引入的(用户手抖多次点击?)
    2:浏览器在发出一个网络请求后,当这个请求还没返回的时候,会再重复发起相同的请求吗?(用户快速点击)
    展开

    作者回复: 用户快速点击也有可能的,通常,前端要处理防止多次点击的情况。

     3
     7
  • sprinty
    2019-08-29
    老是你好,有个疑问:在我理解中的 TCP 连接需要四元组(client ip, client port, server ip, server port)保证连接的唯一性,那浏览器是怎么对同一服务器(server ip, server port 不变)创建多个 TCP 连接的?

    浏览器只有一个网络进程且 client ip 不变,是不是在创建连接的时候,会监听多个 client port 以保证4元组的唯一?
     2
     6
  • 行云流水
    2019-08-22
    1.按照老师说的,至少在浏览器中 http是在 tcp的传输阶段。不是每一层独立完成后交给下一层。OSI七层模型只是一个参考,浏览器只是参考OSI模型实现,不一定遵守OSI的层级关系?
    2. 上一节有一个同学提问说的,针对数据包实时渲染问题。老师说在TCP层就解决了丢包和顺序问题。但现在HTTP是在TCP层的传输层中使用。不明白怎么解决丢包和顺序问题?
     1
     6
  • aaron
    2019-08-10
    老师,请问https为什么能防止网络劫持?

    作者回复: http在传输过程中是明文的,所以数据在传输过程中是能够被截获或者修改的,比如谁在你电脑上安装了一个网络拦截软件,或者你的路由器被谁安装了监听软件,甚至在网络服务提供商都有可能修改你页面的内容,基于这些原因,我们需要在传输过程中加密数据,这就是https出现的原因,即便你拦截到了请求,获取的只是加密后的数据,拿到也没有什么用。

    这块在浏览器安全篇会系统介绍。

     2
     6
  • Louis
    2019-08-13
    请问老师http的keep alive和http2中的信道服用有什么区别呢

    作者回复: 一个http中的keep-alive是排队请求,也就是一个http请求完成之后才能继续请求下一个,而http2中请求是并发的,可以同时处理很多请求!

    
     4
  • sunshineling
    2019-08-12
    老师,你说chrome一次最多只能建立6个tcp连接,有点不理解,这是说只能支持6个用户并发吗?

    作者回复: 是同一个域名下面,同一时间只能有6个并发请求,超过六个以上的需要排队!

     2
     4
  • peter
    2019-08-12
    请问:请求行和请求头是发送两次吗? 从文章的文字来看,是发送两次。 但我感觉是发送一次,即发送一次请求,该请求包含请求行和请求头。

    作者回复: 对,只发送一次。

    问下文章什么地方让你感觉是发送了两次啊?

    我检查下。

     9
     4
  • houqx
    2019-08-23
    不接CDN与接入CDN,DNS解析过程一样吗? 知道 A记录与cname,但是这里串不起来,还希望老师讲解一下
    
     3
  • 奋斗达人
    2019-08-20
    感觉更面向初学者,写的很浅出,不是很深入。但还是学到了不少新的知识:)
    1.Chrome针对每个域名只允许同时6个请求,多出的需要排队
    2.浏览器的缓存查找流程,什么时候是200,什么是304,如何更新Age
     1
     3
  • CMS
    2019-11-07
    Chrome 有个机制,同一个域名同时最多只能建立 6 个 TCP 连接,如果在同一个域名下同时有 10 个请求发生,那么其中 4 个请求会进入排队等待状态,直至进行中的请求完成。 是指同一个域名下的6个并发请求么。我理解建立一个tcp连接,可以处理多个请求吧?
    这一块蒙了,看好多人问这个

    作者回复: http/1.1 一个tcp同时只能处理一个请求,浏览器会为每个域名维护6个tcp连接!

    但是每个tcp连接是可以复用的,也就是处理完一个请求之后,不断开这个tcp连接,可以用来处理下个http请求!

    不过http2是可以并行请求资源的,所以如果使用http2,浏览器只会为每个域名维护一个tcp连接

     1
     2
  • Geek_0d3179
    2019-11-03
    老师您好~有个问题困扰我了。希望您能解答我,十分感谢。http2同个域名只能维持一个长连接。那我现在打开了一个域名下的a页面,然后又打开了这个域名的b页面,那这个b页面是新开一个tcp长连接吗?还是会用a页面的长连接?换句话说,维持一个tcp长连接,指的是一个页面维持一个?还是整个浏览器维持一个?还是同一个渲染进程维持一个?

    作者回复: 浏览器为用同一个域名只维护一个TCP连接。

    你从通过Chrome打开chrome://net-export/ 这个地址,然后记录网络过程。

    最后在使用这个https://netlog-viewer.appspot.com/ 打开你日志文件,就能看到h2的详细信息了。

    
     2
我们在线,来聊聊吧