所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里，笔者通过本文整理出关于前端性能优化的九大策略和六大指标

大家总说性能优化的xxx条建议，但实际操作时又觉得很无力。本文就带你体验一次真实的性能优化案例和原理解析

在前面的部分，我们已经完成了文件的切片和 hash 的计算，接下来要做的就是把这些切片上传到后端了，这一部分并没有什么难度，按部就班的进行即可。 显然这里最关键的是如何对切片进行包装。 有了这些切片，我们再从前端发送一个 merge 请求，即可在后端完成切片的合并了。 在切片的…

聊下来以后得出一些结论：这类读者普遍就职于中小型公司，前端人员个位数，平时疲于开发，团队内部几乎没有基础建设，工具很蛮荒。工程化对于这些读者来说很陌生，基本不知道这到底是什么，或者说认为 Webpack 就是前端工程化的全部了。 笔者目前就职于某厂的基础架构组，为百来号前端提供…

作为前端同学，或多或少都会接到动画需求。如果是有规律性的动画还是相对容易实现的，但如果是比较复杂的帧动画，我们用 CSS 实现的话，就非常容易造成如下情况，设计师是卖家秀，我们开发的是买家秀。 或许你会想到用 GIF 实现，但是 GIF 经常会有杂边，无法满足设计师对精致度的要…

京喜小程序自去年双十一上线微信购物一级入口后，时刻迎接着亿级用户量的挑战，细微的体验细节都有可能被无限放大，为此，“极致的页面性能”、“友好的产品体验” 和 “稳定的系统服务” 成为了我们开发团队的最基本执行原则。 首页作为小程序的门户，其性能表现和用户留存率息息相关。因此，我…

长列表渲染、无限下拉也算是前端开发老生常谈的问题之一了，本文将介绍一种简洁、巧妙、高效的方式来实现。话不多说，看下图，也许你可以发现什么？ 说明了要素，也许你可以尝试着开始思考，看你是否能猜到具体的实现方案。 一直以来，检测元素的可视状态或者两个元素的相对可视状态都不是件容易事…

1. 背景 将网页保存为图片（以下简称为快照），是用户记录和分享页面信息的有效手段，在各种兴趣测试和营销推广等形式的活动页面中尤为常见。 快照环节通常处于页面交互流程的末端，汇总了用户最终的参与结果，直接影响到用户对于活动的完整体验。因此，生成高质量的页面快照，对于活动的传播和…

今天的主要内容包括：使用元素位置判断元素是否在当前视区使用IntersectionObserver判断元素是否在当前视区实例：懒加载实例：无限滚动实用npm包推荐正文1.使用元素位置判断元素是否在当前