所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里，笔者通过本文整理出关于前端性能优化的九大策略和六大指标

随着公司业务的不断壮大，最近老是有用户反应公司APP内的商城打开比较慢，这可不行啊，慢了容易流失用户，流失用户减少公司业绩，公司业绩少我的年终奖就少…………，所以为了公司，也为了自己，开始优化之路。 商城系统是去年开发的，是一个基于vue2.0的spa项目，最好的优化思路当然是…

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可…

很明显，我们的对于用户的响应速度和界面渲染速度，提升了 50% 左右。 该工具已经在 npm 发了包，也在 git 提交了项目，有兴趣的可以去看看，顺便点个 star ，谢谢了。 已经有 n 久没有写过文章了，由于最近工作比较忙，而且项目当中对于前端性能还有架构方面的挑战性还是…

UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。 无限滚动加载在互联网上到处都有应用：豆瓣首页是一个，Facebook的Timeline是一个，Tweeter的话题列表…

Web 页面性能优化，解决了图片相关，问题就解决了大半。本文从 Web 常见的图片格式入手，引出与图片优化相关的有效方案，期望对大家能有一点帮助。 有损压缩：借由将次要的信息数据舍弃，牺牲一些质量来减少数据量、提高压缩比。这个过程是不可逆的。图片常见的有损压缩手段是合并相近的像…

我们以 vue-cli 工具为例，使用 vue-router 搭建SPA应用，UI框架选用 element-ui ， ajax方案选用 axios, 并引入 vuex ，使用 vuex-router-sync 将 router 同步到 store ，服务器使用本地Nginx服务…

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。 能提升…