共计 1339 个字符，预计需要花费 4 分钟才能阅读完成。
在浏览器同域名并发申请都产生并发数限度，并发限度通常是 4～8 以内，那么来理解浏览器申请并发限度的起因和优化伎俩。
浏览器并发数量统计
浏览器为什么要申请并发数限度？
在理解优化伎俩之前咱们先理解浏览器限度并发申请的起因
1. 对操作系统端口资源思考
PC 总端口数为 65536，那么一个 TCP（http 也是 tcp）链接就占用一个端口。操作系统通常会对总端口一半凋谢对外申请，以防端口数量不被迅速耗费殆尽。
2. 过多并发导致频繁切换产生性能问题
一个线程对应解决一个 http 申请，那么如果并发数量微小的话会导致线程频繁切换。而线程的上下文切换有时候并不是轻量级的资源。这导致得失相当，所以申请控制器外面会产生一个链接池，以复用之前的链接。所以咱们能够看作同域名下链接池最大为 4～8 个，如果链接池全副被应用会阻塞前面申请工作，期待有闲暇链接时执行后续工作。
3. 防止同一客服端并发大量申请超过服务端的并发阈值
在服务端通常都对同一个客户端起源设置并发阀值防止歹意攻打，如果浏览器不对同一域名做并发限度可能会导致超过服务端的并发阀值被 BAN 掉。
4. 客户端良心机制
为了避免两个利用抢占资源时候导致强势一方无限度的获取资源导致弱势一方永远阻塞状态。
优化伎俩
那么咱们晓得了浏览器并发限度的起因咱们能够从上面几方面动手优化
域名散发
将申请通过多个域名离开申请，比方 100A 申请 -> (25A + 25B + 25C + 25D)。然而倡议 4 个左右。因为过多域名会导致 dns 解析性能问题。
cookie free
cookie free 其实是辨别主站点申请与其余主要申请的 cookie 存储和携带。当网站的 cookie 大小 5kb，发送 150 个申请全副携带上 cookie 就是 750kb，在 1024 Kbps 的常见上行带宽下，须要长达 7.5 秒左右能力全副发送结束。只管这些申请可能存在并发执行，然而在动态资源申请上简直没必要携带 cookie 信息。所以咱们能够启用主站点域名和其余域名进行申请辨别 cookie 的携带。
小图片合并成大图（雪碧图）
把多张小图片合并成一张大图，通过 css 的 background 背景精灵定位显示。缩小图片资源的申请数量，雪碧图就是常见的一种伎俩
设置 Cache-Control max-age
当咱们确定我的项目那些资源是短暂不变动的咱们对其设置版本号管制和 Cache-Control max-age 进行长时间缓存，缩小浏览器对资源从新申请。
loading Image 懒加载
懒加载其实是大型网站通常必备对一个伎俩，为了避免无意义加载场景。通常用户在进来对第一屏对内容不会全副查看，可能在浏览过程中曾经跳转到其余页面。那么在用户浏览到的中央没必要进行图片加载、节点创立等操作，能够等用户滚动到节点内容区域再进行显示和加载内容。
PWA（渐进式利用）
近几年比拟火的一个优化伎俩，通过 web Service 对以后利用申请过的申请进行缓存到客户端，用户下次访问页面或刷新页面都是间接从客户端本机间接读取之前的 response。能够细化管制缓存动态资源、api 申请等。然而 pwa 缓存有限度条件：只能缓存 https 协定、主站点域名的申请。并且之前缓存过的申请须要在下次 PWA 机制启动时候进行革除和刷新，这样会导致缓存的资源须要两次拜访页面能力产生更新。