【前端学习笔记】面试常见问题汇总

版权声明：商业转载需要经过本人同意，敬上！ https://blog.csdn.net/weixin_41835977/article/details/88920112

箭头函数与普通函数有什么区别（除了this）？

答：不需要function,省略return，继承当前上下文this

除了箭头函数这种绑定this的方法，还有其他的吗？

答：apply, call, bind

call和bind有什么区别？

答：call是调用函数；而bind是返回调用的函数；

实现过哪些CSS动画效果？

答：见文章，【CSS学习笔记】CSS动画效果实战

了解哪些前端安全问题？

答：见文章，【前端学习笔记】前端安全详解
XSS脚本攻击，CSRF攻击，SQL注入

脚本攻击怎么防范？

答：见文章，【前端学习笔记】前端安全详解

防范脚本攻击代码上要怎么做？

答：1，在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用.textContent、.setAttribute() 等。
2，尽量不要使用 onLoad=“onload(’{{data}}’)”、onClick=“go(’{{action}}’)” 这种拼接内联事件的写法。在 JavaScript 中通过 .addEventlistener() 事件绑定会更安全。
3，采用拼接 HTML 的方法比较危险，如果框架允许，使用 createElement、setAttribute 之类的方法实现。
使用纯前端渲染，把代码和数据分隔开。

怎么实现一个操作COOKIE的库？

答：见文章，【前端学习笔记】cookie，实现操作Cookie的库

深拷贝、浅拷贝

答：见文章，【前端学习笔记】JS深拷贝，浅拷贝

换肤功能应该怎么实现

答：见文章，【前端学习笔记】网站换肤功能

像淘宝那种很多图片的网站应该怎么优化

答：见文章，【前端学习笔记】网站有许多图片时的优化

两栏布局

答：使用float,margin-left为负值（-100%）；或者使用flex，flex项目属性里的flex-basis额外分配空间

websocket，长连接，长轮询

答：http://caibaojian.com/http-connection-and-websocket.html
1，长轮询：客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
优点：在无消息的情况下不会频繁的请求。
缺点：服务器hold连接会消耗资源。
实例：WebQQ、Hi网页版、Facebook IM。
2，长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求，服务器端就能源源不断地往客户端输入数据。
优点：消息即时到达，不发无用请求。
缺点：服务器维护一个长连接会增加开销。
实例：Gmail聊天
3，轮询：客户端定时向服务器发送ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
优点：后端程序编写比较容易。
缺点：请求中有大半是无用，浪费带宽和服务器资源。
实例：适于小型应用。
4，短连接：在HTTP1.0中，客户端发送请求，服务器接收请求，双方建立连接，服务器响应资源，请求结束。
5，WebSocket：客户端发送一次http websocket请求，服务器响应请求，双方建立持久连接，并进行双向数据传输，后面不进行HTTP连接，而是使用TCP连接。

一个ul里很多li，怎么点击li的时候输出li的序号

答：使用事件委托，监听父元素ul，利用event.target确定点击的是哪个子元素，然后for循环判断下ul下的li，找到它的位置，输出它的序号。

DOM和BOM的区别

答：BOM包含DOM
BOM：即浏览器对象模型，BOM没有相关标准，BOM的最核心对象是window对象。window对象既为javascript访问浏览器提供API，同时在ECMAScript中充当Global对象。
DOM：即文档对象模型，DOM是W3C标准，DOM的最根本对象是document（window.document），这个对象实际上是window对象的属性，这个对象的独特之处是这个是唯一一个既属于BOM又属于DOM的对象。

写一个DOM树

答：见文章，https://segmentfault.com/a/1190000005659033

Cookie、sessionStorage、LocalStorage的区别

答：sessionStorage和localStorage的区别：
1.有效期；2，作用域
存储API：getItem，setItem，key，removeItem，clear
cookie：web浏览器存储的少量数据

了解margin-collapse吗，怎么避免margin-collapse

答：https://segmentfault.com/a/1190000010346113
毗邻、两个或多个、普通流和垂直方向。
一是父子外边距叠加；二是兄弟外边距叠加。取绝对值最大的那个。
符合哪些情况才会发生外边距折叠：

• 都属于普通流的块级盒子且参与到相同的块级格式上下文中
• 没有被padding、border、clear和line box分隔开
• 都属于垂直毗邻盒子边缘：盒子的top margin和它第一个普通流子元素的top margin;盒子的bottom margin和它下一个普通流兄弟的top margin;盒子的bottom margin和它父元素的bottom margin;盒子的top margin和bottom margin，且没有创建一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素
  如何避免外边距叠加？
  1，浮动元素不会与任何元素发生叠加，也包括它的子元素
  2，创建了 BFC 的元素不会和它的子元素发生外边距叠加
  3，绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
  4，inline-block 元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
  5，普通流中的块级元素的 margin-bottom 永远和它相邻的下一个块级元素的 margin-top 叠加，除非相邻的兄弟元素 clear
  6，普通流中的块级元素（没有 border-top、没有 padding-top）的 margin-top 和它的第一个普通流中的子元素（没有clear）发生 margin-top 叠加
  7，普通流中的块级元素（height为 auto、min-height为0、没有 border-bottom、没有 padding-bottom）和它的最后一个普通流中的子元素（没有自身发生margin叠加或clear）发生 margin-bottom叠加
  8，如果一个元素的 min-height 为0、没有 border、没有padding、高度为0或者auto、不包含子元素，那么它自身的外边距会发生叠加

对BFC的了解

答：见文章，【前端学习笔记】BFC块级格式化上下文

判断伪类和伪元素

答：见文章，【前端学习笔记】伪元素选择器，伪类选择器

浏览器的JS线程运行机制（事件循环队列）

答：https://juejin.im/post/5a6547d0f265da3e283a1df7

写一个正则表达式匹配，要求匹配netease开头，163结尾,中间可以是任意符号

答：/^netease[\s\S]*163$/
[\s\S]*，[\d\D]，[\w\W]可以匹配任意字符

事件委托方法

    ele.delegate(“click”，function(event){
    var target = event.target;
   // 判断哪个子元素；
    });

对响应式设计的理解 响应式设计的关键是什么？

答：媒体查询，流动网格，弹性图片
不同大小的设备，不同的网页，加载不同的CSS
实践原则有：1，渐进增强；2，优雅降级
应用CSS3中的媒体查询，常见小屏幕（0-480），中屏幕（481-800），大屏幕（801-1400）
相关单位：vw,wh,em,rem
1rem = 16px

移动端的页面相对于PC端的页面有什么额外的设置

答：见文章，【前端学习笔记】移动端适配之我见
1，因为移动端页面比较窄，很多网页会因为太窄错乱。所以需要进行屏幕适配：
利用，meta viewport 中有6个通用属性：
width 设置layout viewport的宽度 正整数或字符串 ‘width-device’
initial-scale 设置页面的初始缩放值，数字或小数
minimum-scale 允许用户的最小缩放值 数字或小数
maximum-scale 允许用户的最大缩放值 数字或小数
height 设置layout viewport 的高度，这个属性很少用到
user-scaleabel 是否允许用户进行缩放 'no’或‘yes’ 还有2个需要特别注意的两个属性
target-densitydpi 在andriod 4.0一下的设备中，不支持设置viewport的width，android 自带浏览器支持设置 target-densitydpi来达到目的；
根据不同屏幕设定好根元素的font-size，其他已经使用了rem单位的元素就会自适应显示相应的尺寸了。
2，因为移动端还会横竖屏，所以需要加上一个事件监听去管理。

媒体查询可以查询哪些属性

答：

width	height
device-width	device-height
orientation
aspect-ratio	device-aspect-ratio
color	color-index
monochrome	resolution
scan	grid

Promise和传统的异步调用有什么区别

答：promise对象获取异步操作的消息，拥有统一的API。将异步操作以同步操作的流程表示出来，避免了层层嵌套的回调函数。
例如：

var promise = new Promise（url）{
 var client = new XMLHttpRequest();
 client.open("GET",url);
 client.onreadystatechange = handler;
 client.responseType = "json";
 client.setRequestHeader("Accept","application/json");
 client.send();
function handler() {
 if (this.readyState !== 4){
 return;
 }
 if (this.readyState === 200){
  resolve(this.response);
 } else {
  reject(new Error(this.statusText));
 }
};