拼多多前端笔试题

1. 那些操作会引起reflow？

   浏览器解析页面一般分为以下四个步骤：解析HTML以构建DOM树，解析CSS渲染树；布局渲染树，绘制渲染树.
   reflow:DOM结构中的各个元素都有盒子模型，都需要浏览器根据各种样式来计算并根据计算结果将元素放在该出现的位置。
   repaint: 当盒子的位置和大小以及各种属性，浏览器于是将这些元素都按照各自的特性绘制了一遍，成为repaint.
   引起reflow操作：
   （1）增加删除修改DOM节点，会导致reflow和repaint;
   （2）移动DOM的位置（类似于动画）
   （3）修改CSS样式
   （4）resize窗口。
   （5）修改网页默认字体。
   reflow必然会导致repaint.

2. 关于闭包的理解？
   闭包是有权访问另一个函数作用域中的变量的函数。
   闭包的用途：（1）可以读取函数内部的变量；（2）让变量的值始终保存在内部中。
   注意点：闭包会导致函数中的变量保存在内存中，内存消耗很大。解决办法是：退出函数之前，将不使用的函数局部变量删除。

3. 关于ajax的请求？
   ajax请求的步骤：首先检测XHRHttpRequest对象是否存在，若不存在，则检测ActiveX对象。后发送请求，后检测XHR的readyState属性，若为4且响应HTTP状态为200则读取返回数据。调用回调函数。

//Promise实现ajax
function getJSON(url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET',url,true);
    xhr.send();
    xhr.onreadystatechange= function () {
      if(xhr.readyState === 4){
        if(xhr.status === 200){
          try{
            var response =  JSON.parse(xhr.responseText);
            resolve(response)
          }catch(e){
            reject(e)
          }
        }else{
          reject(new Error(xhr.statusText))
        }
      }
    }
  })
}

readyState的状态：0：未初始化；1：启动，即已经调用open()方法，但尚未调用send方法；2：发送:已经调用send()，但尚未接收到响应；3：接收，已经接收到部分数据。4：完成。已经接收到全部响应数据，而且已经在客户端调用了。
4. 一个页面从输入URL后发生了什么？

总的说来分为以下几个过程：1.DNS的解析2.TCP连接3.发送HTTP请求4.服务器处理请求并返回HTTP报文5.浏览器解析并渲染画面6.连接结束。
DNS解析的过程就是寻找哪台计算机上有需要你资源的过程。即为网址到IP地址的解析，DNS系统是一个有效管理主机名和IP地址之间对应关系的系统。首先关于DNS的查找，首先浏览器会先查看浏览器缓存—系统缓存—路由器缓存。如果缓存中有，会直接在屏幕中显示页面内容，若没有，则会进行域名解析，解析获取相应的IP地址。
HTTP是以TCP作为传输层协议的。HTTP是明文传输存在一定的危险性，所以出现了HTTPS协议，HTTPS本质就是HTTP+SSL，在进入TCP报文之前，先使用SSL对HTTP报文进行加密，从网络的层级结构看位于HTTP协议与TCP协议之间。HTTPS在传输数据之前需要客户端与服务器进行一次握手，在握手过程中将确立双方加密传输数据的密码信息，TSL/SSL使用了非对称加密，对称加密以及hash等。
关于HTTP请求，发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定窗口（http/80/8080,https/443）HTTP请求报文是由三部分组成：请求行，请求报头和请求正文。
后端从在固定的端口接收到TCP报文开始，它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。
HTTP响应报文也是由三部分组成：状态码，响应报头和响应报文。
浏览器解析渲染画面，webkit渲染过程。
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为reflow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

1. setTimeout和setTimeInterval的区别，以及内存分析？

前者是设置超时值来调用代码在特定的事件执行，后者是每隔指定的事件就执行一次代码。但是如果函数的执行时间超过设置的间隔时间，会出现函数小于间隔时间而执行或无间隔执行的情况。

1. 一个页面中的内容，文本内容是”shdlahdla98s*gjj”,将文本中的[“a”,”8”,”g”,”%”]数组中的值进行标红处理。

    <script> var Op = document.getElementsByTagName('p'); for(var i=0;ivar str = Op[i].innerText(); str = str.replace(/([a*8g])/,'$&') Op[i].innerHTML = str; } script>

1. 关于内存泄漏的理解？

   内存泄漏是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。
   内存泄漏的方式：1.循环引用；2.脱离DOM的引用；3.闭包.
   例子：从DOM中remove了元素，但是依然有变量或者对象引用了该DOM对象，然后内存中无法删除。使得浏览器的内存占用居高不下。

2. 对js中array,Number,Object,string基本类型进行值复制？

function clone(obj) {
  var res;
  if(obj instanceof Object){
      res={};
    for(k in obj){
      res[k] = clone(obj[k])
    }
  }else if(obj instanceof Array){
     res=[];
     for(k in obj){
       res.push(clone(obj))
     }
  }else{
    res = obj;
  }
  return res;
}