经常使用哪几种浏览器测试？有哪些浏览器内核(Rendering Engine)?javascript
(Q1)浏览器：Chrome，IE，FireFox，Safari，Opera。css
(Q2)对应内核：Webkit，Trident，Gecko，Webkit，Presto。（国内的浏览器，除了傲游是直接基于Webkit开发的，其余基本都是基于谷歌在webkit上开发的Chromium，固然谷歌本身也是用的Chromium。另外值得的一提的是手机的系统（安卓、苹果）默认浏览器都是基于webkit内核的）html
如何理解浏览器内核？java
主要分红两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。后来JS引擎愈来愈独立（好比谷歌的V8引擎），内核就倾向于只指渲染引擎。web
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。全部网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要内核。后端
JS引擎：解析和执行javascript来实现网页的动态效果。浏览器
浏览器的渲染过程？缓存
当浏览器得到一个html文件时，会“自上而下”加载，并在加载过程当中进行解析渲染。网络
解析：app
a. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的全部子节点都构建好后才会去构建当前节点的下一个兄弟节点。
b. 将CSS解析成 CSS规则树（Style Rule） 。
c. 根据DOM树和CSS规则树来构造 Rendering Tree（渲染树）。注意：Rendering Tree并不等同于 DOM 树，由于一些像 Header 或 display:none 的东西就不必放在渲染树中了。
d. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操做称之为Layout（布局），就是计算出每一个节点在屏幕中的坐标。
e. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每一个节点。
关于顺序：
上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽量早的将内容呈现到屏幕上，并不会等到全部的html都解析完成以后再去构建和布局render树。它是解析完一部份内容就显示一部份内容，同时，可能还在经过网络下载过程遇到的其他内容（好比css、js文件，但遇到js文件会阻塞页面后续内容，css不会阻塞；另外图片的下载优先级比较低，通常都会在整个页面其余资源下载完了才下载图片）。
Javascript的加载和执行的特色：
（1）载入后立刻执行；
（2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。缘由：由于浏览器须要一个稳定的DOM树结构，而JS中颇有可能有 代码直接改变了DOM树结构，好比使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修 改DOM树，须要从新构建DOM树的状况，因此 就会阻塞其余的下载和呈现。因此js一般放在页面尾部，即body结束前。
如何理解Reflow（回流）和 Repaint（重绘）？
1) 当render tree中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建。这就称为回流(reflow)。每一个页面至少须要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并从新构造这部分渲染树和layout，完成回流后，浏览器会从新绘制受影响的部分到屏幕中，该过程称为重绘。
2) 当render tree中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color。则就叫称为重绘。
注意：回流必将引发重绘，而重绘不必定会引发回流。
3) 当页面布局和几何属性改变时就须要回流。下述状况会发生浏览器回流：
a. 添加或者删除可见的DOM元素；
b. 元素位置改变；
c. 元素尺寸改变——边距、填充、边框、宽度和高度
d. 内容改变——好比文本改变或者图片大小改变而引发的计算值宽度和高度改变；
e. 页面渲染初始化；
f. 浏览器窗口尺寸改变——resize事件发生时；
4) 聪明的浏览器
从上个实例代码中能够看到几行简单的JS代码就引发了6次左右的回流、重绘。并且咱们也知道回流的花销也不小，若是每句JS操做都去回流重绘的话，浏览器可能就会受不了。因此不少浏览器都会优化这些操做，浏览器会维护1个队列，把全部会引发回流、重绘的操做放入这个队列，等队列中的操做到了必定的数量或者到了必定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让屡次的回流、重绘变成一次回流重绘。
虽然有了浏览器的优化，但有时候咱们写的一些代码可能会强制浏览器提早flush队列，这样浏览器的优化可能就起不到做用了。当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，好比：
a. offsetTop, offsetLeft, offsetWidth, offsetHeight
b. scrollTop/Left/Width/Height
c. clientTop/Left/Width/Height
d. width,height
e. 请求了getComputedStyle(), 或者 IE的 currentStyle
当你请求上面的一些属性的时候，浏览器为了给你最精确的值，须要flush队列，由于队列中可能会有影响到这些值的操做。即便你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，浏览器都会强行刷新渲染队列。
5) 如何减小回流、重绘？
① 直接改变className，这样能多条规则一次性改变；若是动态改变样式，则使用cssText（考虑没有优化的浏览器）
② 让要操做的元素进行”离线处理”，处理完后一块儿更新
a) 使用DocumentFragment进行缓存操做,引起一次回流和重绘；
b) 使用display:none技术，只引起两次回流和重绘；( 只是减小重绘和回流的次数，display：none 是会引发重绘并回流，相对来讲，visibility: hidden只会引发重绘 )
c) 使用cloneNode(true or false) 和 replaceChild 技术，引起一次回流和重绘；
③ 不要常常访问会引发浏览器flush队列的属性，若是你确实要访问，利用缓存
④ 让元素脱离动画流，减小回流的Render Tree的规模。举例：$("#block1").animate({left:50}); （不过我没理解）
PS:若是对你有帮助，就顺手点个赞吧~