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

最近在做一个较为通用的前端性能监控平台，区别于前端异常监控，前端的性能监控主要需要上报和展示的是前端的性能数据，包括首页渲染时间、每个页面的白屏时间、每个页面所有资源的加载时间以及每一个页面中所以请求的响应时间等等。 本文的介绍的是如何设计一个通用的jssdk,可以以较小的侵入…

没多少人能记住上面的定义，需要注意的是本文不是专业讨论系统架构的文章，笔者也还没到那个水平. 所以暂时没必要纠结于什么是架构模式、什么是架构风格。在这里尚且把它们都当成一个系统架构上的套路, 所谓的套路就是一些通用的、可复用的，用于应对某类问题的方式方法. 可以理解为类似“设计…

这段时间在学习切页面的时候，发现页面上的轮播图部分让我很感兴趣，因为是刚开始学习javascript，所以想要自己手写一个轮播图，于是查阅了好多资料，发现写轮播图的方法很多很杂，虽然最终学会了如何使用js写轮播图，但是花了我好长时间。 现在我想把自己总结的方法分享出来，其中第二…

如何用原生js实现一个简单的轮播图呢？前面我已经用一种方法实现了，可能有些小伙伴觉得那种方法写的轮播图有点low，不够炫酷。那么，那就请看看下面这种方法实现的轮播图吧！ 现在我就分享第二种使用原生js实现轮播图的方法，这种方法制作轮播图的原理主要是控制所有图片的display从…

Lighthouse分析web应用程序和web页面，收集关于开发人员最佳实践的现代性能指标和见解。 Lighthouse直接集成到Chrome DevTools中，在“Lighthouse”面板下。 安装：安装Chrome。 运行它：打开ChromeDevTools，选择Lig…

前述：前段时间出了性能分析的需求，需要对前端页面性能做一套自动化测试工具。领导都发话了，那咱说干就干。花了一周时间去找资料以及匹配优秀并且合适的开源插件。花了一个月的时间(断断续续，需求也要做的~)完成了这个工具的建设和开发。目前也搭建了一套平台来支撑这样的工具使用。前端用的V…

这篇文章分享了从遇到前端业务性能问题，到分析、解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案（Vue Lazy Component ）的过程。 问题起源于我们的一个页面，下面是这个页面的截图和初次请求的瀑布图。 初始加载的资源过多导致在 domInteractive …

长列表渲染、无限下拉也算是前端开发老生常谈的问题之一了，本文将介绍一种简洁、巧妙、高效的方式来实现。话不多说，看下图，也许你可以发现什么？ 说明了要素，也许你可以尝试着开始思考，看你是否能猜到具体的实现方案。 一直以来，检测元素的可视状态或者两个元素的相对可视状态都不是件容易事…