得物的服务端监控是比较全面和有效的，除了上报原始日志数据，还通过数据分析制定线上告警机制，调用链路分析，而针对前端项目这一块，还是不够全面。本文主要是介绍得物针对监控做了哪些事情以及监控手段做个总结。

最近做了一个vue-cli项目的性能优化，这次也是把很多之前学过的知识应用在实际项目中，遇到了很多困难也学到了很多东西。 这是一个用vue-cli 3作为脚手架的PC端web应用，全局多页面局部单页面（根据用户角色划分）。基本上使用的vue-cli的默认配置，也没有专门做过性能…

提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一些 `常规且有效` 的首屏优化建议 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理

性能优化是所有前端人的追求，在这条路上，方法多种多样。这篇文章，说一下可以怎样定义性能指标及上报。 FP，全称 First Paint，翻译为首次绘制,是时间线上的第一个时间点，它代表网页的第一个像素渲染到屏幕上所用时间，也就是页面在屏幕上首次发生视觉变化的时间。 通过perf…

笔者是一个 react 重度爱好者，在工作之余，也看了不少的 react 文章, 写了很多 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方向和一些工作中的小技巧。送人玫瑰，手留余香，阅读的朋友可以给笔者点赞，关注一波 。 陆续更新前端文章。 方向分别加以探…

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。无损webp相比png减少26%大小。 从4…

0. 背景 随着构建体系不断完善、构建体验不断优化，webpack 已经逐渐成为了前端构建体系的一大霸主，对于工作中的真正意义上的前端工程项目，webpack 已经成为了我们前端构建技术选型的不二选择，包括 create-react-app 以及 vue-cli 等等业内常见的…

浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。 作用是在短时间内多次触发同一个函数，只执行最后一次，或者只在开始时执行…

JavaScript数组去重，一个老生常谈的问题了，但这次是解锁多种JavaScript数组去重姿势。 双重循环去重实现比较容易。 基本思路：如果索引不是第一个索引，说明是重复值。 基本思路：先对原数组进行排序，然后再进行元素比较。 基本思路：利用了对象的key不可以重复的特性…