十道前端面试题(6)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_43572937/article/details/102716036
  1. 闭包的作用理解,以及那些地方用过闭包,以及闭包的缺点,如何实现闭包
  2. 从1-10,设置一个定时器,让它每秒钟打印一个?
  3. 从在浏览器输入URL到页面显示出来都发生了什么?
  4. 浏览器如何渲染页面的
  5. html5有什么新的tag,canvas…
  6. 如何理解html语义化
  7. border-box和content-box
  8. 正则如何将一个数千分化表示
  9. 如何处理CSS兼容问题
  10. BFC

正在更新

1. 闭包的作用理解,以及那些地方用过闭包,以及闭包的缺点,如何实现闭包?(点击查看)


2. 从1-10,设置一个定时器,让它每秒钟打印一个?

(function(){
    let i = 0;
    function change(num){
        i++;
        console.log(i);
        let timer = setTimeout(() => {
            change(num);
        }, 1000);
        if(i === num){
            clearTimeout(timer);
            return false;
        }
    }
    return change;
})()(10);

3. 从在浏览器输入URL到页面显示出来都发生了什么?

  1. 输入网址

  2. DNS解析域名,查找IP地址。

  3. 应用层客户端发送HTTP请求。
    HTTP请求包括请求头和请求主体两个部分,其中请求头包括请求的方法,URL,遵循的http协议,返回信息是否需要缓存,以及cookie等

  4. 传输层TCP传输报文 “三次握手”
    位于传输层的TCP协议为传输报文提供可靠的字节流服务。它为了方便传输,将大块的数据分割成以报文段为单位的数据包进行管理,并为它们编号,方便服务器接收时能准确地还原报文信息。TCP协议通过“三次握手”等方法保证传输的安全可靠。
    “三次握手”的过程是,发送端先发送一个带有SYN(synchronize)标志的数据包给接收端,在一定的延迟时间内等待接收的回复。接收端收到数据包后,传回一个带有SYN/ACK标志的数据包以示传达确认信息。接收方收到后再发送一个带有ACK标志的数据包给接收端以示握手成功。在这个过程中,如果发送端在规定延迟时间内没有收到回复则默认接收方没有收到请求,而再次发送,直到收到回复为止。

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

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

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

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

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

  10. 页面渲染
    现代浏览器渲染页面的过程是这样的:解析HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。
    DOM树是由HTML文件中的标签排列组成,渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素,像元素或display属性值为none的元素都不在渲染树中。
    在浏览器还没接收到完整的HTML文件时,它就开始渲染页面了,在遇到外部链入的脚本标签或样式标签或图片时,会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染,加入它们应有的样式,图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

一般问到这样的题,说得越详细越好。。。


4. 浏览器如何渲染页面的

  1. 解析HTML构建DOM树
    怎样解析HTML?
  • 读取HTML的原始字节,根据文件指定编码解析各个字符
  • 将字符串转化为各种标签
  • 然后将标签转化为node节点
  • 构建DOM树
    在这里插入图片描述
  1. 解析CSS构建CSSOM树
    怎样解析CSS?
  • CSS字节转化为字符,接着转换为令牌和节点,最后生成CSSOM树
    在这里插入图片描述
  1. 将DOM与CSSOM合并成一个渲染树
    CSSOM树和DOM树合并成渲染树,然后用于计算每个可见元素的布局,并输出给绘制流程,将像素渲染到屏幕上。
    怎么构建渲染树?
  • 从DOM树的根节点开始遍历每个可见节点(display:none与visibility:hidden的区别)
  • 对于每个可见节点,为其找到适配的CSSOM规则并应用它
  • 生成渲染树
  1. 布局阶段:输出盒模型
    根据渲染树来布局,计算每个节点的布局信息

  2. 绘制:输出到屏幕上的像素

猜你喜欢

转载自blog.csdn.net/weixin_43572937/article/details/102716036