前端开发面试题-问答（三）

最新推荐文章于 2024-07-10 22:56:43 发布

LeaT07

最新推荐文章于 2024-07-10 22:56:43 发布

阅读量154

点赞数

分类专栏：面试锦囊 JS 文章标签： javascript

本文链接：https://blog.csdn.net/leatitia/article/details/116719281

版权

面试锦囊同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

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到显示页面，都经历了什么？

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

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

16、浅拷贝和深拷贝

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

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

18、TCP协议