
前端-浏览器相关
记录/分享前端浏览器相关的知识/文章/心得体会
pzy_666
风会指引你前进的方向
展开
-
chrome插件下载
extfans收藏猫插件原创 2022-02-19 16:48:22 · 258 阅读 · 0 评论 -
白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间(LCP)
怎么获取到这两个数据通过chrome开发者工具Performance选项卡通过chrome开发者工具Lighthouse选项卡通过JS计算web-vitalsFP & FCP & LCPFP:(First Paint / 首次绘制) 页面第一次绘制像素的时间,实际也是白屏时间FCP: (First Content Paint / 首次内容绘制) 这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。这个就是实际有意义的首屏时间,也就是我们通常要优原创 2022-02-19 16:07:07 · 5959 阅读 · 0 评论 -
chrome开发者工具network选项卡最下面的状态栏数据说明
你这到底指的是哪里?以下图数据为例,逐个说明72 requests是指本次总共监听到了72个请求35.8 kB transferred通过网络加载的资源有35.8 kB2.1 MB resources本次监听到的所有请求加载的所有资源经过解压之后的原始大小Finish: 1.38 s页面上所有 http 请求发送到响应完成的时间, HTTP1.0/1.1 协议限定,单个域名的请求并发量是 6 个,即 Finish 是所有请求(不只是XHR请求,还包括DOC,img,js,css等资源的原创 2022-02-19 14:54:51 · 4647 阅读 · 0 评论 -
本地开发https解决方案
情景说明有时候开发需要通过https来进行,那么这个问题怎么解决呢?通过npm安装mkcert工具npm安装mkcert创建自签名 SSL 证书mkcert 使用指南:如何快速创建自签名 SSL 证书vue项目本地开发使用刚刚的证书vue开启https,加载本地证书vite-plugin-mkcert使用Vite 使用 https 凭证服务方法(搭 mkcert )局域网内测试https应用局域网内测试https应用...原创 2022-02-19 13:32:56 · 4173 阅读 · 0 评论 -
sessionStorage, localStorage,Cookie的异同
类型数据有效范围存储大小存储位置sessionStorage当前标签页未关闭时都有效(注意:chrome89之后, 正常情况下多个标签页是无法共享数据)最大5M仅存储在客户端localStorage一直有效,除非手动清除5M仅存储在客户端Cookie如果未设置失效时间,那么只要浏览器未关闭都有效,如果设置了失效时间,则在失效时间之前都是有效的4KB每次请求都会携带, 如果存储的数据太多,可能会导致性能问题简化操作的工具库js-cookie相关文...原创 2022-02-07 11:09:12 · 450 阅读 · 0 评论