Web前端笔试整理8
请简述XMLHttpRequest、JSONP的适用场景， 并针对两种请求形式简述如何检测请求错误
- XMLHttpRequest用于浏览器端于服务器端异步请求数据从而实现对页面的无刷新修改， 支持GET/POST请求， 一般用于非跨域的场景， 如果需要使用XMLHttpRequest跨域请求数据， 需要通过CORS头支持。 JSONP用于跨域请求数据的场景， 只支持GET请求。
- XMLHttpRequest异常判断一般通过该对象的readystate和http状态码status来判断， JSONP的异常判断一般是onerror事件和超市timer来判断
请简述浏览器渲染页面的过程,并给出下方script代码中对哪些CSS属性的"修改"会触发重绘（repaint）和重排（reflow）？
<style>.sg-container {padding: 10px;margin-bottom: 10px;width: 100px; height: 100px;}</style>
<div class="sg-container">
<p style="line-height:20px">2019搜狗校园招聘</p>
<script>
document.querySelector('p').style.cssText +='height:10px; line-height:24px;font-size:20px;visibility:hidden;background-color:#00f;border:1px solid #f00';
</script>
</div>
浏览器渲染过程因不同内核可能会有差异， 现已webkit为例描述浏览器渲染原理， 浏览器渲染过程主要分为三个阶段， 先详述如下：
第一阶段：
- 用户输入URL时， webkit依赖网络模块加载网页或者资源数据
- 网页被交给HTML解释器转变成一系列的词语
- 解释器根据语法构建节点并形成DOM树
- 如果节点是CSS、图片、视频等资源， 会调用资源加载器加载他们， 因该类资源加载是异步的， 不会阻碍当前DOM树的继续创建
- 如果节点是javascript， 停止当前DOM树的创建， 直到javascript资源加载完成并被javascript引擎执行后才继续进行DOM的创建
第二阶段：
- CSS解释器解析CSS文件成内部表示结构， 并在DOM树上附加样式信息形成RenderObject树
- RenderObject节点在创建的同时， webkit会根据网页的层次结构创建RenderLayer树， 同时创建一个虚拟的绘图上下文
第三阶段：
- 根据生成的绘图上下文和2D或3D图像库生成最终的图像
对于包含动画和用户交互的动态网页， 浏览器的渲染过程会重复的执行， 可能会触发不同程度的重排和重绘。
重排属性： height、line-height、font-size、border
重回属性： height、line-height、font-size、boder、background-color、visibility
完成一个getTags函数， 可以检测当前页面用到了那些标签， 函数返回包含标签的字符串的数组
<html>
<head></head>
<body>
<div></div>
<p></p>
</body>
</html>
(function getTags () {
var list1 = document.getElementsByTagName("*"); //ES5语法，返回HTMLCollection
var list2 = document.querySelectorAll("*"); //ES6语法，返回nodeList
var tags = Array.prototype.slice.call(list1)
console.log(tags.map(function (item) {
return item.tagName.toLowerCase()
}))
})()
