03 【前端笔试】- 2020 搜狗校招笔试题

1,请简述XMLHttpRequest、JSONP的适用场景,并针对两种请求形式简述如何检测请求错误?

  1). XMLHttpRequest用于浏览器端与服务器端异步请求数据从面实现对页面的无刷新修改, 支持GET/POST请求,一般用于非跨域的场景。如果需要使用XMLHttpRequest跨域请求数据,需要通过CORS头支持。 
        JSONP用于跨域请求数据的场景,只支持GET请求。
  2). XMLHttpRequest异常判断一般通过该对象的readystate和http状态码status来判断,
        JSONP的异常判断一般是onerror事件和超时timer来判断。
 
 

2,请简述浏览器渲染页面的过程,并给出下方script代码中对哪些CSS属性的"修改"会触发重绘(repaint)和重排(reflow)?

浏览器渲染过程因不同内核可能会有差异,现以webkit为例描述浏览器渲染原理,浏览器渲染过程主要分为三个阶段,先详述如下:
第一阶段:
1. 用户输入URL时,webkit依赖网络模块加载网页或资源数据
2. 网页被交给HTML解释器转变成一系列的词语
3. 解释器根据词语构建节点并形成DOM树
4. 如果节点是CSS、图片、视频等资源,会调用资源加载器加载他们,因该类资源加载是异步的,不会阻塞当前DOM树的继续创建
5. 如果节点是javascript,停止当前DOM树的创建,直到javascript资源加载完成并被javascript引擎执行后才继续进行DOM的创建
第二阶段:
1. CSS解释器解析CSS文件成内部表示结构,并在DOM树上附加样式信息形成RenderObject树
2. RenderObject节点在创建的同时,webkit会根据网页的层次结构创建RenderLayer树,同时创建一个虚拟的绘图上下文
第三阶段:
1.根据生成的绘图上下文和2D或3D图形库生成最终的图像
对于包含动画和用户交互的动态网页,浏览器的渲染过程会重复的执行,可能会触发不同程度的重排和重绘。
 
重排属性:height、line-height、font-size、border
重绘属性:height、line-height、font-size 、border、background-color、visibility
 

3,完成一个 getTags 函数,可以检测当前页面用到了哪些标签,函数返回包含标签的字符串的数组,比如页面如下

<html>
  <head></head>
  <body>
    <div></div>
    <p></p>
  </body>
</html>
在页面中运行 getTags() 之后,函数就返回数组 ['html', 'head' 'body', 'div', 'p'] (顺序不重要)。
注意:
  •  1、标签名称使用小写
  • 2、请使用ES5语法
  • 3、答题时不要使用第三方插件
【解析】

 
 

4,【题干描述】:

我们共有n台服务器,每台服务器可以和若干个子服务器传输数据,n台服务器组成一个树状结构。

现在要将一份数据从root节点开始分发给所有服务器。
一次数据传输需要一个小时时间,
一个节点可以同时对k个儿子节点进行并行传输,
不同节点可以并行分发。
问,全部分发完成,最短需要多少小时?
 
【示例】:
当共有5台服务器,其树状结构为
       0
     /     \
   1      2
  /   \
3    4
假设每一台服务器同时可以对1个儿子节点(k=1)并行传输,最优的数据传输过程示例如下:
    第一个小时,0 -> 1;
    第二个小时,1->3 & 0->2;
    第三个小时,1 -> 4;
所以当k=1时,全部分发完成最短需要3个小时。
假设每一台服务器同时可以对2个儿子节点(k=2)并行传输,最优的数据传输过程示例如下:
    第一个小时,0 -> 1 & 0 -> 2;
    第二个小时,1 -> 3 & 1 -> 4;
所以当k=2时,全部分发完成最短需要2个小时。
【解析】