标签：浏览器 DOM 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。