-
优先级队列
一、概念**：是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的==... -
CDN工作原理
什么是CDN？工作原理是什么？网站通常将其所有的服务器都放在同一个地方，当用户群增加时，公司就必须在多个地理位置不同的服务器上部署内容。 为了缩短http请求的时间，我们应该把大量的静态资源放置的离用户近一点。 ==内容发... -
性能优化总结
css 和 js 优化 减少css和js阻塞； 优化样式表的代码（选择器的权重）； 异步加载js（ script 标签加上 defer 属性），放在页面底部； 对css、js进行压缩； 减少http请求数，将多个css、js文件合并。 ... -
网页渲染原理
浏览器相关原理详细总结二浏览器渲染过程是怎样的？按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、栅格化和显示。 渲染进程将 HTML 内容转换为能够读懂DOM 树结构。 渲染引擎将 CSS 样式表转... -
网络安全
1. XSSXSS（Cross Site Script），即==跨站脚本攻击==； XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器... -
图层的重绘与回流
图层的重绘与回流css图层览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。 在渲染DOM的时候，浏览器所做的工作实际上是： 1. 获取DOM后分割为多个图层； 2. 对每个图层的节点计算样式结果 （... -
细说浏览器输入URL后发生了什么
细说浏览器输入URL后发生了什么大体上，可以分为六步，当然每一步都可以详细都展开来说，这里先放一张总览图: 1. 合成URL 用户输入URL，浏览器会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容+默认搜索引警合成新的... -
TCP三次握手四次挥手
TCP的三次握手和四次挥手实质就是TCP通信的连接和断开。 1.三次握手 TCP协议位于传输层，作用是提供可靠的字节流服务，为了准确无误地将数据送达目的地，TCP协议采纳三次握手策略。 ==三次握手原理：=...
$tools-item-width = 2.2rem
$tools-item-font-size = 1.1rem
$tools-item-border-radius = 0.1rem
.side-tools-container {
position relative
.tools-item {
width $tools-item-width
height $tools-item-width
margin-bottom 0.2rem
color var(--text-color-3)
font-size $tools-item-font-size
background var(--background-color-1)
border-right none
border-radius $tools-item-border-radius
box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
cursor pointer
i {
color var(--text-color-3)
}
&:hover {
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
i {
color var(--background-color-1)
}
}
+keep-tablet() {
width $tools-item-width * 0.9
height $tools-item-width * 0.9
margin-bottom 0.2rem
font-size $tools-item-font-size * 0.9
}
&.rss {
a {
width 100%
height 100%
border-radius $tools-item-border-radius
&:hover {
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
}
}
}
}
.side-tools-list {
transform translateX(100%)
opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
&.show {
transform translateX(0)
opacity 1
}
}
.exposed-tools-list {
if (hexo-config('style.scroll.percent') == true) {
.tool-scroll-to-top {
display none
&.show {
display flex
}
&:hover {
.percent {
display none
}
.arrow-up {
display flex
}
}
.arrow-up {
display none
}
.percent {
display flex
font-size 1rem
}
}
}
}
}