前端面试----深信服面试题全概

这里结合了CSDN多位博主和自己当时被问到的的深信服面试题，为了锻炼自己的答题能力和技术点理解，这里对博主的各个题目进行了自己的解答（最好用自己的理解自己的话解答），部分解答借鉴了博主的回答，同时对部分问题进行了相关拓展延伸。记在word笔记的时候没有记录博主地址，但还是感谢分享，一起努力加油啊！

一、HTML

1、常见的HTML块级元素和行内元素

2、HTML5的新标签有什么了解，详述一下表单的新标签

3、Image标签中alt和title有什么区别

二、CSS

1、CSS盒子模型（IE盒子模型，标准盒子模型）

2、CSS元素居中（能说几种说几种）

3、CSS伪类

4、CSS定位

5、能说一下BFC吗，BFC除了清除浮动，防止margin重叠之外，你了解它的原理吗

6、css3的动画实现举例

7、100px的div变成圆 有几种方法

8、css的预处理器，能跟我讲一下你用它解决了什么问题吗，除了变量提取还有什么好用的功能

9、a页面有一个选择器，b有相同的选择器，多人合作导致样式冲突，怎么解决？（我答scoped，他说除了scoped还有什么方法？）

10、scoped的原理

11、鼠标悬浮按钮上，跳出下拉框，使用纯css实现

12、px、em、rem

13、图片有哪些格式，区别有哪些

14、CSS实现三角形

核心：宽高设置为0，由边框来控制大小，然后边框颜色改为透明，然后更改一遍的边框颜色为自己想要的颜色

div{
    width: 0;
    height: 0;
    border:50px solid transparent;
    border-bottom-color:red;
}

注意：上面这样设计的话，div的实际占位还是个方形，如下代码实现实际占位变为三角形

div{
    width: 0;
    height: 0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-bottom-color:20px solid red;
}

三、JS

1、JavaScript的数据类型（ES6新增的数据类型）

2、数据隐式转换，数据类型判断

3、== 和 === 的区别

4、ES6的了解

5、事件委托

（1）事件流

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流：从页面中接收事件的顺序

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

addEventListener：addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

IE只支持事件冒泡。

（2）如何让事件先冒泡后捕获

在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。

（3）事件委托

• 简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。

• 举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。

• 好处：比较适合动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

6、JS的继承（多种实现方式）

7、什么是原型链，原型链的继承，怎么防止原型链继承创建对象全都继承父类的属性

8、作用域链

9、高性能数组去重的方法？（隐式转换，高频考点）

10、数组的方法有哪些，举例，有哪些是对数组进行遍历

11、讲一下闭包用到什么场景，能够解决什么问题，你在项目中用到哪个地方，具体讲一下可以吗

12、对Promise的了解

13、手写一个Promise all

14、DOM结点树的增删改查

15、防抖和节流

• 防抖背后的思路是指，减少函数在一定时间段内连续调用的次数，只执行一次
• 节流是让连续执行的函数，变为固定时间段间断地执行

16、如何判断一个对象为空？

1）遍历属性法

一旦该对象的属性是可遍历的即说明该对象存在属性，则返回false，否则该对象为空对象。

function judgeObj(obj){
    for(var attr in obj){
          return  false
    }
    return true
}
 
console.log(judgeObj({}))

（2）JSON.stringify() 方法

function judgeObj2(obj){
    if(JSON.stringify(obj) == '{}')
        return true
    else 
        return false
}
console.log(judgeObj2({}))

（3）ES6 Object.keys()方法

Object.keys方法是JavaScript中用于遍历对象属性的一个方法 。

它传入的参数是一个对象，返回的是一个数组，数组中包含的是该对象所有的属性名。

function judgeObj3(obj) {
    if(Object.keys(obj).length == 0){
        return true
    } else {
        return false
    }
}

17、for...in 和for...of 的区别

• for in ：ES5标准 遍历对象得到键名key（直接拿到对象的属性名，再根据属性名获取属性值）；不建议用来遍历数组（因为输出顺序不固定）
• for of ：ES6标准 遍历数组（数组、类数组对象，字符串、Set、Map 以及 Generator 对象）得到键值value；不建议用来遍历对象

来个直观简要的图例吧 ~

发现for of 遍历对象报错了——for of 只能用在可迭代对象上，而obj1 不可迭代

为什么 for in 可以呢？——for in 的原理是 Object.keys()：返回给定对象所有可枚举属性的字符串数组

若要用 for of 遍历对象，要结合Object.keys()进行使用：

        for (let e of Object.keys(obj1)) {
            console.log(e); // 键名
            console.log(obj1[e]); // 键值（使用的是对象属性访问方法）
        }

回顾该部分的知识点，附上我的思维导图 note：

四、浏览器相关

1、从浏览器输入一个url到显示页面经历的过程

一次完整的HTTP请求过程  版本 1.0

1. 浏览器对输入的网址进行DNS解析，得到对应的IP地址
2. 根据这个IP，找到对应的服务器，发起TCP连接（TCP的三次握手）
3. 建立TCP链接后，发起HTTP请求
4. 服务器响应HTTP请求，浏览器得到 html 代码
5. 浏览器解析 html 代码，并请求代码中的资源（js、css、图片等）--先得到 html 代码，才能去找这些资源
6. 浏览器对页面进行渲染，呈现给用户
7. 服务器关闭TCP连接