JDR DESIGN 是京东零售设计中台的门户站点，展示京东零售设计服务平台的产品以及应用场景，特点是动效丰富、图片细节多、要求整站文案和外链可配置。项目最大的困难就是动效开发复杂和开发排期紧凑的问题。 这是我入职以来负责的第一个项目，需要花大量时间来熟悉新的开发流程，项目排期…

衡量一个 Web 页面的体验和质量一直有非常多的工具和指标 ... 每次我们去关注这些指标的时候都会非常痛苦，因为这些指标真的是又多又难理解，测量这些指标的工具也非常多。 当看到最近发布的 Chrome 83 中又增加了几个性能指标的时候我头都大了... 优化用户体验的质量一直…

前段时间，我将精力专注在Web性能领域；在这个领域下有个重要的课题是如何让网页更丝滑（流畅）。 想让网页变得丝滑，首先，我们需要一个标准来判断什么样的网页是丝滑的；其次，我们要准确的测量出网页的性能数据；最后，使用有效的方法让网页变得丝滑。 本篇文章将针对这三个方面进行详细的介…

为了保证的可读性，本文采用意译而非直译。 CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript一样，浏览器必须从服务器下载文件，然后进行解析并将其应用于DOM。由于优化程度极高，这个过程通常非常快——对于不基于框架的小型 web 项目，CSS通常只占总资…

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。无损webp相比png减少26%大小。 从4…

本文的目的就是通过一个案例分析了解前端性能的指标及其对应的优化手段。 根据刚刚疑问，前端性能优化的难点在于制定指标，并且将其具现化为数据展示，如果有个评分最好了，那我们就只要努力提供我们网站的评分就行了。 Ligthhouse收集了我们感兴趣的大部分数据，并对其进行了分析，将分…

内存泄漏的原因是指程序中己动态分配的堆内存由于某种原因未释放或无法释放,那么为什么没有释放呢(1.根据JS的垃圾回收机制，当内存中引用的次数为0的时候内存才会被回收,2.从根部出发触及到的对象被标记为

昨天上午接了一个电话面试，聊着聊着接说到了性能优化，然后面试官问到了长列表。其实之前做过的都只是简单的分页处理，但面试官问的肯定不是这个咯，他关心的是虚拟列表，大概以前粗略看过这个效果的实现源码，虽然我自己没实现过但有一些自己的想法，于是blablabla......，可能碍于…

个人专栏 ES6 深入浅出已上线，深入ES6 ，通过案例学习掌握 ES6 中新特性一些使用技巧及原理，持续更新中，←点击可订阅。 为了保证的可读性，本文采用意译而非直译。 图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话，图片大小有时高…