day25面向对象下

今日复习面试题:

六、浏览器渲染页面的原理及流程
浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？
>1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。 >2.构建渲染树（Render Tree）。 >3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是回流
# 七、重绘和回流（repaint&reflow)
当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为**回流**。
导致回流的操作：
```JavaScript 1、页面首次渲染 2、浏览器窗口大小发生改变 3、元素尺寸或位置发生改变 4、元素内容变化（文字数量或图片大小改变而引起的计算值宽度和高度改变） 5、元素字体大小变化 6、添加或者删除可见的DOM元素 7、激活CSS伪类（例如：:hover） 8、查询某些属性或调用某些方法 9、offsetWidth,width,clientWidth,scrollTop/scrollHeight的计算,会使浏览器将渐进回流队列Flush,立即执行回流。 ```
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为**重绘**。
**回流必定会发生重绘，重绘不一定会引发回流。**
# 八、如何避免重绘和回流？
**css：**
```JavaScript 1.避免使用table布局，可能很小的一个小改动会造成整个table的重新布局 2.尽可能在DOM树的最末端改变class。 3.避免设置多层内联样式。 4.将动画效果应用到position属性为absolute或fixed的元素上。 5.动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame 6.避免使用CSS表达式（例如：calc()） 7.使用transform替代top 8.使用visibility替换display: none，因为前者只会引起重绘，后者会引发回流（改变了布局） 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点 ```
**js：**
```JavaScript 1.避免频繁操作样式，最好一次性重写style属性,cssText，或者将样式列表定义为class并一次性更改class属性。 2.避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。 3.也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。 4.避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。 5.对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。 ```   #### 1.内置对象
>js中的内部对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、>RegExp、String以及各种错误类对象，包括Error、EvalError、RangeError、ReferenceError、>SyntaxError和TypeError。
其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。
#### 2.宿主对象
>宿主对象就是执行JS脚本的环境提供的对象。对于嵌入到网页中的JS来说，其宿主对象就是浏览器 >提供的对象，所以又称为浏览器对象，如IE、Firefox等浏览器提供的对象。不同的浏览器提供的 >宿主对象可能不同，即使提供的对象相同，其实现方式也大相径庭！这会带来浏览器兼容问题， >增加开发难度。浏览器对象有很多，如Window和Document等等。
#### 3.自定义对象
>顾名思义，就是开发人员自己定义的对象。JS允许使用自定义对象，使JS应用及功能得到扩充   什么是cookie?
  基于http协议的一种本地'存储'技术     (它就相当于钱包)  
```javascript document.cookie="username=itzan; expires=有效时间 GMT; path=/";domain=;secure; ```
  它的特点:
> 1.基于http协议   > 2.它会随着请求携带到服务器 > 3.只能存储4k左右 > 4.能跨域(设置domain),默认不可以 > 5.容易被伪造,不安全,会造成 xss攻击 (站点伪造)  


 它的使用场景:                                          
>1.免登录                                       >2.购物车                                       >3.简单的存储,非铭感数据                        
 http协议                                                  
常见于 浏览器与服务器的通信,它是属于 应用层 (应用程序)     http 默认的端口是80                                        http协议的特点                                             短连接(断开式)  浏览器向服务器发送请求,服务器接受,并响应 无状态  不知道是谁访问了服务器,                          
>1.  (cookie+session)                                       >2. token 凭证    
### 二十七、cookie 、sessionStorage与localStorage的区别
| 特性           |                                                              | sessionStorage                                              | localStorage                                                | | -------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | ----------------------------------------------------------- | | 数据的生命期   | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 仅在当前会话下有效，关闭页面或浏览器后被清除                | 除非被清除，否则永久保存                                    | | 存放数据大小   | 4K左右                                                       | 一般为5MB                                                   | 一般为5MB                                                   | | 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信          | 仅在客户端（即浏览器）中保存，不参与和服务器的通信          | | 易用性         | 需要程序员自己封装，源生的Cookie接口不友好                   | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |
WebStorage(**sessionStorage与localStorage**)提供了一些方法，数据操作比cookie方便； > 1).setItem (key, value) ——  保存数据，以键值对的方式储存信息。 > 2).getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。 > 3).removeItem (key) ——  删除单个数据，根据键值移除对应的信息。 > 4).clear () ——  删除所有的数据 > 5).key (index) —— 获取某个索引的key   今日问题:
区间拖拽的坐标问题:

//用e.page减去所有父元素的offset,获得在限定区间内的坐标,再减去movesection的offset,获得鼠标在movesection内的坐标
 let targetX = e.pageX - parentOffset.x - _this.element.offsetLeft
 let targetY = e.pageY - parentOffset.y - _this.element.offsetTop

 //获取移动的实时的坐标e.page减去鼠标在movesection内的坐标,减去所有父级元素的offset,就是movesection对应的left和top
 let currentX = e.pageX - _this.page.x - parentOffset.x;
 let currentY = e.pageY - _this.page.y - parentOffset.y;

 js加强练习:
7.当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.

8.类（class）通过 static 关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用

11.SyntaxError 对象代表尝试解析语法上不合法的代码的错误。

12.ReferenceError（引用错误）对象代表当一个不存在（或尚未初始化）的变量被引用时发生的错误。

13.

1.事件捕获阶段 先由文档的根节点document往事件触发对象，从外向内捕获事件对象 2.目标阶段（目标对象本身的事件程序） 到达目标事件位置，触发事件本身的程序内容； 3.事件冒泡阶段 再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。   14.JavaScript中所有的对象都有原型，其中最顶级的原型就是Object.prototype  

标签：浏览器,DOM,day25,元素,面向对象,对象,回流,重绘
来源： https://www.cnblogs.com/he-maoke/p/16400760.html