性能专栏
文章平均质量分 95
前端性能专栏
问白
网易高级前端开发工程师
展开
-
我是怎么从0到1搭建性能门禁系统的
一个常见的场景就是我们自己的产品使用lighthouse进行检测的时候,往往需要用户先登录,此时我们就可以使用Puppeteer来帮助我们先模拟用户登录,登录之后,利用Cookie的同源策略再次检测我们的页面就可以了。这里又会引申出另一个问题,由于我们的业务场景各不相同,导致我们的页面也是各有各的特点,比如音视频类型的网站里面的流媒体比较多,而淘宝、天猫京东,这些电商网站他的图片就非常多还有可能会做成长页面的效果,而一般的业务系统可能表格和弹框比较多。他的性能模型主要采集6个不同的和时间相关的指标。原创 2023-08-23 20:15:39 · 326 阅读 · 0 评论 -
浏览器页面缓存 - Cache【性能篇】
如果【停用缓存】被勾选了,浏览器发送的请求中就会自带 Cache-Control:no-cache和Pragma:no-cache两个请求头。会强制要求缓存把请求提交给原始服务器进行验证 (协商缓存验证)。假如 Cache-Control 在请求头中不存在的话,Pragma:no-cache的行为与 Cache-Control: no-cache 一致。在Demo演示之前,切记将浏览器中的 【网络 -> 停用缓存】选项不要勾选。否则浏览器不会从本地缓存取数据。原创 2023-04-09 20:45:35 · 2069 阅读 · 0 评论 -
lighthouse-自定义Gatherer与Audits
收集京东首页渲染出的Img元素有多少个,并获取其src属性值。也可以按需获取其他值,比如该元素有无设置宽高以达到减少重排的目的。或者获取某个异步加载的属性,以此来判断该Img图片是否进行了懒加载。这里简单通用就以元素的src属性为例说明如何自定义Gatherer和Audit在之前的lighthouse的介绍和基本使用方法中介绍了lighthouse的整体架构,在Gatherer部分,我们需要建立一个文件来实现具体的收集器。原创 2023-02-26 21:59:23 · 419 阅读 · 0 评论 -
Lighthouse组合Puppeteer检测页面
如上一篇文章结尾提到的一样,我们在实际使用Lighthouse检测页面性能时,通常需要一定的业务前置条件,比如最常见的登录操作、如果没有登录态就没有办法访问其他页面。再比如有一些页面是需要进行一系列的操作,点击某些按钮,调用某些接口完成一些业务之后才能打开某个页面。原创 2023-02-26 16:36:21 · 1414 阅读 · 0 评论 -
lighthouse的介绍和基本使用方法
Lighthouse是一个开源的自动化性能测试工具,我们可以使用该功能检测我们的页面存在那些性能方面的问题,并会生成一个详细的性能报告来帮助我们来优化页面。原创 2023-02-25 22:55:31 · 3783 阅读 · 0 评论