重绘和回流面试题（重绘和回流的区别）

大家好，我是讯享网，很高兴认识大家。

懒加载，顾名思义，在当前网页，滑动页面到能看到图片的时候再加载图片

故问题拆分成两个：

，，以及各种关于图片的高度作比对

这些高度都代表了什么意思？

这我以前有可能是知道的，那时候我比较单纯，喜欢死磕。我现在想通了，背不过的东西就不要背了

所以它有一个问题：复杂琐碎不好理解！

仅仅知道它静态的高度还不够，我们还需要知道动态的

如何动态？监听事件

首先设置一个临时 Data 属性，控制加载时使用代替，可利用 DataSet API 实现

img.src = img.datset.src

改进一下

引入一个新的 API， 方法返回元素的大小及其相对于视口的位置。

那如何判断图片出现在了当前视口呢，代码如下，这个就比较好理解了，就可以很容易地背会(就可以愉快地去面试了)。

img.getBoundingClientRect().top < document.documentElement.clientHeight;

监听事件也优化一下

加个节流器，提高性能。工作中一般使用就可以了，万能的啊！

_.throttle(func, [(wait = 0)], [(options = {})]);

再改进一下

方案二使用的方法是: 监听并使用节流

一系列组合动作太复杂了，于是浏览器出了一个三合一事件: API，一个能够监听元素是否到了当前视口的事件，一步到位！

事件回调的参数是 IntersectionObserverEntry 的集合，代表关于是否在可见视口的一系列值

其中，代表目标元素可见

它一般可以使用第三方库 clipboard-copy来实现，源码很简单，可以读一读

目前最为推荐的方式是使用进行实现

navigator.clipboard.writeText(text);

而对于一些不支持的浏览器，使用以下 API 进行复制

选中主要利用了 Selection API 与 Range API

讯享网

取消选中的代码如下

window.getSelection().removeAllRanges();

它有现成的第三方库可以使用: select.js

复制就比较简单了，

根据同源策略，cookie 是区分端口的，但是浏览器实现来说，“cookie 区分域，而不区分端口，也就是说，同一个 ip 下的多个端口下的 cookie 是共享的！

不同协议 http 和 https，也可以共享但是带有 Secure 属性的不能被 http 共享带有 HttpOnly 属性的 cookie 无法被 document.cookie 访问

白屏时间: window.performance.timing.domLoading - window.performance.timing.navigationStart

首屏时间: window.performance.timing.domInteractive - window.performace.timing.navigationStart

没有默认行为的按钮，上面显示 value 属性的值，默认为空。

#checkbox

复选框，可设为选中或未选中。

#color

用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。

#date

输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。

#datetime-local

输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。

#email

编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。

#file

让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。

带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。

#month

输入年和月的控件，没有时区。

#number

用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。

#password

单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。

#radio

单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。

#range

此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 htmlattrdefmin 和 htmlattrdefmax 来规定值的范围。

#reset

此按钮将表单的所有内容重置为默认值。不推荐。

#search

用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。

#submit

用于提交表单的按钮。

#tel

用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。

#text

默认值。单行的文本区域，输入中的换行会被自动去除。

#time

用于输入时间的控件，不包括时区。

#url

用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。

#week

用于输入以年和周数组成的日期，不带时区。

不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。

Data URL 是将图片转换为 base64 直接嵌入到了网页中，使用这种方式引用图片，不需要再发请求获取图片。使用 Data URL 也有一些缺点：

使用 CSS 样式可以避免拉伸

textarea { resize: none;}

重绘和回流面试题（重绘和回流的区别）

相关推荐