前端开发面试题-问答

Posted Leatitia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发面试题-问答相关的知识,希望对你有一定的参考价值。

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;
          }
    
  • 浮动外部元素

  • 设置overflowhidden或者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协议包括应用层、传输层、网络层、数据链路层;

以上是关于前端开发面试题-问答的主要内容,如果未能解决你的问题,请参考以下文章

前端开发面试题-问答

前端开发面试题-问答

前端开发面试题-问答

前端开发面试题-问答

前端开发面试题-问答

前端开发面试题-问答