前端------- 题目

ゝ一世哀愁。 2024-04-08 12:04 27阅读 0赞

**目录**

http和https区别?

重排和重绘?

触发重排和重绘:

event.target和event.currentTarget区别?

DOM 0级事件绑定 事件不可以追加

DOM 2级事件绑定 事件可以追加 true

--------------------

##  ##

## http和https区别? ##

1.http:客户端和服务器通信遵循的超文本传输协议(请求和应答的标准) 明文传输数据  
容易被黑客拦截( wifi、运营商网络、代理服务器)  
2.https是具有安全性得ssl加密的传输协议 会对传输的数据进行加密 会对响应的数据解密  
3.http默认端口是80,https默认端口是443  
4.页面加载时间不同 http连接简单无状态 https握手时间长 会使得页面加载时间延长50% 增加10%-20%得耗电  
5.https需要ca(给数据绑定加密方式)证书 费用较高

## 重排和重绘? ##

**重排**:当dom的变化影响了元素的几何信息(位置),浏览器需要计算元素的几何属性，  
将其安放在界面中的正确位置,这个过程叫做重排,表现为重新生成布局,重新排列元素。  
**重绘:**当一个元素(颜色 字体颜色)的外观被改变,但是没有改变布局，重新把元素外观绘制出来的过程， 叫做重绘,表现为某些元素的外观被改变；  
重排和重绘会消耗浏览器的性能(会去计算浏览器的内存空间 占据cpu)会造成页面卡顿,ui展示迟缓。  
相比之下,重排性能影响更大,两者无法避免选择重绘.  
重绘不一定出现重排，但是重排一定出现重绘.

####    触发重排和重绘: ####

1.添加、删除（重排）、更新节点（重绘）  
2.通过display:none（重排）  
3.通过visiblity:hidden（重绘）  
4.添加动画（重排）  
5.添加一个样式表（重排）  
6.用户行为（重排或者重绘）

## event.target和event.currentTarget区别? ##

**target**是触发事件的源头 目标事件

**currentTarget**是正在执行的事件当前目标事件

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<style>
    		#outer{
    			width: 300px;
    			height: 300px;
    			background-color: red;
    		}
    		#center{
    			width: 200px;
    			height: 200px;
    			background-color: blue;
    		}
    		#inner{
    			width: 100px;
    			height: 100px;
    			background-color: yellow;
    		}
    	</style>
    	<script>
    		window.onload=function(){
    			var outer=document.getElementById('outer');
    			var center=document.getElementById('center');
    			var inner=document.getElementById('inner');
    			outer.onclick=function(event){
    				console.log('我是outer');
    				console.log(event.target,'触发目标事件的源');
    				console.log(event.currentTarget,'当前正在执行事件的元素');
    			}
    			center.onclick=function(event){
    				console.log('我是center');
    				console.log(event.target,'触发目标事件的源');
    				console.log(event.currentTarget,'当前正在执行事件的元素');
    			}
    			inner.onclick=function(event){
    				console.log('我是inner');
    				console.log(event.target,'触发目标事件的源');
    				console.log(event.currentTarget,'当前正在执行事件的元素');
    			}
    		}
    	</script>
    </head>
    <body>
    	<div id="outer">
    		<div id="center">
    			<div id="inner"></div>
    		</div>
    	</div>
    </body>
    </html>

![bfdddd29c3df4de9bb73706c454205c6.png][]

点击inner

![2f9890c7c16446d7af11b3bc3434cf8d.png][]

#### DOM 0级事件绑定 事件不可以追加 ####

btn.οnclick=function()\{\}  
解绑:btn.οnclick=null

####    DOM 2级事件绑定 事件可以追加 ####

####  ####

true 代表事件在捕获阶段执行 false 代表在冒泡阶段执行

addEventListener(事件类型,事件处理程序(具名),布尔值)  
解绑  
removeEventListener(事件类型,事件处理程序)

[bfdddd29c3df4de9bb73706c454205c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/f1e5fadc115642baad1ff9b19090c766.png
[2f9890c7c16446d7af11b3bc3434cf8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5688494ecb4f4892bb58d246193598d8.png