- 博客(19)
- 收藏
- 关注
原创 Webpack优化
1. 减少 Webpack 打包时间 (1)优化loader 对于 loader 来说,影响打包效率首当其冲必属 babel 了。因为 babel 会将代码转为字符串生成 AST, 然后对 AST 继续进行转变最后再生成新的代码,项目越大,转换代码越多,效率就越低。 优化 loader 的文件搜索范围module.exports = { module: { rules: [ { // js 文件才使用 ba...
2021-05-18 17:53:27
196
原创 函数的防抖与节流
**函数防抖**: 指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。**函数节流**:指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。节流可以使用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。函数防抖的实现: function debounce(fn, wait) { var ti
2021-05-18 16:21:11
127
原创 对 SPA 单页面应用的理解,优缺点是什么?
SPA 即( single-page application )仅在Web页面初始化加载相应的HTML、CSS和JavaScript。一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转;而是通过路由机制来实现HTML内容的变换,UI与用户的交互,避免页面的重新加载。优点:1. 用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;2. SPA相对对服务器压力小;3. 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责处理数据;缺点:
2021-05-12 15:46:17
629
原创 vue 生命周期
总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后 (activated和deactivated配合keep-alive标签使用) 。1创建前/后 beforeCreate 阶段: vue实例的挂在元素el和数据对象data都为undefined,还未初始化。 说明: 在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。 created 阶段: vue实例的数据对象data有了,el还没有。 说明: 可以做一些初始数据的获...
2021-05-08 19:29:28
108
原创 Proxy和Object.defineProperty的优缺点
Proxy的优点如下:1. Proxy可以直接监听对象而非属性;2. Proxy可以直接监听数组的变化;3. Pxory有多种(13种)拦截方法,不限于apply、ownKeys、deleteProperty、has等等 是Object.defineProperty不具备的;4. Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改;5. Proxy作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新
2021-05-08 19:09:19
2615
原创 计算数组的长度
function arrLength(arr) { var len = 0; for (var i = 0; i < arr.length; i++) { len += Array.isArray(arr[i]) ? arrLength(arr[i]) : 1 } return len }console.log(arrLength([1,2,3,4,5]))
2021-03-18 19:21:19
114
原创 iframe跨域通信 postMessage
一、 跨域通信概述MessageEvent 四个属性message(类型)data(window.postMessage的第一个参数)origin(调用postMessage时页面的当前状态)source(调用postMessage的窗口信息)二、postMessage语法window.postMessage(message,targetOrigin、[transfer])父窗口<div class='parent'> <iframe src='子窗口链接
2021-03-17 18:20:40
588
原创 var let const 的区别与联系
1、var声明变量存在变量提升,let和const不存在变量提升console.log(a); // undefined ===> a已声明还但是没赋值,默认得到undefined值var a = 10;console.log(b); // 报错:b is not defined ===> 找不到b这个变量let b = 10;console.log(c); // 报错:c is not defined ===> 找不到c这个变量const c = 10;2、l
2021-03-10 18:32:41
99
原创 判断字符串中字母出现最多的次数
var str = 'abbcccddddfffff' // 先转换成数组 var newArr = str.split(''); // 创建一个对象 var json = {}; // 遍历数组 判断对象中是否存在数组中的值 存在 值+1 不存在则赋值为1 for (var i = 0; i < newArr.length; i++ ) { if(json[newArr[i]]) { json[newArr[i]] += 1; ..
2021-03-10 10:44:07
369
原创 web 前端性能优化
一、 网络层面优化1 减少http请求,合并资源(js、css、图片)2 减少资源体积,压缩资源(js、css、图片)3 大量数据加载或大量图片加载时使用懒加载或预加载优化 (使用字体图标或者SVG图标来代替传统png图)4 使用按需加载,加快首屏渲染速度5 利用http缓存机制,对资源进行缓存6 网站用到很多域名时,可使用DNS预解析,提前解析域名7 使用CDN给网站静态资源加速(CDN(contentdistribute network,内容分发网络)的本质仍然是一个缓存)二、js层面
2020-12-31 16:20:55
133
原创 前端实现下载pdf的两种方法
1、使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下:(1)下载插件模块:npm install html2canvas jspdf --save npm install jspdf --save(2)定义功能实现方法在项目工具方法存放文件夹utils中创建htmlToPdf.js文件,代码如下:export default{ ins
2020-12-28 19:21:01
4319
3
原创 js数组去重方法
1、利用 ES6的set 方法。代码如下function unique1(arr) { //Set数据结构,它类似于数组,其成员的值都是唯一的 return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组}console.log(unique1([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));2、利用数组的indexOf下标属性来查询。代码如下function unique2(arr) { var
2020-12-28 17:42:28
115
原创 引用数据类型的深拷贝方法
数组以下方法来实现一维数组的深拷贝,但这种方法只适用于一维数组,对多维数组无效1、for 循环实现数组的深拷贝for循环是非常好用的。如果不知道高级方法,通过for循环能够完成我们大多数的需求。代码如下: var arr = [1,2,3,4,5] var arr2 = copyArr(arr) function copyArr(arr) { let res = [] for (let i = 0; i < arr.length; i++) { res.push
2020-12-28 16:45:22
754
1
原创 Generator async promise 的区别
首先 Generator async promise 这三个api都是es6新增api可以理解为异步的解决方案,但是他们的适用场景不一样Generator执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。Generator 函数定义...
2019-11-29 10:13:36
310
原创 前端如何进行seo优化
1. 合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可;description把页面内容高度概括,不可过分堆砌关键词;keywords列举出重要关键词。语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页2. 重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,保证重要内容一定会被抓取3. 重要内...
2019-11-26 08:45:58
197
原创 React与Vue的区别与联系原理
在渲染用户界面的时候,DOM的操作是最昂贵,不幸的是没有库可以让这些原始操作变得更快。我们能做的最好的就是:尽量减少DOM操作。Vue 和 React 都使用虚拟DOM来实现,并且两者工作一样好;相同点:1都支持服务器端渲染2.都使用虚拟DOM来实现3.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范4.只有框架的骨...
2019-10-29 10:11:42
315
原创 typeof、instanceof、Object.prototype.toString.call() 区分对象类型
typeof.基本数据类型:number,string,undefined,boolean,object 五种。用法: typeof(变量名)1 var test1= 1;2 alert(typeof test1);//输出number3 var test2 = “”;4 alert(typeof test2);//输出string5 var test3 = undefined;6...
2019-10-16 14:53:23
764
原创 egg 连接 mysql
安装与配置安装对应的插件 egg-mysql :$ npm i --save egg-mysql开启插件:// config/plugin.jsexports.mysql = { enable: true, package: 'egg-mysql',};在 config/config.${env}.js 配置各个环境的数据库连接信息。单数据源如果我们的应用只需要访问一个...
2019-10-14 11:45:43
258
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人