面试学科面试题

浏览器的运行机制

1.构建DOM树(parse):渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node(包括js生成的标签)
  生成内容树(Content Tree/DOM Tree);
2.构建渲染树(construct)：解析对应的css样式文件信息(包括js生成的样式和外部css文件)，而这一些文件
  信息以及HTML中可见的指令(如<b></b>),构建渲染树(Rendering Tree/Frame Tree);render tree中
  每个NODE都有自己的style,而且render tree不包含隐藏的节点(比如display:none的节点，
  还有head节点)，因为这一些额节点不会用于呈现；
3.布局渲染树(reflow/layout):从根节点递归调用，计算每一个元素的大小、位置，给出每个节点所应该在屏
  幕上出现的精确坐标；
4.绘制渲染树(paint/repaint):遍历渲染树，使用UI层来绘制每个节点；

重绘

当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这一些原色都按照各
自的特性绘制一遍，将内容呈现在页面上。
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

触发重绘的条件:改变元素外观属性。如:color,background-color等。
注意:table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍
时间，这就是我们尽量避免使用table布局页面的原因之一。

重排(重构/回流/reflow):当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新
构建，这就称为回流(reflow),每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘和重排的关系:在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成
回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
所以，重排必定会引发重绘，但重绘不一定会引发重排
触发重排的条件:任何页面布局和几何属性的改变都会触发重排，比如:
1、页面渲染初始化；（无法避免）
2、添加或删除可见的DOM元素；
3、元素位置的改变，或者使用动画；
4、元素尺寸的改变--大小、外边距、边框；
5、浏览器窗口尺寸的变化（resize事件发生时）；
6、填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；
7、读取某些元素属性；（offsetLeft/Top/Height/Width,clientTop/Left/Width/Height,
scrollTop/Left/Width/Height,width/height,getComputedStyle(),currentStyle(IE)）
重绘重排的代价:耗时，导致浏览器卡慢。

es6中的class语法

 // 构造函数
        function Person() {
            this.name = "小林"
            this.age = 18
            this.say = function() {
                console.log('person的say')
            }
         }
         let p1 = new Person()
         console.log(p1.name) // 小林
         p1.say()  //person的say

         // class 新es6语法 就是构造函数的另一种新写法 语法糖
         class Person{
             constructor() {
                 this.name = "小林"
                 this.age = 18
             }
             say() {
                console.log('person的say')
             }
         }
         let p2 = new Person()
         console.log(p1.name) // 小林
         p2.say()  //person的say

         // 继承
         class Teacher extends Person {
            //  constructor() {
            //      // constructor 在this之前一定要写super()
            //      super() //调用父亲的constructor
            //      this.name = '小了'
            //      this.score = 10000
            //  }
            // 简写
            name = '小了'
            score = 10000
             hello() {
                 console.log('hello')
             }
             abc() {
                 console.log('abc')
             }
         }
         let t1 = new Teacher()
         console.log(t1.name)