不论是 PC 还是移动端，图片一直占据着页面流量的大头，在图片的大小和质量之间如何权衡，成为了长期困扰开发者们的问题。而 WebP 技术的出现，为解决该问题提供了好的方案。本文将为大家详细介绍 WebP 技术，同时也会分享该技术在 MIP 项目)中的实践。 WebP 是由 Go…

由DOM或者布局的变动而触发。 如你改变了一个div的位置，或者是改变了这个div的width, height, position 或者布局类的样式。 通过一次完整的web请求和渲染过程以及如何优化网页，我们可以知道页面渲染的时候，会忽略掉display: none这一类的不占…

前几周我们开始了一个关于深度探索 JavaScript 的系列，和 JavaScript 如何工作：我们想通过已经知道的 JavaScript 内容，把它们组织到一起帮你写出更好的代码和应用。 这个系列的第一篇文章关注了运行时和调用栈的引擎论述。第二篇深度调查了 Google'…

这个会不会是因为html嵌套太深导致Layout等计算复杂，所以CPU上升了呢，笔者尝试把DOM结构简单化，以及加上contain: strict等Layout隔离的方法，也是没有效果。所以只能是JS执行问题了，通过Chrome devtools的Performance可以研究…

本文核心分为两部分，第一部分讲述普通浏览器中能干的事情，第二部分则讲述在自建容器的背景下更能干的事情。 文章内容会比较粗略，如果你对具体实现感兴趣，欢迎在 这 留言。 通常情况下，一个 html bundle 里面一般会有 script 等标签去加载其他的资源。浏览器在加载完 …

写代码难免会碰到错误。因此，在项目上线后，我们还需要主动对项目的错误进行收集，不能等用户发现错误，再联系我们，我们再去处理。 本文章为前端进阶系列的一部分，更多内容可查看 https://github.com/hpoenixf/hpoenixf.github.io

上一节我们认识了节流函数 throttle，了解了它的定义、实现原理以及在 underscore 中的实现。这一小节会继续之前的篇幅聊聊防抖函数 debounce，结构是一样的，将分别介绍定义、实现原理并给出了 2 种实现代码并在最后介绍在 underscore 中的实现，欢迎…

作为最接近用户的前端，每每出现问题当然首当其冲，如果必现也就罢了，Debug 或者 抓包什么的反正各种手段，是自己的问题解决问题，不是自己的问题，也方便甩锅出去。但是如果这个项目恰好还复杂度高、链路长、关联方很多，并且这个问题还是 偶现 的 线上 问题，无异于在开动的火车上排查…