写在前面

CSDN话题挑战赛第1期

活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
参赛话题：前端面试宝典
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！
创作模板：

携手共筑前端面试宝典

网站开发中，如何实现图片的懒加载
- 答案
浏览器中如何实现剪切板复制内容的功能
- 答案
localhost:3000 与 localhost:5000 的 cookie 信息是否共享
- 答案
什么是 CSRF 攻击
- 答案
在浏览器中如何监听剪切板中内容
- 答案
如何把 json 数据转化为 demo.json 并下载文件
- 答案
HTML 中的 input 标签有哪些 type
- 答案
什么是 Data URL
- 答案
什么是 HTML 的实体编码 (HTML Entity Encode)
- 答案
textarea 如何禁止拉伸
- 答案
在 Canvas 中如何处理跨域的图片
- 答案
行级元素和块元素和行内块元素的区别
- 答案
防抖(debounce)
- 答案
节流(throttle)
- 答案

网站开发中，如何实现图片的懒加载

答案

方法一、vue-router里面的路由懒加载
方法二、位置计算用windo.scroll+DataSet.src API
方法三、浏览器的loading属性，缺点目前兼容性不太好

浏览器中如何实现剪切板复制内容的功能

答案

方法一、Clipboard-copy第三方库来实现

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

答案

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

什么是 CSRF 攻击

答案

跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。
维基百科：
CSRF (Cross-site request forgery)，跨站请求伪造，又称为 one-click attack，顾名思义，通过恶意引导用户一次点击劫持 cookie 进行攻击。

使用 JSON API。当进行 CSRF 攻击时，请求体通过构建，请求头为 application/www-form-urlencoded。它难以发送 JSON 数据被服务器所理解。
CSRF Token。生成一个随机的 token，切勿放在 cookie 中，每次请求手动携带该 token 进行校验。
SameSite Cookie。设置为 Lax 或者 Strict，禁止发送第三方 Cookie。

在浏览器中如何监听剪切板中内容

答案

通过 Clipboard API 可以获取剪切板中内容，但需要获取到 clipboard-read 的权限

如何把 json 数据转化为 demo.json 并下载文件

答案

json 视为字符串，可以利用 DataURL 进行下载
Text -> DataURL
除了使用 DataURL，还可以转化为 Object URL 进行下载
Text -> Blob -> Object URL
总结：

模拟下载，可以通过新建一个标签并设置 url 及 download 属性来下载
可以通过把 json 转化为 dataurl 来构造 URL
可以通过把 json 转换为 Blob 再转化为 ObjectURL 来构造 URL

HTML 中的 input 标签有哪些 type

答案

Button、checkbox、color、date、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week

什么是 Data URL

答案

Data URL 是将图片转换为 base64 直接嵌入到了网页中，使用这种方式引用图片，不需要再发请求获取图片。使用 Data URL 也有一些缺点：base64 编码后的图片会比原来的体积大三分之一左右。
Data URL 形式的图片不会缓存下来，每次访问页面都要被下载一次。可以将 Data URL 写入到 CSS 文件中随着 CSS 被缓存下来。

什么是 HTML 的实体编码 (HTML Entity Encode)

答案

不可分的空格:＆nbsp; <(小于符号):＆lt;
(大于符号):＆gt; ＆(与符号):＆amp;
″(双引号):＆quot; ‘(单引号):’＆apos;
一般为了避免 XSS 攻击，会将 <> 编码为 < 与 >，这些就是 HTML 实体编码。

textarea 如何禁止拉伸

答案

textarea { resize: none; }

在 Canvas 中如何处理跨域的图片

答案

img.setAttribute(“crossOrigin”, “anonymous”);

行级元素和块元素和行内块元素的区别

答案

行级元素：1、可以排成一行 2、不能设置宽高（例span）
块级元素：1、独占一行 2、可以设置宽高 3、会产生内容溢出（例div）
行内块级元素：1、可以排成一行 2、可以设置宽和高（例img）

防抖(debounce)

答案

触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间; 防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。

// 防抖函数
function debounce(fn, wait) {
let timer;
return function () {
let _this = this;
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
fn.apply(_this, args);
}, wait);
};
}
// 使用
window.onresize = debounce(function () {
console.log(“resize”);
}, 500);

节流(throttle)

答案

节流(throttle)
高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率
节流：控制流量，单位时间内事件只能触发一次，与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁 timer=timeout; timer=null。节流可以比作过红绿灯，每等一个红灯时间就可以过一批。
// 方式1: 使用时间戳
function throttle1(fn, wait) {
let time = 0;
return function () {
let _this = this;
let args = arguments;
let now = Date.now();
if (now - time > wait) {
fn.apply(_this, args);
time = now;
}
};
}
// 方式2: 使用定时器
function thorttle2(fn, wait) {
let timer;
return function () {
let _this = this;
let args = arguments;

if (!timer) {timer = setTimeout(function () {timer = null;fn.apply(_this, args);}, wait);
}

};
}

写在最后