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



很开心你能发现这个专栏，好的面试题可以让前端面试事半功倍！！！当你搜索前端面试的时候你会发现都大同小异，对你的面试帮助其实并不大，随着前端的发展，很多烂大街的前端问题，面试官其实不太会问到！为了助力大家提升面试录用机会，紧跟前端的发展，下面整理了一些最近前端求职者遇到的一些面试题官的问题（附答案解析）

一： 网站开发中，如何实现图片的懒加载，随着 web 技术的发展，有没有一些更好的方案

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

故问题拆分成两个：

方案一: 位置计算 + 滚动事件 (Scroll) + DataSet API

#如何判断图片出现在了当前视口

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

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

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

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

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

如何动态？监听 window.scroll 事件

#如何控制图片的加载

<img data-src="jason.jpg" />

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

img.src = img.datset.src

方案二: getBoundingClientRect API + Scroll with Throttle + DataSet API

改进一下

#如何判断图片出现在了当前视口

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

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

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

监听 window.scroll 事件也优化一下

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

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

方案三: IntersectionObserver API + DataSet API

再改进一下

#如何判断图片出现在了当前视口

方案二使用的方法是: window.scroll 监听 Element.getBoundingClientRect() 并使用 .throttle 节流

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

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

其中， 代表目标元素可见

const observer = new IntersectionObserver((changes) => {   // changes: 目标元素集合   changes.forEach((change) => {     // intersectionRatio     if (change.isIntersecting) {       const img = change.target;       img.src = img.dataset.src;       observer.unobserve(img);     }   }); }); observer.observe(img);

二：在一些博客系统，如掘金的博客中，可以复制代码，它是如何实现的

讯享网

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

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

navigator.clipboard.writeText(text);

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

#选中: Selection API/Range API

选中主要利用了 Selection API (opens new window)与 Range API

选中的代码如下 // RangeAPI: 制造区域 range.selectNodeContents(element); // Selection: 选中区域 selection.addRange(range); selectedText = selection.toString();

取消选中的代码如下

window.getSelection().removeAllRanges();

它有现成的第三方库可以使用: select.js(opens new window)

#复制: execCommand

复制就比较简单了，

三：localhost:3000 与 localhost:5000 的 cookie 信息是否共享

根据同源策略，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

五：HTML 中的 input 标签有哪些 type

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

#checkbox

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

#color

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

#date

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

#datetime-local

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

#email

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

#file

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

#image

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

#month

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

#number

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

#password

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

#radio

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

#range

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

#reset

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

#search

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

#submit

用于提交表单的按钮。

#tel

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

#text

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

#time

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

#url

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

#week

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

#hidden

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

六：什么是 Data URL

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

七：textarea 如何禁止拉伸

使用 CSS 样式可以避免拉伸

textarea {  resize: none;}

八：HTML 中有哪些语义化标签