前端性能优化方案

时间:2021-07-10 05:57:39

1.使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显

2.针对带cookie的请求,由于在同域名的资源请求时,浏览器会默认带上本地的cookie,针对这种情况,在某些场景下是需要优化的。

譬如以下场景:

  • 客户端在域名A下有cookie(这个可以是登陆时由服务端写入的)

  • 然后在域名A下有一个页面,页面中有很多依赖的静态资源(都是域名A的,譬如有20个静态资源)

  • 此时就有一个问题,页面加载,请求这些静态资源时,浏览器会默认带上cookie

  • 也就是说,这20个静态资源的http请求,每一个都得带上cookie,而实际上静态资源并不需要cookie验证

  • 此时就造成了较为严重的浪费,而且也降低了访问速度(因为内容更多了)

当然了,针对这种场景,是有优化方案的(多域名拆分)。具体做法就是:

  • 将静态资源分组,分别放到不同的子域名下

  • 而子域名请求时,是不会带上父级域名的cookie的,所以就避免了浪费

说到了多域名拆分,这里再提一个问题,那就是:

  • 在移动端,如果请求的域名数过多,会降低请求速度(因为域名整套解析流程是很耗费时间的,而且移动端一般带宽都比不上pc)

  • 此时就需要用到一种优化方案: dns-prefetch(让浏览器空闲时提前解析dns域名,不过也请合理使用,勿滥用)

3.服务器端开启gzip压缩传输,减少传输时数据的大小

4.js实现持续动画效果的时候,如果是ie9及ie9以上就使用requestAnimationFrame,ie9以下就使用setTimeout

5.setTimeout浏览器能解析的最短时间间隔时4ms,所以setTimeout(()=>{},0)其实等价于setTimeout(()=>{},4)

6.减少http请求

7.减少dns查询

8.使用cdn

9.避免重定向

10.图片懒加载

11.减少DOM操作

12.使用外部js和css

13.压缩js和css

14.css sprite

15.使用iconfont

16.多域名分发划内容到不同域名

17.减少使用iframe

18.避免图片src为空

19,css放头部,js放页面底部