下雨天DY

最近做 web 性能采集分析，一直觉得跟用户交互无关的采集都放在 onLoad 或 DOMContentLoaded 中很不合理。 一番搜索，发现 web 页面也是有生命周...

随着移动互联网的发展，用户对产品的使用体验要求越来越高。H5作为业务的重要载体，在移动端的应用非常广泛，因此H5页面性能是一个非常核心的用户体验指标。 本文结合【饿了么首屏...

H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也...

在处理浏览器兼容性问题之前，我们先来看一下现在的浏览器市场份额是怎样的，👇下面是来自statCounter的数据，基本上覆盖了全世界浏览器市场份额的统计，而且前端er经常...

Performance Timeline是W3C性能小组提出的一个规范，定义了让开发者在应用整个生命周期内收集各种性能指标的接口。 值得注意的是，在Node.js里同样遵循...

从 Webpack2.x 通过插件逐步实现 tree-shaking，到最近炙手可热的 Vite 构建工具也借助了 rollup 的打包能力，众所周知 Vue 和 Reac...

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。 Vue DevUI是一个通过开源社区孵化的 Vue3 开源组件库，这意味着从一开始Vue DevUI就不是靠个人...

深入研究 Vue 技术栈的源码原理，从框架源码解读到手写框架 ......................

为了提高英文水平，尝试着翻译一些英文技术文章，首先就从这个Vue的小技巧文章开始，目前英文版一共22篇。计划用时2~3个月翻译完成。 我们可以用不同的方式处理Web性能，其...

Tree-shaking是一种对项目进行性能优化的手段，其本质是像把枯萎的叶子从树上摇下来一样，将项目中没有用的代码段抖掉以减小最后生成的文件的体积，从而优化加载，提高用户...

优化，就是加以改变或选择使优良，在工作当中是让提升效率的好办法。 1. 去除无用的样式 配置完毕了，上面包含了一些基本的配置。大家可以把重点放在注释为去除无用的样式代码部分...

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读...

使用预取和预加载是网站性能和用户体验提升的一个很好的途径，本文介绍了使用prefetch和prefetch进行预取和预加载的方法，并使用webpack进行实现Link的链接...

那什么是内存泄漏呢？借助别的大佬给出的定义，内存泄漏就是指由于疏忽或者程序的某些错误造成未能释放已经不再使用的内存的情况。简单来讲就是假设某个变量占用100M的内存，而你...

注：只是俺的学习记录 transaction新增网络类型字段 type为resource的span新增文件大小字段、是否命中缓存字段、新增页面滚动时的fps字段...

以往大部分工具仅将加载性能作为web性能衡量指标，但是随时都有可能发生性能不佳的情况，不只限于加载期间。应用无法快速响应点击、无法平滑滚动或动画卡顿都会导致糟糕的体验。用户...

关于本文异常热闹的评论区，我在https://juejin.cn/post/6911883414110994439进行统一回应，后面没什么必要我不会直接在评论区进行回应，如...

Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。 配合无痕模式，可以避免chrome插件的影响。 1. 录制查看 下面部分是...

继上回讨论react-testing-library快速测试React组件渲染之后，你可能很快发现在实际使用当中遇到各种问题。比如这个： 这样的用法在JS文件中并不支持，能...

如果打开Charles时提示：程序已损坏，打不开。您应该将它移到废纸篓。此时需要在终端中执行以下命令即可：sudo spctl --master-disable 可以设置抓...