阿里前端面试总结

有一种总结叫，别人的面试，我自己的总结是，话不多说，说说我的总结。

1.HTTPS里面能发送HTTP请求吗？

是不行的，HTTPS下无法发送HTTP资源请求，但是利用iFrame或者相对路径来实现

HTTP与HTTPS的区别 

这个问题已经牵扯到了跨域问题（具体见问题3）

2.Ajax底层的实现

关于Ajax需要记住三点：异步 / 回掉 / 线程

理解：Ajax是告诉浏览器给我要发送一个HTTP请求，你给我新开个线程去执行下，完事后告诉我一声，我在其他function中执行后续操作（回调）。在线程返回结果前，我可以继续做其他事情。（异步）

使用Ajax的JS代码：

var xhr;

if(window.XMLHttpRequest) {

        xhr = new XMLHttpRequest();

}else {

        xhr = new ActiveXObject('Microsoft.XMLHttp');

}

xhr.open("get", URL, true);

xhr.onreadyStateChange = function() {

       if(xhr.readyState && xhr.status == 200) {

               console.log("成功")

        }

}

xhr.send(null);

还可以通过fetch来替代XMLHttpRequest（并不是专为Ajax实现的），Fetch API 是基于 Promise 设计

关于Fetch

3.Ajax和HTTP协议的关系

HTTP协议基于可靠的TCP协议，TCP协议是面向连接的，可靠的，面向字节流，拥有流量控制和拥塞控制的传输层协议，HTTP协议是无连接无状态的，HTTP的请求生命周期就是一个往返，请求道响应

AJAX指代的就是浏览器通过JavaScript发起HTTP请求的一系列技术，主要目的就是实现局部刷新，AJAX的核心就是通过JavaScript程序调用而发起的一次HTTP请求

4.跨域的问题

跨域的解释和解决办法

关于callback函数名字能不能重复？

这个我觉得是不能重复的，在JavaScript中是没有多态的，所以如果出现重复的函数名，则会发生覆盖现象，后者会覆盖前者

如果能重复，怎么区别？比如A，B两个请求，callback的名字是一样的，怎样去区分返回的数据是a的还是b的？

既然都是假设，那么我也来假设一下，假设A和B请求到的JSON格式的数据的键存在不同的，那么可以通过对该字段判断存在是否，从而确定是A的请求数据或者是B的请求数据，或者说键的个数是不一样的，然后进行判断

5..textarea和input的区别？用一个div模拟textarea的实现？

区别： input是一个单行输入框，有value属性，不能自动换行，用来放置字数较少的单行内容

textarea是一个多行输入框，没有value属性，但是可以自动换行，一般用户可以输入多行文字

实现：   div实现textarea

6.一个页面节点太多，会出现什么问题？优化？

当页面的节点过多，会出现卡顿现象，界面的修改都是通过DOM操作实现的，而不是简单的刷新页面，DOM操作会影响前端性能，那么DOM操作的优化就显得尤其重要，DOM操作优化的总原则就是尽量减少DOM操作

回流与重绘: 回流就是渲染树上的一部分或者全部因为元素的规模、尺寸、隐藏等改变而需要重新构建； 重绘就是渲染树中的一些元素需要更新，但是这些属性只影响元素的外观，风格，而不影响布局； 其中回流比重绘代价高

优化： 合并多次的DOM操作为单次的DOM操作，把DOM元素离线或隐藏后修改（文档碎片、display-none，克隆DOM到内存中），尽量少取得DOM的布局信息，事件委托方式