全部文章
共 1299 篇文章
计算机网络七层模型和各自的作用
物理层 （Physical Layer）：负责传输比特流，即物理数据传输。它定义了物理介质、电压、电缆规范等。主要功能是将比特流转化为物理信号，以便在网络中传输。 数据链路层 （Data Link Layer）：提供了可靠的点对点数据传输，通过物理地址（MAC地址）标识网络设备。它将原始的比特流分割成数据帧，并进行差错检测和纠正，确保数据的可靠传输。 网络层 （Network Layer）：负责在不同的网络间进行路由选择和逻辑寻址。它使...
详细解析 HTTP 与 HTTPS 的区别
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。 为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协...
重排重绘与GPU加速_transform是否会调用gpu
重排重绘 我们知道在浏览器渲染过程中存在重排和重绘过程 重排 当出现以下行为时，会引起重排。 添加或删除DOM元素 元素的位置发生变化 元素的尺寸发生变化 浏览器的窗口尺寸变化 重绘 对 DOM 操作简单修改样式（比如修改元素的 visibility、color、background color 等）时会引起重绘 重排一定会引起重绘！ 相比较来看，重拍的花销是比重绘要大得多的。所以我们在优化性能的时候会尽量减少dom操作来减少重排。 （...
animation、transition、transform、translate
容易混淆的几个css属性 css属性很多，并且有些无论是字母的拼写还是字面上的意思，都容易混淆，比如我列出来的几个属性，是不是也混淆过你～ | 属性 | 含义 | | | | | animation（动画） | 用于设置动画属性，他是一个简写的属性，包含6个属性 | | transition（过渡） | 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 | | transform（变形） | 用于元素进行...
px 与像素是如何换算的
px 是所有开发者接触 css 时所了解的第一个单位，也是开发过程中最常见的单位。 如果你还不清楚 px、逻辑像素、物理像素之间是怎样换算的，本文将从头到尾帮你梳理一遍 像素 ，为影像显示的基本单位，译自英文“ pixel ”， pix 是英语单词picture的常用简写，加上英语单词“元素” el ement，就得到 pixel ，故“像素”表示“画像元素”之意，有时亦被称为 pel （ p icture el ement）。每个这样...
元素的层叠顺序
ed9f518c73f8be6d86ffebc1f6901f7d.png
单行，多行文本溢出隐藏
035ce559b5327817eb751c6db911d026.png
css-loader和style-loader关系原理及作用
用webpack打包就需要用到css loader和style loader，接下来让我们逐步解析两个loader的作用以及它们都做了怎样的工作 创建空项目 创建一个名为demo的空文件夹，这就是我们实验的项目目录 进入到目录下执行 按照上述两步，我们就搭建好了最简单的项目环境了，接下来需要安装依赖包和创建源码目录 在项目目录创建 子目录 基于webpack4讲解，运行npm安装所需依赖 创建 创建一个 样式文件 创建 程序入口文件 运...
除了 filter 还有什么置灰网站的方式
<img width="756" height="426" src="../../ resources/916f9d87c7a249989186c3f599298132 0f99ddbed2f34da1a.webp" class="jop noMdConv" 大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样： <img width="724" height="353" src="../../ resources/...