前端开发面试题-问答

Posted 2021-06-04 Leatitia

1、闭包

定义：闭包就是能够读取其它函数内部变量的函数，即一个函数内部的函数。
特性：

• 函数嵌套函数；
• 函数内部可以引用外部的参数和变量；
• 参数和变量不会被垃圾回收机制回收，始终保存在内存中。

• 优点：避免全局变量的污染；
• 缺点：闭包会常驻内存，增大内存使用量，使用不当容易造成内存泄漏。解决办法：在退出函数之前，将不适用的局部变量全部删除

哪些操作会造成内存泄漏

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

• setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
• 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

2、ES6 Promise all 和race的区别与实现

Promise是ES6语法标准里的新定义，一般用来处理异步方法的同步执行。Promise.all 是等所有异步方法返回结果后再执行操作，而Promise.race 是哪个方法先结束，就返回该方法的结果。

function promiseAll(arr){
    const result = [];
    return new Promise((resolve, reject) => {
        for(let i = 0; i < arr.length; i++){
            let p = arr[i];
            if(p instanceof Promise){   
            } else {
              p = Promise.resolve(p);
            }
            p.then((res) => {
                result[i] = res;
            }).catch(err => {
                return reject(err);
            })
        }
        return resolve(result);
    })
}

3、css3有什么新特性

• border-radius、box-shadow
• text-shadow、gradient、transform
• rgba、多背景
• 新的选择器
• 伪元素： ::selection
• 媒体查询，多栏布局
• border-image 等

4、html5有哪些新特性？

• 拖拽释放API
• 语义化标签
• 音频（audio）、视频（video）API
• 画布（canvas）API
• 地理（Geolocation）API
• web storage

兼容处理html5新标签：当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

5、清除浮动的方法

• 额外标签法，

  （缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

• 使用after伪类

    #parent:after{
        content:".";
        height:0;
        visibility:hidden;
        display:block;
        clear:both;
        }
  

• 浮动外部元素

• 设置overflow为hidden或者auto

6、javascript中的作用域与变量声明提升？

7、GET和POST的区别

• GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
• POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
  区别：
• Get请求可以缓存，POST不能；
• Post相对Get请求较安全；
• URL长度限制，会影响Get请求；
• Post支持更多的编码类型且不对数据类型限制；
• get参数通过url传递，post放在request body中；

8、清除浮动的几种方式

• 父级元素定义height（解决父级元素无法自动计算高度问题；）
• 父级元素 overflow：hidden；
• 末尾新增div clear:both;
• 父级元素伪类 ::after

9、拖拽的事件：
drag（start、enter、over、leave）、drop（end）

10、数组去重：indexOf()

11、ajax实现

• 创建xmlHttpRequest对象
• 使用xmlHttpRequest对象的 open() 和 end() 方法发送资源请求给服务器；
  使用xmlhttprequest对象的 responseText 或 responseXML 属性获得服务器的响应；
• onreadystatechange 函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用 onreadystatechange 函数，每次 xmlhttprequest 对象的 readyState 发生改变都会触发 onreadystatechange 函数

12、js的数据类型：

• 五种基本类型：Null（空值）、Undefined（未初始化）、Boolean、Number、String、
• 复制类型：引用类型（Object、Array、Function）

13、http和https的区别：

• http是HTTP协议运行在TCP上的，传输内容都是明文；
• https是HTTP运行在SSL/TLS上的，SSL/TSL运行在TCP上、所有传输内容都是经过加密的。服务端和客户端可通过配置验证身份；

常见HTTP状态码：

• 2- 请求成功（204：服务器处理，但没有返回内容）
• 3- 请求被重定向
• 4- 请求错误（401：未授权；403：拒绝请求；408：请求超时）
• 5- 服务器错误（502：错误网关；503：服务器不可用；504：网关超时）

14、从输入URL到显示页面，都经历了什么？

1. 浏览器查看缓存，有缓存则直接显示；
2. 发送http请求前，进行域名解析，获取相应的IP地址；
3. 浏览器想服务器发起tcp连接，三次握手；
4. 握手成功，发起http请求，请求数据包；
5. 服务器处理，将数据返回浏览器；浏览器接受http响应，读取页面内容，浏览器渲染；
6. 客户端服务器交互，ajax查询；

15、怎么设计一个组件封装

16、浅拷贝和深拷贝

17、有没有去研究webpack的一些原理和机制,怎么实现的

1. 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果.
2. 注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应.
3. 从配置的entry入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去.
4. 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换.
5. 递归完后得到每个文件的最终结果,根据entry配置生成代码块chunk.
6. 输出所有chunk到文件系统.

18、TCP协议

TCP是一种面向广域网的通信协议，目的是在跨越多个网络通信时，为两个通信端点之间提供一条具有下列特点的通信方式。
TCP/IP传输协议，即传输控制/网络协议，也叫作网络通讯协议。TCP/IP协议包括应用层、传输层、网络层、数据链路层；