前端性能优化之加载优化-变化吧

2020年2月4日10:59:33优化评论阅读模式

性能优化是前端工程师进阶必备技能，也是面试中高频点之一

以下是我个人总结的性能优化的要点：

出发点：加载优化。加载资源其实是在页面显示过程中最耗时的过程，大概会占到总耗时的80%，因此加载优化是重中之重。

方案：

1.减少http请求。因为手机浏览器同时相应请求为4个请求（Android支持4个，ios 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个。

2.使用外联式引用CSS、JavaScript。无阻塞写法：css写在头部，javascript写在尾部（body结束标签前）。

3.压缩图片资源。图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。

4.使用缓存。使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache。

5.首屏加载。首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针首屏的快速显示做优化。

6.按需加载。将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量（按需加载会导致大量重绘，影响渲染性能）。常用方法：lazyload，滚屏加载，media query。

7.预加载。在资源加载过程中，使用loading图提示用户正在加载的状态及加载的进度，提升用户体验。但要防止加载时间过长导致用户流失。

以上7点本人吐血收集整理，喜欢的小伙伴点赞收藏哦

本文来源于：前端性能优化之加载优化-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

前端性能优化之加载优化