- 博客(58)
- 收藏
- 关注
RSS订阅
原创 浅谈BFC—CSS的低调大佬
说起bfc，第一印象就是这哥们不是清浮动用的么？浮动使用不当可能会造成页面的塌陷，如果触发了BFC就不会造成页面的塌陷，具体原理？不太清楚。。。。。某日在一论坛网站看到了一些关于BFC的介绍，“当你在修改样式的时候，就会在不知不觉的时候触发了神奇的BFC，用了却不知晓。”突然觉得这哥们真的太低调了，以前从来没有认真的去探讨过他。先来说说什么是BFC（Block Formatting Context）
2017-12-12 13:11:57
624
1
原创 node性能指标(一)-内存分析与管理
关于node的前言JavaScript运行在浏览器的沙盒中，他始终会受限于浏览器的中间层提供的能力。Node技术的出现给前端工作打开了新的局面。毫无疑问，现代的前端工程化已经离不开Node的应用了，而Node本身的设计是用作服务端语言，越来越多的前端团队，不再只将node局限于工程化应用，也开始去负责BFF层，比如SSR架构、数据适配、数据拼接裁剪、后端应用等。当作为服务端应用的时候，服务的【稳定】与【安全】是最重要的指标，提起性能指标“首屏加载时长”、“可交互时长”等，这些每一个前端er都了解的h5性
2021-12-30 16:16:16
1854
原创 操作做系统中进程和线程的区别
一、两者定义上的区分(理解)【进程】：具体的概念很抽象：“可并发执行且具有独立功能的程序在一个数据集合上的运行过程，它是操作系统进行资源分配和调度的基本单位”可以理解为一个程序执行的实例；实质是一个程序运行的动态过程，并且该程序必须具有并发运行的程序结构；运行过程必须依赖一个数据集合而独立运行，从而形成了系统中的一个单位；“当用户启动一个应用,系统将程序的源码和数据从磁盘加载到内存中,并且开...
2019-07-17 14:56:36
862
转载 进程和程序概念的区别和联系
进程概念和程序概念最大的不同之处在于：1、进程是动态的，而程序是静态的。2、进程有一定的生命期，而程序是指令的集合，本身无“运动”的含义。没有建立进程的程序不能作为1个独立单位得到操作系统的认可。3、1个程序可以对应多个进程，但1个进程只能对应1个程序。进程和程序的关系犹如演出和剧本的关系。4、进程和程序的组成不同。从静态角度看，进程由程序、数据和进程控制块（PCB）三部分组成。而程序是一...
2019-06-14 17:11:06
27401
原创 关于setTimeout async promise执行顺序引发的思考
####====据说这是今日头条去年的一道笔试题，主要考察的是setTimeout async promise执行顺序～先双手奉上这道题目～ async function async1() { console.log("async1 start"); await async2(); console.log("asyn...
2019-03-04 20:16:31
714
1
原创 Linux下安装node和配置node变量
一、安装安装有两种方式： 1. 本地下载好node的安装包，传输文件到linux服务器 2. 直接在服务器终端使用wget命令下载（推荐使用这种）在下载node安装包之前，需要知道自己的linux是32位还是64位； 如果不知道，输入命令：getconf LONG_BIT[root@localhost ~]# getconf LONG_BIT下面说说第二种方法： 1. 去...
2018-08-09 20:27:45
670
原创 多维数组转一维数组(数组扁平化)
一、数组的concat方法了解一下concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。来个例子： cancat与递归let arr = [1,2,[3,4],[5,6,[7,8]]]const flat = (arr) => { let newarr = []; arr.forEach((el,i) ...
2018-08-07 15:31:05
2134
原创 v-if与v-show二者性能比较
先来说说v-ifv-if:根据表达式的值在DOM中生成或者移除一个元素，值是false就会在DOM中删除，反之会克隆相应元素到DOM中 支持加在<template>标签上再说说v-showv-show是根据表达式的值来显示或者隐藏元素，根据的是display的值 不支持加在<template>标签上划重点在切换v-if的时候，vue内部有一个局部...
2018-07-23 21:33:38
8335
原创 h5视频播放video的一些常见问题
<video> 标签是 HTML 5 的新标签。视频预览图,在用户点击播放按钮前显示的图像video标签的poster属性就是解决这一问题的<video controls poster="/images/mypic.gif"> <source src="movie.mp4" type="video/mp4"></vide
2018-07-07 19:08:40
4270
原创 使用CSS属性will-change去优化页面渲染
先说一个老生常谈的话题：什么会造成浏览器的页面重绘？ 当元素的属性发生改变，也可以简单的理解为元素的外形发生改变的时候，例如改变盒子的宽高颜色等等，浏览器会根据元素的新的属性进行重绘。并不一定会带来重排。重绘就会去使用CPU进行重新去计算，操作频繁会导致渲染的卡顿。比如页面滚动事件、某些动画渲染等等 如果说提前告知浏览器，元素会有哪些属性发生改变，让浏览器提前做好准备。那么就可以解...
2018-06-25 17:37:15
464
原创 使用canvas将照片和海报边框图片合成海报的移动端例子
需求： 类似一些美图软件中的给照片加相框的操作 1. 用户选择照片，照片可以移动、可以放大缩小 2. 选择海报模版 3. 生成海报 最后生成的海报效果图类似下图 使用的技术栈是：vue+html2canvas+exif-js 具体思路：1.点击’选择图片’的按钮时候，实际触发的是&lt;input type="file"&gt;,在input的change事件里面，使用new...
2018-06-13 16:09:00
3609
4
原创 html2canvas截屏图片有白边/黑边 的问题记录
先记录一下canvas的画布的形态转换的一些方法 方法 描述 scale() 缩放当前绘图至更大或更小 rotate() 旋转当前绘图 translate() 重新映射画布上的 (0,0) 位置 transform() 替换绘图的当前转换矩阵这的方法使用在canvas的画布身上的 canvas.getContext("2...
2018-06-12 11:25:34
15407
原创 在mac下npm install的错误处理
已经装好了node、npm在安装淘宝镜像的时候报了一堆错，猜测是因为权限的问题，试了一下果然是权限的问题 解决方法如下： 在终端中输入sudo －s接下来会提示输入管理员密码，输入之后，就一切顺畅了...
2018-06-05 13:56:35
4847
原创 JavaScript基础之事件绑定与事件对象篇
事件绑定和普通事件的区别普通事件绑定多个方法，方法会覆盖，只会执行最后绑定的方法； 事件绑定addEvenetListener不会被覆盖，并且可以捕获事件的触发阶段，也能使用removeEventListener来取消事件绑定，但是不兼容低版本浏览器 在IE中事件绑定和取消使用的是attachEvent与detachEvent,并且事件中的this指的是widow,并非元素的本身IE和...
2018-05-11 15:35:50
378
原创 纯css美化radio选择框的样式
效果图如下： 简洁的HTML： <label> <input type="radio" name="1" id="" class="a-radio"> <span class="b-radio"></span>好 </label
2018-05-10 10:44:24
29323
5
原创 纯css实现仿ios的switch开关
效果图如下： 很简单的HTML结构<!-- 仿ios的switch开关 --> <label for=""><input type="checkbox" name="" id="" class="a-switch"></label>CSS部分：主要用到了： 点击l
2018-05-10 10:39:43
2107
原创 $.ajax防止多次点击重复提交的方法
第一种：使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法：$.ajaxPrefilter()方法 :是对全局所有的ajax请求有效，在所有的ajax请求之前，会对每一个请求统一做一些处理，可以去设置ajax的选项，也可以对现有的ajax选项进行更改；接收两个参数：dataTypes...
2018-05-08 15:00:30
5041
原创 出现net::ERR_CONNECTION_REFUSED问题，前端优化
在一次测试中，请求后台数据报net::ERR_CONNECTION_REFUSED的错误。我的这次具体失败的原因是因为请求地址错误的原因。能导致这个问题的原因有很多种，也有可能是网络原因等等….产生这个错误最归根揭底的原因就是ajax请求失败；当时做的登陆功能的测试，在页面上反应是点击登陆后，没有任何反应，用户体验非常的不好面对这种情况，如果在ajax请求时再做出一层的判断，在ajax请求...
2018-05-08 13:15:36
312672
11
原创 lodash常用api之Array数组方法篇
_.flattenDeep(array)：将array递归为一个一维数组如果不用lodash，个人的思路就是将array使用JSON.stringify转化为字符串，然后使用字符串的replace方法将字符'['和']'去除掉 使用这个方法会方便很多_.flattenDeep([1, [2, [3, [4]], 5]]);// => [1, 2, 3, 4, 5]...
2018-05-07 16:33:38
10427
原创 前端面试之js篇整理(一)
js的基本类型有哪些？引用类型有哪些？null和undefined的区别js变量的值有两种： 1.基本类型值：存放在栈内存的简单数据类型。如Number、String 、Boolean、Null和Undefined这物种 2.引用类型值：存放在堆内存的中的对象。如Object 、Array 、Function 、Datanull ：表示变量不存在，常常用作函数返回一个不存在的对象 ...
2018-04-20 09:37:18
635
原创 前端面试之HTML篇整理
HTML5新特性，语义化语义化标签比起传统的div+css的样式布局来说，更遵循W3C规则，有利于团队的开发维护，更有利于SEO优化，方便其他设备解析举几个例说明： 标签 语义化 <section></section> 定义文档中的主体部分的节、段。 <article></article> 定义引入的...
2018-04-14 23:59:17
511
原创 webpack-dev-server页面不能自动刷新的解决
webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载通过官方文档各种配置，自己实验了一把，不知道是哪里出了问题，一直实现不了实时加载，后来查阅资料，一个很简单的配置就实现了实时加载，在这里记录一下：需要先初始化webpack-dev-servernpm install webpack-dev-server --save-dev注意，如...
2018-04-02 17:28:53
8648
原创 webpack插件:使用HtmlWebpackPlugin在页面中使用EJS语法引用模板文件（二）
上一篇中仅仅说了使用HtmlWebpackPlugin来处理html模板，其实该插件还支持EJS的模板语法：那么我们就能把html页面的公用html代码拿出来成一个组件，需要的时候使用模板引入具体怎么做呢？ 如果weboack不能直接去支持这么写，需要一个html-loader作为中介；那么第一步需要先初始化这个loader:npn install html-loade...
2018-03-30 18:14:21
8107
原创 webpack对html文件的处理
为什么去处理html文件 我们所有的方法都打包到了dist的文件夹下面，而我们的html是在自己定义的文件夹下面，如果自己手动再去一个一个src引入这些dist文件夹下的js，那么也有些太不靠谱了所以解决办法是:使用webpack插件:HtmlWebpackPlugin第一步：下载npm install --save-dev extract-text-webpack-pl...
2018-03-30 17:54:06
5079
原创 webpack对css进行单独打包
**目标：项目中所有的css文件全部打包到dist下面的css文件夹下面；**一、webpack对css的处理我们都知道webpack是可以直接去处理javascript的代码，但是对于css、image、font等，是不能直接处理的，需要使用到loader将其转化成javbascript代码片，然后在对其进行处理对于处理css，需要使用到的loader是：style-...
2018-03-30 16:53:16
10598
原创 webpack4笔记
对于webpack的概念类东西不多做解释，感兴趣可以去参考官方文档 ，主要记录如何去使用webpack4开始一个项目 安装好了之后，使用命令行npm init来初始化一个项目，接下来对生成的package.json文件进行处理：安装webpack 和前几个的版本一样，你可以在全局安装，也可以在项目内部安装。个人觉得可以两者都装一下，当命令行在项目中找不到，会去找全局的使用。 在命令行...
2018-03-30 16:52:23
594
原创 vue-router路由懒加载
懒加载，就是lazy-loading,顾名思义延迟加载，什么时候用到了什么时候去加载；一个普通的Vue单页应用项目，直接去使用webpack去打包，那么打包后的javascript包体积会非常的大，导致进入首页的时间会非常长；于是就有了懒加载的思路；那么什么是路由懒加载呢？把不同路由对应的不同组件分割成不同的代码块，当路由被访问时，再去加载对应的组件 这就是利用vue的异步组件...
2018-03-30 16:51:16
2713
1
原创 webpack提取公共模块-CommonsChunkPlugin
CommonsChunkPlugin官方文档解释： CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加...
2018-03-30 16:48:52
5605
原创 tab页切换时候样式更改和单页的过渡
在vue项目中，如何做到选中切换样式呢？就如同下图所示 比如选中的这个加上.active的class样式，如果按照jquery或者原生的思路来，无非就是清除兄弟的.active 添加自己的 .active这种选中切换，在vue中的思路很简单，当某个被选中时，对应的标签就会有.router-link-active 的class名。那么你无需在router-link标签上添加任何cla...
2018-03-13 09:22:05
3901
原创 ES6之Array.from方法
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
2018-03-08 15:40:16
200
原创 ES6拓展运算符的常用场景
之前在学习vuex的辅助函数mapState时候，开始看了一下拓展运算符，当时理解的过于浅显，并写了一片浅显的文章 最近项目空闲期，想认真总结一下这个语法糖/三个点/拓展运算符拓展运算符的含义 将一个数组转为用逗号分隔的参数序列 该运算符主要用于函数调用。从最浅显的外表来看，就是脱掉数组的外套（数组的[] 就很像外套吧。。。），只留下里面的内容，用法就是把里面的内容混淆...
2018-03-08 15:31:37
678
原创 理解javascript的设计模式之发布订阅模式
举一个发布订阅模式通俗易懂的生活上面的例子： 小明去逛商场的时候，看中一双鞋子，售货员却告知他没有号码了，但是这双鞋店里面还会补货。这个时候小明该怎么做呢？每天来这个商场看一下有没有补货？这个看起来有点笨吧，正常情况下，应该是告诉售货员如果补货了，那么请联系我。剩下的事情就交给售货员去做了：当店里补货了，售货员小姐姐会打开客户花名册，把需要通知的客户遍历发送通知的短信/电话这么说来我...
2018-02-22 09:54:45
335
1
原创 如何使用npm发布自己的npm包
记录一次npm包发布的过程：如果想要在npm上有自己的依赖包，那么首先你要先有一个npm的账号，没有的话就需要npm官网 去注册一个；然后需要用npm命令去新建一个项目：//1.进入一个文件夹，打开cmd,输入命令：npm init之后就开始一路的回车，重要的提示如下图： 其中的入口文件index.js就是你要发布的包的入口文件； 版本号这个很重要，如果要更新你的包...
2018-02-13 19:14:16
3382
1
原创 vue面试常见问题小结
写在前面的话，给自己： 任何时候，比起你的技术，更重要的是你的情商，不要纠结在某一个问题的点上面，一千个读者眼里有一千个哈姆雷特。在面试当中，有的时候正确的答案并不是最重要的，重要的是面对各种问题，你是否有从容的境界。一、Vue的双向数据绑定原理是什么？或者vue的响应式原理这个问题，真的很多公司如果问到vue,都会去问这一个问题。具体在这小结一下： vue.js是...
2018-02-06 17:44:07
21637
3
原创 纯css实现等边空心三角形
前段时间写了一些静态页面，用到了空心三角形，手到擒来的是实心三角形，对于空心的三角形，确实用了我这个老年人的脑子想了一想如何布局。给到的设计图如下图所示： 就是左上方的那个小三角，不止这个方位有，别的方位也都有，还有别的页面也有不同朝向的三角形； 话不多说，代码记录下来：首先蓝色border的一整块是一个divdiv class="main">div>//大致绘制一
2018-01-29 16:25:33
2614
原创 node系统模块之fs模块
fs是filesystem的缩写，该模块提供本地文件的读写能力 文件 I/O 是对标准 POSIX 函数的简单封装。 所有的方法都有异步和同步的形式。简单的说：fs模块提供了读写文件的方法，并且这些方法都可以选择同步或者异步；有了读写的能力，那么就可以从服务器的磁盘上拿到文件，返还给前台也页面 什么是同步和异步呢？以前听过一个老师说了等人吃饭的例子，感觉不是那么恰当吧； 拿a
2018-01-26 15:45:36
331
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人