笔试面试题

[hujiejeff]

简述XMLHttpRequest和JSONP应用场景、以及二者的错误检测？

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

[hujiejeff]

请简述下浏览器渲染过程、以及重绘和重排？

理解浏览器渲染机制

浏览器渲染过程因不同内核可能会有差异，现以webkit为例描述浏览器渲染原理，浏览器渲染过程主要分为三个阶段，先详述如下： 第一阶段：

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

重绘：节点属性发生变化、内容需要变更、比如颜色，就是重新绘制。 重排：节点的尺寸相关信息发生变化、影响到盒子大小、所以要重排，也就是重新布局。

重排属性：height、line-height、font-size、border 重绘属性：height、line-height、font-size 、border、background-color、visibility

最小化重排和重绘

使用documentFragment进行dom操作

const list = document.querySelector('#list');
const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];

const fragment = document.createDocumentFragment();

fruits.forEach(fruit => {
  const li = document.createElement('li');
  li.innerHTML = fruit;
  fragment.appendChild(li);
});

list.appendChild(fragment);

[hujiejeff]

Githubissues.

Githubissues is a development platform for aggregating issues.