前端开发之每日学习

不积跬步无以至千里,不积小流无以成江海

前端工程的价值体现

• 为简化用户使用提供技术支持（交互部分）

• 为多个浏览器兼容性提供支持

• 为提高用户浏览速度（浏览器性能）提供支持

• 为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持

• 为展示数据提供支持（数据接口）

面试准备： 

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

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

2、请简述浏览器渲染页面的过程,并给出下方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>

A：浏览器渲染过程因不同内核可能会有差异，现以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
重绘属性&#