- 博客(19)
- 收藏
- 关注
RSS订阅原创 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关注的人