- 博客(23)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 css隐藏页面元素的11种方法
表现：」 浏览器加载并解析 HTML DOM 和 CSS 对象模型后，页面将分三个阶段呈现：布局（生成每个元素的几何位置）、绘制（绘制每个元素的像素）、组合（以适当的顺序放置元素层）。将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素。filter: opacity(N) ：filter属性用来设置元素的滤镜，opacity是滤镜重的透明度，用来设置元素的透明度。
2024-01-16 10:19:13
1055
原创 10个高级的JavaScript技巧
对于数组，可以使用方括号表示，而对于对象，则可以使用大括号表示。闭包是一种在编程中常见的概念，指的是一个函数能够访问和操作其词法环境中的变量，即使在该函数被调用时，其词法环境已经不再存在。事件委托是一种技术，它可以将单个事件侦听器附加到父级和减少内存使用量并提高性能，特别是对于大型列表或动态生成的内容。柯里化是一种函数式编程技术，它将接受多个参数的函数转换为一系列只接受单个参数的函数。// 在操作结果的基础上 resolve(data) 或 reject(error)// 使用 Async/Await。
2024-01-16 10:18:09
579
原创 前端常用日期库比较
moment、dayjs、date-fns三个库都能满足常见的需求，但是存在如下特点：moment 的功能强大但是体积也最大，moment.min.js 的体积为51K，dayjs.min.js 体积为7K，date-fns由于是模块化加载，体积可以最小化；dayjs 和 moment 的接口几乎完全一致，相互切换的学习成本极低，date-fns接口风格差异较大；从功能上看，dayjs、date-fns 基本上可以替代moment，同时可以大幅减小app的体积。
2023-02-03 14:04:22
723
原创 vue项目系统兼容IE浏览器问题以及解决方案
系统兼容IE浏览器问题以及解决方案问题vue项目在IE浏览器上运行时会出现兼容性问题：JavaScript语法报错，css样式错乱。原因是在IE（以IE11为例）浏览器下，部分js的写法需要改变，部分样式在IE浏览器上不支持，以及一些IE浏览器特有的问题。vue 只兼容ie8以上版本；IE 不兼容 axios的promiss对象;IE 不兼容es6语法；解决方案下载对应插件包解决js兼容性问题：babel-polyfill，es6-promise以及 babel-plugin-
2022-05-16 10:20:04
20711
3
原创 页面渲染性能的优化
页面渲染性能的优化衡量指标window.performance是w3c提供的用来测量网页和Web应用程序的性能api。其中performance timing提供了延时相关的性能信息，可以高精度测量网站性能 。白屏时间=页面开始展示的时间点(PerformanceTiming.domLoading)-开始请求时间点(PerformanceTiming.navigationStart)首屏时间=首屏内容渲染结束时间点(视业务具体情况而定)-开始请求时间点(PerformanceTiming.navig
2022-02-16 16:02:06
1385
原创 HTTP浅析
HTTPS在HTTP协议的基础上，HTTPS和HTTP2规定了更复杂的内容，但是它基本保持了HTTP的设计思想，即：使用上的Request-Response模式。我们首先来了解下HTTPS。HTTPS有两个作用，一是确定请求的目标服务端身份，二是保证传输的数据不会被网络中间节点窃听或者篡改。HTTPS是使用加密通道来传输HTTP的内容。但是HTTPS首先与服务端建立一条TLS加密通道。TLS构建于TCP协议之上，它实际上是对传输的内容做一次加密，所以从传输内容上看，HTTPS跟HTTP没有任何区别。
2022-02-11 08:47:16
218
原创 浏览器缓存浅析
浏览器缓存就是把一个已经请求过的web资源（如html页面，图片，JS，数据）拷贝一份放在浏览器中。缓存会根据进来的请求保存输入内容的副本。当下一个请求到来的时候，如果是相同的URL，浏览器会根据缓存机制决定是直接使用副本响应访问请求还是向源服务器再次发起请求。使用缓存的原因（1）减少网络带宽消耗：当web缓存副本被使用时，只会产生极小的网络流量，可以有效降低运营成本。（2）降低服务器压力：给网络资源设定有效期之后，用户可以重复使用本地缓存，减少对源服务器的请求，简介降低了对服务器的压力，同时搜
2022-02-10 15:11:00
1338
原创 CSRF浅析
CSRF浅析跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。CRSF攻击原理首先用户C浏览并登录了受信任站点A；登录信息验证通过以后，站点A会在返回给浏览器的信息中带上已
2022-01-26 15:28:13
183
2
转载 git常用命令浅析
git命令前言作为当前世界上最强大的代码管理工具Git相信大家都很熟悉，但据我所知有很大一批人停留在clone、commit、pull、push…的阶段，是不是对rebase心里没底只敢用merge？碰见版本回退就抓瞎？别问我怎么知道的，问就是：“我曾经就是这样啊～～”。针对这些问题，今天就将这几年对Git的认知和理解分享出来，尽可能的从本质去讲解Git，帮助你一步一步去了解Git的底层原理，相信读完本篇文章你便可以换种姿态，更加风骚得使用Git各种指令。1.基本概念1.1 Git的优势Gi
2021-12-23 14:51:15
115
原创 fbx文件批量格式转换（glb/gltf）与压缩
fbx文件批量格式转换（glb/gltf）与压缩1. 使用npm安装fbx2gltf.js插件npm install --save fbx2gltf2. 到指定目录cmd命令行界面进入node_modules\fbx2gltf文件下的bin文件，然后根据平台选择进入相应目录，示例是window系统选择Windows_NT目录，同时把要转换的fbx文件拷贝放在该目录下3. 批量格式转换执行以下命令，将fbx格式文件批量转换为glb格式for %i in ('dir *.fbx ') do FB
2021-12-09 11:44:18
5493
2
原创 gltf文件批量压缩
gltf文件批量压缩使用gltf-pipeline将gltf格式文件采用draco算法进行压缩能有效降低模型文件大小，但是gltf-pipeline官方并没有介绍批量处理的方法，下面我们通过批处理来实现：打开cmd，进入gltf模型存放的路径，输入如下命令，回车，就会自动循环执行，批量压缩。（-d表示使用draco算法进行压缩）for %i in ('dir ./ *.gltf /s /b') do gltf-pipeline -i %i -o %i -d与gltf格式相比，相似的glb格式的文
2021-12-09 09:18:17
1217
原创 前端面试题总结-JS篇（1）
1. calc的应用calc() 函数用于动态计算长度值 。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 “+”, “-”, “*”, “/” 运算；calc()函数使用标准的数学运算优先级规则；2. 事件委托的优缺点优点：减少事件注册，节省内存。比如，在table上代理所有td的click事件在ul上代理所有li的click事件。简化了dom节点更新时
2021-12-08 13:51:16
136
原创 前端面试题–html篇
前端面试题–html篇1. 渐进增强和优雅降级之间的不同？ 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（
2021-11-30 10:14:10
479
2
原创 threejs粒子效果
threejs粒子效果有两种方法：THREE.Particle和THREE.ParticleSytem，THREE.Sprite。本案例中的粒子系统就是通过Sprite类来实现的。初始化基本配置首先定义基本的用到的，通常包括容器，相机，场景，渲染器，性能监控组件，光线等/** * 初始化*/function init() { // 容器 container = document.createElement( 'div' ); document.body.appendChi
2021-11-26 11:38:18
4139
4
原创 eslint代码自动修复
eslint代码自动修复安装lintnpm install lint添加eslint脚本在package.json的scripts中的脚本配置修改如下"scripts": { "dev": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "eslint src", "fix": "eslint src/**/*.* --fix" },配置.editorconfig文件代码
2021-10-25 11:01:00
11848
原创 threejs性能优化
three.js是目前国内开发Web3D应用最多的第三方库，它提供了非常多的3D显示功能。在使用的时候，虽然three.js 本身做了优化，但是在较大分辨率下，加载较大或者较多模型时会出现，帧率会越低，给人感觉就越卡，因此性能方面的优化对提高视觉体验有着积极影响。以下是我在项目（vue+threejs）开发结合度娘总结的一些思路，希望能有所帮助。合理执行渲染方法因为默认情况下requestAnimationFrame（）每秒执行60次，如果在里面加个for循环，代码效率就会严重影响，同时还要减少浮点
2021-10-19 11:18:00
8273
3
openlayer框架说明文档
2024-07-18
基于Fabricjs的画板工具
2022-01-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人