乐其2017.10.13前端笔试题目

1 浏览器的渲染过程（从输入URL到完成渲染）

这个过程大致分为两个部分：网络通信和页面渲染

一 、网络通信

互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信，

应用层：

1. 在浏览器中输入url

    用户输入url，例如http://www.baidu.com。其中http为协议，www.baidu.com为网络地址，及指出需要的资源在那台计算机上。一般网络地址可以为域名或IP地址，此处为域名。使用域名是为了方便记忆，但是为了让计算机理解这个地址还需要把它解析为IP地址。

2.应用层DNS解析域名

   客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。

3.应用层客户端发送HTTP请求

HTTP请求包括请求报头和请求主体两个部分，其中请求报头包含了至关重要的信息，包括请求的方法（GET / POST）、目标url、遵循的协议（http / https / ftp…），返回的信息是否需要缓存，以及客户端是否发送cookie等。

运输层：TCP,UDP,

TCP提供了一种可靠的数据传输服务，TCP是面向连接的，也就是说，利用TCP通信的两台主机首先要经历一个“拨打电话”的过程，等到通信准备结束才开始传输数据，最后结束通话。所以TCP要比UDP可靠的多，UDP是把数据直接发出去，而不管对方是不是在收信，就算是UDP无法送达，也不会产生ICMP差错报文，这一经时重申了很多遍了。

TCP中保持可靠性的方式就是超时重发，最可靠的方式就是只要不得到确认，就重新发送数据报，直到得到对方的确认为止。

TCP的首部和UDP首部一样，都有发送端口号和接收端口号。但是显然，TCP的首部信息要比UDP的多，可以看到，TCP协议提供了发送和确认所需要的所有必要的信息

可以想象一个TCP数据的发送应该是如下的一个过程：

• 双方建立连接
• 发送方给接受方TCP数据报，然后等待对方的确认TCP数据报，如果没有，就重新发，如果有，就发送下一个数据报。
• 接受方等待发送方的数据报，如果得到数据报并检验无误，就发送ACK(确认)数据报，并等待下一个TCP数据报的到来。直到接收到FIN(发送完成数据报)
• 中止连接

网络层：

5.网络层IP协议查询MAC地址

IP协议的作用是把TCP分割好的各种数据包传送给接收方。而要保证确实能传到接收方还需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一对应的关系，一个网络设备的IP地址可以更换，但是MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。当通信的双方不在同一个局域网时，需要多次中转才能到达最终的目标，在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。

ARP协议是“Address Resolution Protocol”（地址解析协议）的缩写。在局域网中，网络中实际传输的是“帧”，帧里面是有目标主机的MAC地址的。在以太网中，一个主机要和另一个主机进行直接通信，必须要知道目标主机的MAC地址。但这个目标MAC地址是如何获得的呢？它就是通过地址解析协议获得的。所谓“地址解析”就是主机在发送帧前将目标IP地址转换成目标MAC地址的过程。ARP协议的基本功能就是通过目标设备的IP地址，查询目标设备的MAC地址，以保证通信的顺利进行。

数据链路层：

在找到对方的MAC地址后，就将数据发送到数据链路层传输。这时，客户端发送请求的阶段结束

7.服务器接收数据

   接收端的服务器在链路层接收到数据包，再层层向上直到应用层。这过程中包括在运输层通过TCP协议讲分段的数据包重新组成原来的HTTP请求报文。

8.服务器响应请求

服务接收到客户端发送的HTTP请求后，查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码。状态码由三位数字组成，其中比较常见的是200 OK表示请求成功。301表示永久重定向，即请求的资源已经永久转移到新的位置。在返回301状态码的同时，响应报文也会附带重定向的url，客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。

9. 服务器返回相应文件

请求成功后，服务器会返回相应的HTML文件。接下来就到了页面的渲染阶段了

二 页面渲染

当浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染。 
解析： 
1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 
2. 将CSS解析成 CSS Rule Tree 。 
3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

4.有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。 
5.再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

2 请实现以下功能：当输入框获得焦点时，向地址url发送异步请求，请求过程中页面处于loading状态不可以二次触发，请求成功后，将数据展示在输入框下方列表中，请求失败时报错。

$(function(){    var inputSearch = $('#input-search');    inputSearch.focus(function(){        var url = "search/getlist";        $.ajax({            url:url,            async:true,            success:function(){                var resultList = $("#result-list");                var html = '';                if(data.result==1){                    var data = data.data;                }else{                    var data = '请求失败';                }                html+='<li>+data+</li>';                resultList.html(html);            }        })    })})

3 实现一个ul列表的样式

<!--html代码--><ul class="list">    <li><div></div></li>    <li><div></div></li>    <li><div></div></li>    <li><div></div></li></ul>

/*css样式*/.list{    width: 330px;    border: 1px dotted black;    height: 442px;    padding: 10px;}.list li{    /* float: right; */    width: 43%;    margin: 10px;    height: 200px;    list-style: none;    background-color: red;    display: inline-block;}

效果图