前端知识点_pathrewrite的作用-CSDN博客

本文链接：https://blog.csdn.net/weixin_42025129/article/details/118975465

前端知识点

1. HTML页面重绘重排

1.1 浏览器页面渲染机制

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

1.2 重绘（repaint/redraw)

重绘是指一个元素外观的改变触发的浏览器行为，浏览器会根据元素新属性重新绘制，使元素呈现新的外观。

触发重绘条件：改变元素外观属性。如：color，background-color等

注：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

1.3 重排（重构/回流/reflow）

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

触发重排的条件：任何页面布局和几何属性的改变都会触发重排，比如：

1. 页面渲染初始化（无法避免）
2. 添加或者删除可见DOM元素
3. 元素位置的改变，或者使用动画
4. 元素尺寸的改变：大小，外边距，边框
5. 浏览器窗口尺寸的变化（resize事件发生时）
6. 填充内容的改变，比如文本的改变或者图片大小改变而引起的计算宽度和高度的改变
7. 读取某些元素属性：（offsetLeft/Top/Height/Width，clientTop/Left/Width/Height，scrollTop/Left/Width/Height）

1.4 重绘和重排关系

重排必定会引发重绘，但是重绘不一定引发重排

重绘重排代价：耗时，导致浏览器卡慢。

1.5 优化

浏览器自己的优化：维护一个队列，把所有引起回流，重绘的操作放入这个队列，等队列中操作到了一定数量或者一定时间间隔，浏览器会flush队列，进行一个批处理，这样会让多次回流，重绘变成一次；
我们要注意的优化：减少重绘和重排就是减少渲染树的操作，可以合并多次的DOM和样式修改，并减少对style样式的请求；

（1）直接改变元素的className

（2）使用cloneNode（true or false）和replaceChild技术，引发一次回流和重绘

（3）将需要多次重排的元素，position属性设置为absolute或fixed，脱离文档流，他的变化不会影响到其他元素

（4）如果需要创建多个DOM节点，可以使用DocumentFragment创建完成后一次性的加入document
```
 1. var fragment = document.createDocumentFragment();
    for(let i=0;i<100;i++){
     
		var li = document.createElement('li');
		li.innerHTML = 'apple' + i;
   		fragment.appendChild(li);
    }
    document.getElementById('fruit').appendChild(fragment);
```

2. 验证码

2.1 作用及种类

验证码主要使用于注册和登录，能够有效防止恶意登录注册
短信验证码等可以验证用户合法性；
验证码种类：

滑动拼图

文字点选

图标点选

推理拼图

短信验证

2.2 功能实现

智能选图，文字点选，短信，滑动等一般都是需要购买的服务；
文字图片验证码可以通过后端实现，也可以去购买。这些主要是和后端有关，对于前端而言就是单纯发送Ajax请求

let phone = '18868119721';
$.ajax({
   
    url: '后端接口',
    type: 'get',
    data: {
   
        phone: phone
    },
    success: function(res) {
   
        console.log(res)
    }
})

3. es6类class

一般构造函数

function Persion() {
     
    //属性
    this.name = '张三'
    this.age = 18
    //方法
    this.get = function(){
     
        console.log('Persion')
    }
}
let p1 = new Persion();
console.log(p1.name)
p1.get()