12 2024 档案
摘要:方案一:clientHeight、scrollTop 和 offsetTop 首先给图片一个占位资源: <img src="default.jpg" data-src="http://www.xxx.com/target.jpg" /> 接着,通过监听 scroll 事件来判断图片是否到达视口: l
阅读全文
摘要:节流 节流的核心思想: 如果在定时器的时间范围内再次触发,则不予理睬,等当前定时器完成,才能启动下一个定时器任务。这就好比公交车,10 分钟一趟,10 分钟内有多少人在公交站等我不管,10 分钟一到我就要发车走人! 代码如下: function throttle(fn, interval) { le
阅读全文
摘要:我们首先来回顾一下渲染流水线的流程: 接下来,我们将来以此为依据来介绍重绘和回流,以及让更新视图的另外一种方式——合成。 回流 首先介绍回流。回流也叫重排。 触发条件 简单来说,就是当我们对 DOM 结构的修改引发 DOM 几何尺寸变化的时候,会发生回流的过程。 具体一点,有以下的操作会触发回流:
阅读全文
摘要:这是一个可以无限难的问题。出这个题目的目的就是为了考察你的 web 基础深入到什么程度。由于水平和篇幅有限,在这里我将把其中一些重要的过程给大家梳理一遍,相信能在绝大部分的情况下给出一个比较惊艳的答案。 这里我提前声明,由于是一个综合性非常强的问题,可能会在某一个点上深挖出非常多的细节,我个人觉得学
阅读全文
摘要:浏览器的本地存储主要分为Cookie、WebStorage和IndexedDB, 其中WebStorage又可以分为localStorage和sessionStorage。接下来我们就来一一分析这些本地存储方案。 Cookie Cookie 最开始被设计出来其实并不是来做本地存储的,而是为了弥补HT
阅读全文
摘要:缓存是性能优化中非常重要的一环,浏览器的缓存机制对开发也是非常重要的知识点。接下来以三个部分来把浏览器的缓存机制说清楚: 强缓存 协商缓存 缓存位置 强缓存 浏览器中的缓存作用分为两种情况,一种是需要发送HTTP请求,一种是不需要发送。 首先是检查强缓存,这个阶段不需要发送HTTP请求。 如何来检查
阅读全文