前端并发优化技巧

1,225 阅读1分钟

一.浏览器同域名请求的最大并发数限制

在这里插入图片描述

二.优化

1.cookie free

      cookie free: 在请求下载静态小图片、静态小文件的时候,浏览器会把它当成普通请求一样,在request的header信息里附加cookie信息。实际上99.99%的静态小图片、静态小文件都需要知道任何cookie信息。当你的header都附加1kB的cookie,那么对于一个有50个小文件的复杂网页来讲,就白白增加了50kB的传输量。 为了避免让浏览器发送这些无用的cookie信息,一般把静态资源与主站分别放在不同的域名下。

2.domain hash

     使用多个域名加大并发量(因为浏览器是基于domain的并发控制,而不是page),不过过多的散布会导致DNS解析上付出额外的代价,所以一般也是控制在2-4之间。 这里常见的一个性能小坑是没有机制去确保URL的哈希一致性(即同一个静态资源应该被哈希到同一个域名下),而导致资源被多次下载。

3.css sprites

       由于现在的网页的丰富多才,往往一个页面就要在加载很多的图片,为了解决图片请求带来的并发问题,利用雪碧图或iconfont解决这问题

4.js/css combine

     浏览器在解析如果不连贯就会造成多次重新渲染的,为了解决这个问题通常对内容进行多余空格、空行、注释的整理和压缩的

5.max expires time:

     合理设置客户端缓存时间。

6.loading images on demand

    图片按需加载。