这时候就需要 polyfill 了, 需要在项目入口文件最开头引入@babel/polyfill. 但是在项目中, 通常仅用到了有限的 polyfill 内容, 而最新版的@babel/polyfill包体积有 81.2k(gzipped 27.7k) 大小 useBuiltI…

每一个开发者在开发项目中，不可避免要和图片打交道，优化图片似乎也成了一个必修课。图片优化也不仅仅是性能上的优化，还要进行体验上的优化。至于怎么优化图片，没有固定的方式，只能具体场景，具体分析，选择合适的方案。不多说，下面也简单介绍下自己处理过，了解过的一些方式。如果大家有补充，…

在日常开发中，除了现成插件的使用外，还有很多问题是只能自己动手的。先抛出问题，当一个下拉列表的数据达到几千条甚至上万，这个时候浏览器已经会出现严重卡顿了。看看下面的例子 这个问题其实和表格数据是同一个性能问题，表格的解决方式是通过分页器来减少页面承载的数据量。那么下拉列表该如何…

由于前端技术的蓬勃发展和你自身的不断努力，很多小伙伴已经打通了任督二脉，做到了前后端通吃。你们就是自己程序世界里的神，在这里你们无所不能，创造世界，制定规则和逻辑。当一个属于你的世界做好后，你需要展示给朋友，发布于众人，让爱你的人欣赏。这时候我们需要一个强有力的服务器作为容器，…

1. http请求全过程 2. DNS解析全过程(dns-prefetch, preconnect, preload, prefetch, def, async) 3. TCP 连接(三次握手，四次挥

几个月前，我在国外旅行，想给朋友看我个人（静态）网站上的一个链接。我试着浏览我的网站，但花费的时间比我预期的要长。网站绝对没有任何动态内容--只有动画和一些响应式设计，而且内容始终保持不变。 我对结果感到震惊，DOMContentLoaded 要 4 s，整个页面加载要 6.8…

本文分为四个部分，文章的递进思路是由整体到局部，由业务概念到技术细节，由主线到分支，由现在到未来： - 浏览器缓存设计的思路和策略 - 实现缓存过程中的技术细节 - 缓存与ServiceWorker结合 - Chrome浏览器的缓存总揽以及HTTP/2缓存 HTTP相关的缓存知识点可以说很死板，因为有很详细的官方文档对每一条规则进行描述；但同时也很灵活，因为浏览器和服务端的实现不一定会按照标准去实现。所以本文的内容也仅供参考

这篇文章将介绍下实际使用performance对页面进行优化的过程。总的来说，chrome performance工具让我们更方便的发现在代码运行过程中的问题在哪里，便于对一些可能注意不到的问题进行定位、分析和优化。原文首发于个人博客 首先，我们对进入整个详情页进行分析，整个页…

这周接到一个需求－给输入框做模糊匹配。这还不简单，监听input事件，取到输入值去调接口不就行了？ 然而后端小哥说不行，这个接口的数据量非常大，这种方式调用接口的频率太高，而且用户输入时调用根本没有必要，只要在用户停止输入的那一刻切调接口就行了。 大家一定见过那种左右两边中间放…