前端性能优化方案都有哪些?

前端的资源是多方面,包括HTML、css、js脚本、Image、视频等等。现在只说下常见的优化方案:

一、页面级优化。
1.减少HTTP请求数量,尽可能的保持页面结构简洁。
减少资源的使用、合理设置HTTP缓存,资源合并与压缩(web服务器开启gzip压缩等)
css雪碧图、 图片懒加载(或者加载首屏)。

  1. 将外部脚本置底,避免浏览器加载js脚本而堵塞内容加载。
  2. 异步执行inline脚本,懒加载脚本js,即当触发时加载或者即将触发时预加载。
    4.减少不必要的http跳转,以及避免重复的资源请求。

二、代码级优化:
1.避免不要的回流(reflow)与重绘(repaint)。
2.避免使用 eval和 Function

  1. css避免过多的父级
  2. 图片压缩,图片服务器等。小图标base64或者由SVG代替,Svg的代码量比base64的要少很多。

三 、使用CDN、减少DNS查询、添加Expires头、避免重定向等

你可能感兴趣的:(前端性能优化方案都有哪些?)