当前位置: 首页 > news >正文

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

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

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

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

路由器缓存 – 接着,前面的查询请求发向路由器,它一般会有自己的DNS缓存。

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

递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索,从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。

2、建立TCP连接 浏览器通过DNS获取到web服务器真的IP地址后,便向web服务器发起tcp连接请求,通过TCP三次握手建立好连接后,浏览器便可以将HTTP请求数据通过发送给服务器了。

3、浏览器向 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   

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

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服务器不会立即关闭此连接。(这一步一开始也许还会有重定向及浏览器跟踪重定向地址等)。

5、浏览器解析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. 解释异步编程

解释异步编程

相关文章:

  • IT界提问的艺术
  • hadoop生态搭建(3节点)-15.Nginx_Keepalived_Tomcat配置
  • Hadoop在安装snappy过程中的问题
  • localStorage和sessionStorage
  • 驻波比
  • 【Python】多进程#181101
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)
  • 基于Javascript, Springboot的管理系统报表查询页面代码设计
  • java 运算符,流程控制语句,键盘录入
  • 【转】在Win7的IIS上搭建FTP服务及用户授权
  • layui-学习02-全局样式
  • Mac OS 系统占用储存空间太大怎么办?
  • 生产管理软件改进生产流程
  • 双十一移动端页面总结
  • PYTHON——多进程:概念
  • php的引用
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • Android组件 - 收藏集 - 掘金
  • codis proxy处理流程
  • es的写入过程
  • Js基础知识(四) - js运行原理与机制
  • MYSQL如何对数据进行自动化升级--以如果某数据表存在并且某字段不存在时则执行更新操作为例...
  • Mysql数据库的条件查询语句
  • PhantomJS 安装
  • ViewService——一种保证客户端与服务端同步的方法
  • vue学习系列(二)vue-cli
  • 包装类对象
  • 从输入URL到页面加载发生了什么
  • 好的网址,关于.net 4.0 ,vs 2010
  • 老板让我十分钟上手nx-admin
  • 手写双向链表LinkedList的几个常用功能
  • 推荐一个React的管理后台框架
  • 学习ES6 变量的解构赋值
  • 移动端唤起键盘时取消position:fixed定位
  • 在weex里面使用chart图表
  • 国内唯一,阿里云入选全球区块链云服务报告,领先AWS、Google ...
  • 摩拜创始人胡玮炜也彻底离开了,共享单车行业还有未来吗? ...
  • ​软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】​
  • # Maven错误Error executing Maven
  • ## 临床数据 两两比较 加显著性boxplot加显著性
  • #HarmonyOS:基础语法
  • #if和#ifdef区别
  • #QT(一种朴素的计算器实现方法)
  • (1)(1.11) SiK Radio v2(一)
  • (NO.00004)iOS实现打砖块游戏(十二):伸缩自如,我是如意金箍棒(上)!
  • (仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画...
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (离散数学)逻辑连接词
  • .CSS-hover 的解释
  • .MSSQLSERVER 导入导出 命令集--堪称经典,值得借鉴!
  • .NET Core 实现 Redis 批量查询指定格式的Key
  • .Net 垃圾回收机制原理(二)
  • .NET基础篇——反射的奥妙
  • ::前边啥也没有
  • [ Algorithm ] N次方算法 N Square 动态规划解决