浏览器页面渲染过程当点开一个网页时，浏览器会先接受到服务端的资源，然后经历下面几个步骤渲染页面
首先解析HTML文档，构建起DOM树。在这个过程中，解析器遇到外链标签会把请求交给网络模块，浏览器网络层会并行加载脚本、样式表和图片，以此提高性能
然后浏览器解析CSS，构建CSSOM树，这个树包含了所有CSS规则。
将DOM树和CSSOM树结合起来，形成渲染树，渲染树包含了页面上每个元素的显示信息
然后进行布局（回流），浏览器要计算出渲染树上每个元素的几何信息（位置大小等）
再进行绘制（重绘），浏览器使用渲染树来绘制页面上的内容
最后浏览器把所有页面的部分合成我们最终看到的像素性能优化：为了加快渲染速度，可以减少重绘和回流，延迟加载图片，使用CSS硬件加速等
进程和线程之间的区别首先他们都是操作系统用来执行任务的基本单位，但有以下几点关键不同：
进程是独立的运行环境，每个进程都有自己独立的内存空间。创建进程时，操作系统需要为其分配资源，所以进程的开销比较大，而线程共享进程的内存空间，所以开销较小
进程之间相互独立，一个进程崩溃不会影响其他。而线程属于进程的一部分，同一进程下的线程可以 ...
HTTPS和HTTP有哪些区别
HTTP数据传输是明文的，容易受到攻击。而HTTPS在HTTP的基础上增加了SSL/TLS协议作为加密层，确保数据传输的安全性。
HTTP连接相对简单，在TCP三次握手之后就可进行报文传输。而HTTPS在三次握手后还需进行SSL/TLS的握手过程，才可进入加密报文传输。
HTTP通常使用80端口，而HTTPS使用443端口。
HTTPS需要向CA申请数字证书来保证服务器身份是可信的。
HTTPS的工作原理（建立连接的过程）
HTTPS主要基于SSL/TLS协会建立连接并传输数据，其连接的过程是：
客户端在发起HTTPS请求后，服务器会发送其公钥证书给客户端。客户端会验证证书是否由CA签发，检查其有效性。验证通过后，客户端会生成一个随机的对称加密密钥，并使用服务器的公钥加密这个密钥，然后发送给服务器
服务器收到后使用私钥解密得到对称加密密钥，此时客户端和服务器都有了相同的密钥，建立了安全连接，就可以使用对称加密密钥对所有传输的数据进行加密，确保数据传输的安全性
另外SSL/TLS协议还包括消息完整性验证机制，如消息 ...
前端学习
未读谈一谈你对HTML语义化标签的理解
可读性：语义化标签让HTML更易读懂，如用article,section,header等代替div。
无障碍访问：对残疾用户，屏幕阅读器可以通过语义化加速理解
搜索引擎优化：搜索引擎爬虫也依赖于标签来理解网页的结构和内容，语义化有助于提升搜索排名
维护成本：语义化可以减少沟通成本，提高开发效率
样式和行为的分离：有助于将内容的结构与样式和行为分离
12345678910<body>┌─<header> 页头（logo + 主导航）├─<nav> 主导航 / 面包屑├─<main> 页面唯一核心内容区│ ├─<article> 独立完整内容（新闻、博客、商品卡片）│ ├─<section> 按主题分块（必须有标题）│ ├─<aside> 侧边栏（与周围内容弱相关）│ └─<figure>+<figcaption> 图表/代码块及其标题├─<footer> ...
针对CSS，如何优化性能
减少选择器的数量：其直接影响到页面的加载速度
避免使用复杂的CSS属性：如 border-radius、box-shadow、filter、:nth-child 等，需要浏览器进行较多的计算；
使用CSS压缩工具，移除未使用的CSS代码减少文件体积
使用缓存，可以将常用CSS文件存储在用户本地
避免重绘与回流
针对HTML，如何优化性能
优化图片
压缩图片
选择正确的图片格式
懒加载图片
合并css和js以减少HTTP请求，避免重复加载资源
缓存策略
通过HTTP设置缓存头，让浏览器缓存静态资源
利用CDN来缓存和分发静态资源
异步加载和延迟加载
将非关键资源异步加载
实现延迟加载
通过优化和合并DNS查找，减少页面加载的DNS延迟
减少重绘和回流：避免频繁操作DOM，尽量使用CSS3动画和过渡
避免使用内联样式，减少HTML文件大小
使用语义化标签
使用性能分析工具，Chorome Devtools,lighthouse等
针对Javascript，如何优化性能
减少DOM操作：频繁的DOM操作会导致页面的重绘和回流，会消耗大量性能
使用事件 ...
前端学习
未读节流与防抖防抖：就是指连续触发事件但是在设定的一段时间内中只执行最后一次应用场景：搜索框搜索输入 文本编辑器实时保存
1234567891011121314151617let timerId = null;document.querySelector(".ipt").onkeyup = function () { // 防抖 if (timerId !== null) clearTimeout(timerId); timerId = setTimeout(() => { console.log("我是防抖"); }, 1000);};
节流：就是指连续触发事件但是在设定的一段时间内中只执行一次函数。例如：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次记忆方法：不要打断我应用场景：高频事件例如 快速点击 鼠标滑动、resize 事件、scroll 事件下拉加载视频播放记录时间等
1234567891011121314151617let timerI ...
前言为了给我的博客添加一个二次元看板娘，我在网上搜寻教程发现之前的hexo-helper-live2d不在维护了，支持的模型少且旧，遂采用hexo-oh-my-live2d ，一个高可自定义且开箱即用的 Live2D For Web 组件, 快速为您的个人网站加入Live2D看板娘,下面是详细教程。
安装流程
在博客根目录下执行下面的操作：
1npm install hexo-helper-live2d
下载喜欢模型
live2d模型下载地址
创建一个github仓库(公开)并将找到的live2d模型上传到仓库中。找到对应模型文件复制链接，例如：https://github.com/Miloboxgithub/MyLive2d/blob/main/%E7%BA%B1%E9%9B%BElive2d/model/sagiri/sagiri.model.json 这样。将其放入这个网址将换取到的CDN链接保存
在hexo的config.yml文件下添加下面的内容，并将保存的对应模型链接放至models下path中：
12345678910111213141516171819202 ...
前端学习
未读JavaScript 数据类型及实用技巧原始类型/基本类型在 JavaScript 中，有 7 种原始类型，分别是：
boolean
null
undefined
number
string
symbol
bigint
引用类型/复杂类型引用类型包括：
对象（Object）：由大括号 {} 包围的一组属性的集合。
数组（Array）：由方括号 [] 包围的一组有序的值的集合。
函数（Function）：可以执行特定操作的可重复使用的代码块。
日期（Date）：表示日期和时间的对象。
正则表达式（RegExp）：用于匹配和操作字符串的对象。
Map：一种可迭代的键值对集合。
Set：一种不重复值的集合。
基本类型和引用类型的区别基本类型的值存储在栈中。当我们把 a 赋值给 b 的时候（b = a），会开辟一块新的空间存储 b 的值。今后即使修改 a 的值，b 也不会改变。
引用类型存储的是对象的地址。假设把 obj1 赋值给 obj2，只要我们修改其中一个变量所引用的对象时，其他引用该对象的变量也会受到影响。
如何判断一个变量类型，在不用 ...
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
