一篇文章演示如何监测项目的性能问题，一步一步来解决发现的web性能问题。使用工具Lighthouse和performance

通过图-1性能瀑布可以清晰的看到script执行占了8.9s的时间，通过上图即图-5可以看到script的的调用栈主要集中在创建vue实例时的createChildren上面。 通过上图即图-6可以清晰的看到render耗时主要集中在Recalculate Style、Layo…

——本文是对之前同名文章的修正，将所有webpack3的内容更新为webpack4，以及加入了笔者近期在公司工作中学习到的自动化思想，对文章内容作了进一步提升。 作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动…

在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。 我们对十万条记录进行循环操作，JS的运行时间为187ms，还是蛮快的，但是最终渲染完成…

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

性能优化相关的文章其实网上挺多，但是大部分都是在讲如何优化性能，也就是讲方法论。但是在实际工作中，如何量化性能优化也是相当重要的一环。今天本文会介绍谷歌提倡的七个用户体验指标（也可以认为是性能指标），每个指标分别根据以下几点讲解： 首次绘制，FP（First Paint），这个…

作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动端快速发展的时代，我们的网页不仅只是呈现在用户的PC浏览器里，更多的时候，用户是通过移动产品浏览我们的网页。加之有越来越多的开发者投入到Web APP和Hybri…

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

对于后台开发来说，记录日志是一种非常常见的开发习惯，通常我们会使用try...catch代码块来主动捕获错误、对于每次接口调用，也会记录下每次接口调用的时间消耗，以便我们监控服务器接口性能，进行问题排查。 刚进公司时，在进行Node.js的接口开发时，我不太习惯每次排查问题都要…