- 博客(13)
- 收藏
- 关注
RSS订阅原创 前端垃圾回收机制
一、概述垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行调用栈中的数据如何回收在调用栈中，有一个记录当前执行状态的指针（ESP），通过栈中下移指针完成已执行完成的函数的执行上下文的销毁，新函数执行，新函数的执行上下文入栈，直接覆盖内存。引用数据（堆）中的数据如何回收代际假说代际假
2021-08-30 16:15:55
1266
原创 TCP三次握手与四次挥手
前置知识TCP标志位SYN: 同步标志位，用于建立会话连接，同步序列号ACK: 确认标志位，对已接收的数据包进行确认FIN: 完成标志位，表示我已经没有数据要发送了，即将关闭连接PSH: 推送标志位，表示该数据包被对方接收后应立即交给上层应用，而不在缓冲区排队RST: 重置标志位，用于连接复位、拒绝错误和非法的数据包URG: 紧急标志位，表示数据包的紧急指针域有效，用来保证连接不被阻断，并督促中间设备尽快处理TCP三次握手所谓三次握手(Three-way Handshake)，是指建
2021-06-22 10:11:27
154
原创 前端图像处理之马赛克
开门见山接了个需求，图片处理新增马赛克，可以撤销上一步与还原撤销项目地址可拉下来直接用技术需求JS、canvas设计思路canvas画布绘制图片，保证图片比例不变，并且画布不能有留白鼠标在画布上移动时，获取鼠标位置获取鼠标定位范围size(每个马赛克大小)的像素平均值将该区域所有像素点的rgba设为刚刚所求的平均值循环2-4步,绘制前需要判断当前绘制点与上一次绘制点是否相离太近导出原尺寸大小的马赛克图片url撤销：保存每一次打马赛克后的图片数据恢复：缓存撤销数据代码实现定义
2021-05-20 17:56:13
910
原创 webpack优化实践——可视化资源分析与按需加载
webpack实践——可视化资源分析与按需加载学到很多东西的诀窍，就是一下子不要学很多。 ——洛 克可视化资源分析webpack-bundle-analyzer安装yarn add webpack-bundle-analyzer配置在config文件夹中找到webpack.config.js//webpack打包分析工具const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
2021-03-19 16:16:55
234
原创 前端缓存与本地存储
一、概述前端缓存也就是HTTP缓存机制是前端性能优化很重要的一点，而前端本地存储和缓存却是不一样的，但对于新手的确有弄混淆的可能。本文详细记录它们的概念与特点二、HTTP缓存HTTP缓存，可以从缓存位置，获取缓存方式来学习缓存位置service workerMemory CacheDisk CachePush Cache查找缓存优先级会依次从上到下匹配，如果都没命中那么才会去请求网络资源service worker一个服务器与浏览器之间的中间人角色，如果网站中注册了service
2021-02-23 21:32:27
893
1
原创 antd 踩坑之 javascriptEnabled配置
前言想写一个react+antd的小项目，引入antd样式报错，于是记录下解决方案错误信息也就是这一条Inline JavaScript is not enabled. Is it set in your options?，那么根据报错信息也就是说有对应设置没有启动，通过查询对应文档，Enable Inline JavaScript对应的的参数是javascriptEnabled，而这个参数在lessv3.0之后是默认为false的，所在在项目中的webpack.config.js中配置javas
2020-12-11 16:25:31
8997
原创 React中引入less、less-loader
前言官方的 create-react-app创建的项目默认是不支持 less 的，但是又写不惯其他的预处理语言方法第一步//安装 less与less-loaderyarn add less less-loader --save-dev第二步//弹出默认配置，create-react-app创建的项目默认是没有webpack.config.js的yarn eject第三步// 在webpack.config.js文件中，仿sass的引入const lessRegex = /\.le
2020-12-11 15:50:57
915
1
原创 手撕代码 — 防抖与节流
防抖防抖是在触发事件的n秒之后才会执行函数，触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间应用场景按钮点击事件input事件手机号验证防止用户多次重复提交…//每次触发事件时都取消之前的延时调用方法const debounce = (func, time) => { if (typeof func !== 'function') { throw new TypeError('Expected a function
2020-12-10 11:26:49
185
原创 给你的项目搭建 Git 提交日志规范(commitizen+husky)
为什么做 Git 提交规范？在开发项目时，同一个团队的人员提交的日志各不一样，各有特色，有时候也过于简陋，甚至都不知道此次提交到底做了什么，导致非常不便于代码审查和项目管理。为了改变这种现象，我们可以借助工具对 Git 日志进行规范化约束，包括自动化，模板化以及强制校验。安装与配置yarn add -D @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog husky standard-
2020-12-10 11:23:42
682
原创 「前端精选面试题」 - （一）
引言本文已收录在Github，欢迎Star。每天的积累只为更好的将来。你的每一个star，都是对我的鼓励！正文1、vue中computer与watch区别解析：第1题讨论：欢迎讨论2、你了解哪些跨域解决方法解析：第2题讨论：欢迎讨论3、你知道哪些判断类型的方法解析：第3题讨论：欢迎讨论4、从url到页面展现，这之中发生了什么解析：第4题讨论：欢迎讨论5、你知道盒模型吗?解析：第5题讨论：欢迎讨论6、你了解事件循环吗解析：第6题讨论：欢迎讨论7、Vue 的响应式原
2020-09-12 19:57:08
158
原创 JS异步执行顺序
JS异步执行顺序今天在重温promise的时候，突然发现了一个有趣的题目：(function() { setTimeout(() => { console.log(0); }); new Promise(resolve => { console.log(1); setTimeout(() => { ...
2019-08-27 20:26:37
1508
2
原创 ECharts初试（1）
进入公司写的第一个小demo没想到会是用echarts完成一个图表效果。刚看到图的时候，感觉不难，不过没想到，echarts官方api狠狠地打击我的自信心。1.vue引入echarts首先使用 npm install echarts --save然后在main.js中引用 import echarts from 'echarts'将其指向VUE实例的原型上 Vue.prototype....
2019-07-08 17:17:07
123
原创 VUE小问题解决（1）
路由切换不触发created等钩子函数问题来源在同一个component下的组件来回切换时，不会触发created和mounted钩子函数解决方式1.watch $routewatch:{ //监听路由变化 $route( to , from ){ console.log( to , from ) // to , from 分别表示从哪跳转...
2019-07-04 16:14:42
197
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人