加载3D模型性能优化
一、 引入 无论是大型虚拟世界还是简单的网站， 都是必要的。 特别是在运用三维模型的情况下，我们需要更加深入的优化。因为 三维模型通常包含大量的数据和复杂的几何形状 ，如果不进行性能优化，浏览器可能会因为负载过重而崩溃。 在本文中，我们将探讨如何在 / 中对加载三维模型进行性能优化。我们将介绍一些实践方法和技巧，让你的虚拟世界或网站能够以更好的性能运行。 二、 性能监测工具简介：stats.js \\ r3f perf \\specto...
大文件传输优化: 分片上传、断点续传和秒传的前后端实现
大文件上传 ：一次性上传会存在的问题：比较慢，中途退出或者网络延迟，容易出现超时，上传失败等问题。所以一般会选择 分片上传、断点续传来实现。线上体验地址及演示在下面，源码在末尾。需要的小伙伴自取。 断点续传 断点续传是一种允许在上传中断后继续上传，而无需从头开始。 分片上传 分片上传是将大文件分割成多个小块（分片），然后逐个上传这些小块。小块可以并行上传，从而提高上传速度。一旦所有分片上传完成，服务器可以将这些分片合并成完整的文件。 秒...
二十八张图彻底讲明白 HTTPS 的整体流程
二、前置知识 我们先从加密的历史说起。最早的加密是一种对称方式的加密。 2.1、对称加密 对称加密：也就是加密和解密都用同一个密钥。 了解过近代战争的朋友可能知道，在一战和二战期间，敌我双方为了有效的信息传递，就大量采用这种方式进行加密。 具体形式就是情报发送方先编写一个密码本，然后悄悄的交给接收方。 这样下次发送情报的时候，发送方根据密码本上的规则进行加密，将得到密文后发送出去，接收方收到密文电报后再根据密码本进行解密。 <img w...
嗯？绝不允许你还没有属于自己的富文本编辑器
作为一名新时代农民工，几乎每个人都有自己的博客站点，而博客最重要的功能就是文档编辑，实现文档编辑无外乎 、 两种模式。其中富文本编辑器使用起来比较简单，不需要额外了解各种语法，对非技术人员来说容易上手，本文就着重介绍一下富文本编辑器框架———— Slate ，它不仅可以帮助我们自定义实现富文本效果，而且还能实现类似于Markdown一样的语法输入。 说起 Slate ，可能很多人不了解，但是说起前端富文本插件库 以及 ，大家就不陌生了，...
UnoCSS给了我一个不用tailwindcss的理由
如果你没有听说过 或者 ，请先 return 先去了解一下😝。 开发上：可能为你甚至你们的前端团队 节省很多写样式的时间 ，也能让你或者你们的项目 开发体验有很大提升 生产上：你们的项目打出来的包体积中的 样式代码占比将突然骤降然后趋于不变 。 书接上回 之前我写过一篇文章 ，极力推荐使用 来提升开发效率和体验，尤其是样式代码的体验会有质的提升。当然样式代码打包体积的减少也可以起到优化我们整体前端项目的作用。但是为什么有这篇文章了呢？...
前端实现文件预览 - word、pdf、excel预览
PDF预览 PDF预览用的是pdfjs dist这个pdf.js构建库 安装 最好记住自己安装的版本，因为后面解析字体的时候可能会用到 使用 1. 项目中引用 因为我安装的版本是2.6.347，所以我这里用cdn引入需要的工作包版本是2.6.347,最好是引用本地的，因为有些内网没法访问cdn的话会造成异常。 2. 上传组件 这时候要简单的写一个上传组件，给组件加上id以及change事件方便测试使用效果 3. 添加一个渲染容器 此时需...
简述 pt、rpx、px、em、rem、百分比、vh、vw的区别
简述 pt、rpx、px、em、rem、%、vh、vw的区别 设备物理像素 pt：屏幕宽、分辨率，其中每一小份就是1pt。 css 像素 px： pc 机大屏幕显示器，1px约等于0.76个物理像素 手机小屏幕：以IPhone6为标准，物理像素750，分辨率375 1px = 2pt。 px 也是一个相对单位 px 是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。 手机屏幕大小不一，差异较大，所以反而不希望一个...
面试官：”Vite为什么快？“
面试官：”Vite为什么快？“ 阅读8分钟 前面一篇文章介绍了如何做 Vite 的插件开发 ，这篇文章介绍清晰 Vite 的构建原理，为什么比 Webpack 构建速度快这么多。 1\. 一句话解释 Webpack 的构建原理 前端之所有需要 类似于 Webpack 这样的构建工具，是为了提高项目的开发效率，Webpack 通过分析js中的 require 语句，分析出当前 js 文件所有的依赖文件，通过递归的方式层层分析后，得到整个项...
写给前端同学的Nginx配置指南
nginx.conf配置 找到Nginx的安装目录下的 文件，该文件负责Nginx的基础功能配置。 配置文件概述 Nginx的主配置文件( )按以下结构组织： | 配置块 | 功能描述 | | | | | 全局块 | 与Nginx运行相关的全局设置 | | events块 | 与网络连接有关的设置 | | http块 | 代理、缓存、日志、虚拟主机等的配置 | | server块 | 虚拟主机的参数设置（一个http块可包含多个serv...