北京博派通达科技有限公司(前端面试题) 给须要的人

时间 2019-11-26

原文原文链接

1.网页解析的全过程(输入url到展现页面)

1.用户输入网址，浏览器发起DNS查询请求css

用户访问网页，DNS服务器（域名解析系统）会根据用户提供的域名查找对应的IP地址。域名解析服务器是基于UDP协议实现的一个应用程序，一般经过监听53端口来获取客户端的域名解析请求。DNS查找过程以下：浏览器缓存 – 浏览器会缓存DNS记录一段时间。有趣的是，操做系统没有告诉浏览器储存DNS记录的时间，这样不一样浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。系统缓存 – 若是在浏览器缓存里没有找到须要的记录，浏览器会作一个系统调用（windows里是gethostbyname）。这样即可得到系统缓存中的记录。html

路由器缓存 – 接着，前面的查询请求发向路由器，它通常会有本身的DNS缓存。html5

ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这通常都能找到相应的缓存记录。java

递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。通常DNS服务器的缓存中会有.com域名服务器中的域名，因此到顶级服务器的匹配过程不是那么必要了。node

二、创建TCP链接浏览器经过DNS获取到web服务器真的IP地址后，便向web服务器发起tcp链接请求，经过TCP三次握手创建好链接后，浏览器即可以将HTTP请求数据经过发送给服务器了。python

三、浏览器向 web 服务器发送一个 HTTP 请求 HTTP请求是一个基于TCP协议之上的应用层协议——超文本传输协议。一个http事务由一条(从客户端发往服务器的)请求命令和一个(从服务器发回客户端的)响应结果组成。 GET www.cricode.com/ HTTP/1.1 Host: www.cricode.com Connection: keep-alive Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36 Accept-Encoding: gzip,deflate,sdch Accept-Language: zh-CN,zh;q=0.8 web

四、发送响应数据给客户端 Web服务器一般经过监听80端口，来获取客户端的HTTP请求。与客户端创建好TCP链接后，web服务器开始接受客户端发来的数据，并经过HTTP解码，从接受到的网络数据中解析出请求的url信息之前其余诸如Accept-Encoding、Accept-Language等信息。Web服务器根据HTTP请求头的信息，获得响应数据返回给客户端。一个典型的HTTP响应头数据报以下：chrome

HTTP/1.1 200 OK Date: Fri, 24 Oct 2014 13:55:18 GMT Server: Apache X-Powered-By: PHP/5.4.32 Keep-Alive: timeout=5, max=10000 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=UTF-8 a0f6 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title></title> <body class="home"></body> </html> 编程

至此，一个HTTP通讯过程完成。web服务器会根据HTTP请求头中的Connection字段值决定是否关闭TCP连接通道，当Connection字段值为keep-alive时，web服务器不会当即关闭此链接。（这一步一开始也许还会有重定向及浏览器跟踪重定向地址等）。canvas

五、浏览器解析http response

（1）html文档解析（DOM Tree）

在浏览器没有完整接受所有HTML文档时，它就已经开始显示这个页面了。生成解析树即dom树，是由dom元素及属性节点组成，树的根是document对象。

（2）浏览器发送获取嵌入在HTML中的对象

加载过程当中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响html文档进行加载。

可是当文档加载过程当中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不只要等待文档中js文件加载完毕，还要等待解析执行完毕，才能够恢复html文档的渲染线程。

（3）css解析（parser Render Tree）

浏览器下载css文件，将css文件解析为样式表对象，并用来渲染dom tree。该对象包含css规则，该规则包含选择器和声明对象。

css元素遍历的顺序，是从树的低端向上遍历。

（4）js解析

浏览器UI线程：单线程，大多数浏览器（好比chrome）让一个单线程共用于执行javascrip和更新用户界面。

js阻塞页面：浏览器里的http请求被阻塞通常都是由js所引发，具体缘由是js文件在下载完毕以后会当即执行，而js执行时候会阻塞浏览器的其余行为，有一段时间是没有网络请求被处理的，这段时间事后http请求才会接着执行，这段空闲时间就是所谓的http请求被阻塞。

2.session 和 cookie 的不一样和联系

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（一般通过加密）。 cookie数据始终在同源的http请求中携带（即便不须要），记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小： cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。

有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭

3.Html 和 html5 的区别,及HTML5有哪些新特性及兼容性处理

HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除; 语意化更好的内容元素，好比 article、footer、header、nav、section; 表单控件，calendar、date、time、email、url、search; 新的技术webworker, websocket, Geolocation;

移除的元素：纯表现的元素：basefont，big，center，font, s，strike，tt，u; 对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签： IE8/IE7/IE6支持经过document.createElement方法产生的标签，能够利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还须要添加标签默认的样式。

固然也能够直接使用成熟的框架、好比html5shim;
如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

4.li节点的onclick事件都能正确的弹出当前被点击的li索引

var nodes = document.getElementsByTagName("li");
 	for(i = 0;i<nodes.length;i+= 1){
 	    nodes[i].onclick = (function(i){
 	              return function() {
 	                 console.log(i);
 	              }
 	            })(i);
 	}
复制代码

5. 冒泡排序

var examplearr=[8,94,15,88,55,76,21,39];
function sortarr(arr){
  for(i=0;i<arr.length-1;i++){
      for(j=0;j<arr.length-1-i;j++){
          if(arr[j]>arr[j+1]){
              var temp=arr[j];
              arr[j]=arr[j+1];
              arr[j+1]=temp;
          }
      }
  }
  return arr;
}
sortarr(examplearr);
console.log(examplearr);
复制代码

6. 去除数组相同的元素 1: [1,2,3,4,5],2:[1,2,[1,'2','3',4,5],6]

没想出来对应的方法

7. js深度克隆和浅克隆

解释异步编程

8. for for..in for....of 的区别

自行百度吧

9. 解释异步编程

解释异步编程