前言 在现代 Web 应用中，页面性能直接影响用户体验和业务发展。我们近期对列表页进行了一次全面的性能优化，旨在提升用户访问效率，提升用户满意度。 接下来，将为大家详细分享这次优化的过程、方法和成果。

今天介绍下 Chrome dev tools 家族的一个小兄弟，它在 Chrome 57 之前叫作「Timeline」，而现在换了个更长的马甲 —— 「Performance」，毕竟名字要「长～～～～～～～～～」更能吸引注意。 也许你曾不经意启动过这个工具，看见里面五颜六色的图…

本文主要内容包括：什么是babel-runtime、如何使用、使用场景与限制、如何结合babel-polyfill进行性能优化。 本文所有例子可以在 笔者的github 找到。

从建立http连接开始，到页面展示到浏览器里，经历了加载、执行、渲染，重构的几个阶段。将分享下我自己的心得和其他人的优秀经验。 浏览器是友善的客户端，对同域名并发请求是有数量限制，过去浏览器一般是2个，支持H5的一般是6个；并且服务器端是可以关闭请求。 有朋友不理解，为什么不是…

chrome 的开发者工具中提供了很多高效工具方便我们对页面进行性能分析.之前自己只用着一些基本的功能, 最近详细的过了一下官方文档,特别是 performance 面板(大部分都是之前的Timeline面板) 的使用(需要相对新一些的chrome浏览器版本). 如果勾选了 m…

这篇文章主要讲如何利用 PerformanceAPI 辅助书写 CSP 指令 里的域名名单的思路，并不是写 CSP 的最佳实践，也未提供成熟工具。如果你还不了解 CSP 或者 PerformanceAPI，可以看下第 0 步（由于我并未特别深入 CSP 规则，如果有写的不对的地…

本文主要内容包括：什么是babel-polyfill，如何使用，如何通过按需加载进行性能优化。 本文所有例子可以在 笔者的github 找到。

Carousell 是一个在新加坡开发的移动分类广告市场，并在包括印度尼西亚、马来西亚和菲律宾在内的许多东南亚国家开展业务。我们在今年年初为一批用户推出了我们移动 Web 端的渐进式网页应用（PWA）] 版本。 在本文中，我们将分享 (1) 我们想要建立更快的 Web 端体验的…

自JavaScript诞生以来，前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。在美团支付的前端技术体系里，通过预渲染提升网页首帧优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。 通过对比，同构…