上一篇文章介绍了如何监听fetch API 发出的请求。本篇介绍一下如何监听ajax的请求。 监听本质上也是复写。 其中我们主要是覆写 setRequestHeader 方法和send方法，open方法也需要格外注意一点。 因为open、setRequestHeader、send方法都在xhr的原型上，所以这里需要对原型链有一点基本的理解。 另外 我们也需要考虑一点，如果有别的工具对xhr进行了覆写怎么办？ 我们再次覆写会不会覆盖他们的？所以我们要考虑尽可能的不对其他业务造成影响。 实现上也很简单，就是覆写前先给存…
近期团队内在推行前后端标准化，目的是解决前后端同学在研发流程中协作方面的痛点，同时提供前后端交互规范的合规检查，保障API的合规，帮助研发同学发现API中潜在的风险。 与此同时，平台中心提供了中心化的标准化检查，会对收集到的日志进行规范校验和聚合，为后续的分析和解决问题提供数据依据。 大体了解了一下，检测能力共4个大类，（URL、请求、响应、特殊校验），细分的类别包括URL参数必须编码、URL长度限制、请求方法规范、请求头大小的规范、请求参数重复、请求参数为空，响应参数为空，返回的结构体为空，返回码规范、隐私字段规…
从2017年pnpm的诞生，到现在各公司都在去npm、yarn化，pnpm正在陆续接管各大前端项目的依赖包安装。原因在于她使用软链接和硬链接的方式不仅提高了安装速度还节约了磁盘空间，同时避免了依赖分身和幽灵依赖等问题。 这篇文章先对比一下npm、yarn、pnpm的区别，再了解一下硬链接和软链接的应用。开始吧。 npm 老牌包管理工具npm的成功主要原因是Node的横行，引入了package.json文件，将所有的依赖都添加到了package.json中，比如运行 npm install --save lodash…
docker在前端的使用 - 命令篇 本地镜像管理 docker images : 列出本地镜像。 ➜ ~ docker images REPOSITORY TAG IMAGE ID CREATED SIZE demo/nginx v1 7ae06402eb54 About an hour ago 142MB docker rmi : 删除本地一个或多个镜像。 docker rmi -f demo/nginx:v1 docker tag : 标记本地镜像，将其归入某一仓库。 docker build 命令用于使用 …
这是docker在前端的使用实践篇，本文从一个小Demo入手，来学习一下基本的使用姿势。 拿一个场景来说，如果我们想要搭建一个网站，那我们常规操作需要这几部： 买一个云服务器，或者自己搞一个树莓派。 给服务器上装一个系统，无论是CentOS还是Ubuntu。 然后装nginx，如果需要数据库，那可能装一个套装。 前端在本地开发好项目，然后build出产物。 将产物同步到服务器上，然后配置一下nginx.conf，指定一个端口，配置上域名。 那就可以正常访问了。常规操作没有什么问题。 那我们现在用Docker来构建一…
一个人做到只剩了回忆的时候，生涯大概总要算是无聊了吧，但有时竟会连回忆也没有。 ——鲁迅 《朝花夕拾》 什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 我们常见的 meta标签中的 viewport 是 HTML5 针对移动端新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现，提供响应式解决方案。 一、引言 在PC时代，我们用 css 设置 1px 边框，显示器会用1个物理像素进行渲染。而进入移动应用时代后，我们原来设置1px边框…
一、背景 前端同学日常在本地开发联调或者线上问题排查等场景中，需要查看网络请求（Request & Response）、特定场景数据Mock、域名映射等一系列操作；特别在移动端场景开发时，更是需要经常抓包和请求Mock。单独的本地开发工具（如webpack的proxy）及Chrome调试不能满足需求，需要灵活的借助于一些请求代理工具来辅助我们日常开发工作。比如Mac下常用的便是Charles，能帮助我们拦截请求、篡改请求、本地代理转发等开发调试工作。 二、常规代理工具 名词解释 抓包：包，是指网络数据包，包…
前端性能优化指导原则 核心要素： 用户的使用环境 站点自身的性能表现 用户的使用环境我们是没办法控制的，我们只能优化自己。一般站在自身角度的优化主要分为两大类 网络性能 渲染性能 我们一个一个来讲：先说网络优化，主要包括三大类 减少关键资源个数 减少关键资源的RTT 降低关键资源的大小 首先我们先明确一下什么是关键资源：能阻塞网页首次渲染的资源称为关键资源。有一些比如图片，视频，音频 是不会阻塞渲染的，就不是关键资源。而html、css、js是会阻塞首次渲染的，因为这些会影响DOM树和CSSOM树的构建。 网络优化…
上一篇主要说了FST的获取方法，这篇就看看其他的几个性能指标。 首字节时间 Dom构建完成时间 Dom Readly时间 页面完全加载时间 首屏时间 问题表象 问题分析 排查方向 首字节时间过长 该阶段耗时过长代表着服务器响应和返回的时间长。可以借助首字节时间之前的几个指标进行更具体的分析，包括redirectStart、domainLookupStart等。 重定向过多DNS 查询时间长TCP 连接时间长服务器性能差 DOM构建时间过长 浏览器解析 HTML 构建 DOM 树的过程中，会遇到 JavaScript…
性能优化是每个公司每个开发人员都会做的事情。性能优化是指通过各种手段，提高应用程序的响应速度、吞吐量、资源利用率等性能指标，从而提高用户体验和系统效率。 性能优化是软件开发过程中非常重要的一环。需要注意的是，性能优化需要根据具体应用场景和需求进行，不能一概而论。同时，性能优化也需要进行平衡，不能只追求单一指标的提升，而忽略其他指标的影响。例如，为了提高响应速度，可能会牺牲系统的可靠性和安全性，因此需要进行综合考虑和权衡。 今天我们就简单谈一谈前端性能优化那点事。 我们要有一个共识。 首先，性能优化不能盲目，一定是问…