提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一些 `常规且有效` 的首屏优化建议 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理

1. 浏览器渲染过程是怎样的？ 按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、栅格化和显示。 渲染进程将 HTML 内容转换为能够读懂DOM 树结构。 渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets，计算出 …

如果我想要在网页中放大量的列表项，纯渲染的话，对于浏览器性能将会是个极大的挑战，会造成滚动卡顿，整体体验非常不好。虚拟列表思想的出现，就是为了帮助我们解决长列表问题的，下面让我们来一起了解下吧！

有经验的同学可以直接去看第四部分的流程图，如果你能完全理解那个图，那这篇文章你可以不看了，当然，看看当复习也好一、概述良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度通常浏览器缓存策略分为两

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。 能提升…

最近在进行前端面试方面的一些准备，看了网上许多相关的文章，发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么。仔细思考这个问题，发现确实很深，这个过程涉及到的东西很多。这个问题的回答真的能够很好的考验一个web工程师的水平，于是特…

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

在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。 我们对十万条记录进行循环操作，JS的运行时间为187ms，还是蛮快的，但是最终渲染完成…