- 博客(25)
- 收藏
- 关注
RSS订阅原创 前端错误监控
前端错误监控大分为两大类：js运行时错误，网络请求错误js运行时错误可分为：普通错误，未捕获的Promise错误网络请求错误可分为：静态资源加载失败，AJAX (XHR,fetch)请求失败。
2023-09-10 16:27:42
328
原创 记1次前端性能优化之CPU使用率
可以看到内存没有问题，但是CPU使用率一直100%，还有DOM节点2万多，显然，异常出在了这两个地方，但是有没有什么关联呢？不过这一块是比较让人疑惑的，控制台不应该运行运行在独立的进程吗，为什么会受js运行影响？这个是我们讨论的话题外了。回到最开始的Network，也不难发现，是在处理这个pending中的请求的结果时，js一直在运行。我们发现，主要运行时间都是js运行，有一个长任务一直没有释放，接下来我们可以通过下钻上图标红的。但是，还有个现象，页面卡死了，后端没响应怎么能导致页面卡死呢？
2023-08-30 00:27:04
1018
原创 vue模板编译
弄懂vue模板编译需要弄清编译的目的 什么时候编译 编译过程编译的目的我们知道，html代码可以直接书写template字符串，也可以写render函数，那么template和render有什么关系？new Vue({ el: '#app', template: '<div>this is template</div>', render(createElement) {
2020-10-31 18:35:58
976
原创 实现瀑布流
为什么别人的教程那么难看懂？代码多的都一大坨，蓝色，香菇~我认为，既然是教程，就应当简洁明了，在尽可能不伤眼、少伤脑的情况下习得精髓！我先举个栗子，假设有15张图片，高度分别未10，20，30，40，50...140，150，排成3列。不用怀疑，第一排肯定是10，20，30，40，50 。第二排，不难预测，第6张放在第1张下面，top值为第1张的高度，left值为第1张的的left...
2020-10-30 18:46:12
2199
3
原创 vue-router原理
弄清vue-router大概原理可从以下3个问题出发如何监听url变化 vue插件使用，以及Vue.use(VueRouter)做了什么 url变化如何通知组件更新如何监听url变化首先我们要知道前端路由，前端路由、后端路由都是一种相对概念，就是为了区分而起了个名字，就好比客户端渲染和服务端渲染，他们都是成对出现的，在没有客户端渲染的时候应该没人会把从服务器获取完整的html文档叫服务端渲染把，前端路由也是如此。前端路由的特点就是，相对后端路由，改变url，页面无需刷新。前端路由有两种
2020-10-29 22:19:58
383
1
原创 vue之响应式原理
响应式，顾名思义，一个地方改变，触发另一个地方改变，在vue的体现就是，data的某个属性值改变，自动触发了视图更新说到响应式，可以谈谈观察者模式观察者模式是一种实现一对多关系解耦的行为设计模式。它主要涉及两个角色：观察目标、观察者class Watcher { constructor(name) { this.name = name; } receiveMessage(message) { console.log(`${this.n
2020-10-28 10:35:18
232
原创 异步迭代器，generator，for await of
这些东西好像看起来抽象，其实不然。现在假设有这么一个业务场景，有n个文件，需要先删除第1个、再删除第2个、第3个...第n个，你会怎么写？已知如下文件列表，删除函数，该函数是异步的const files = Array(100).fill(0).map((t, i) => ('file' + i));// 删除文件函数function deleteFile(index) { return new Promise((resolve, reject) => {
2020-10-24 23:34:56
241
原创 关于vue列表渲染的key理解
关于vue v-for 里的key，文章都一大把了，但是，并不是每个人都说的准确或说到位了，这里谈谈个人理解。key的作用，就是为了帮助比较前后vnode是不是相同vnode。如果匹配到了相同节点，那就可以直接复用。但是用什么作为key呢，我们讨论一下以下几种情况不加key 用随机数 用数组索引 用数组元素唯一属性，如id讨论前我们先看一下vue对于是否为sameVnode的判断逻辑，这里我们关注a.key===b.key就可以了，至于更详细的diff过程可以看看这篇详解vue d.
2020-10-18 12:50:58
716
原创 Last-Modified和Etag
浏览器缓存分为强缓存和协商缓存，而协商缓存就是靠Last-Modified和Etag 来控制的Last-Modified浏览器第一次请求资源的时候，服务器返回的header上会带有一个Last-Modified字段，表示资源最后修改的时间，当浏览器再次请求该资源时，请求头中会带有一个If-Modified-Since字段，值为Last-Modified的值。服务器收到这个请求后，将If-Modified-Since和当前的Last-Modified进行对比。如果相等...
2020-10-07 14:57:53
2304
原创 斐波那契数列与尾递归
斐波那契数列,又称黄金分割数列,形如0、1、1、2、3、5、8、13、21、34、……不难发现：n>=2时，f(n) = f(n-1)+f(n2)如果用代码来体现就是 function f(n) { if (n <= 2) return n; return f(n - 1) + f(n - 2); }时间复杂度分析但是你会发现，如果你执行f(50),需要很久才能出结果。因为f(50)=f(49)+f(48)，而其中f(49)
2020-09-26 15:07:09
2455
4
原创 前端处理较大数据量防止页面卡死的方法
假设后台一下返回1000条数据，如果我们一次性把它放到页面上，那肯定会造成页面卡顿的，优化思路就是，把列表分割成很多个小数组，然后一段一段的显示到页面。可利用 Api:window.requestAnimationFrame或者setInterval不断填充数据；window.requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行；// d..
2020-05-21 21:15:27
27672
2
原创 js实现定点缩放元素
这里的关键一点在于，比如，当元素宽度放大0.1倍时，如何计算元素的left值来保证鼠标相对元素位置不变？代码：// 为了方便用了jqueryexport default function(el) { function zoom(e) { e.preventDefault(); // 获取鼠标所在位置 let { clientX, clientY }...
2019-11-29 20:34:03
1652
原创 vue实现简单的前端分页功能
思路：假设每页显示10条，一共100条，那么共10页，第一页显示1-10条数据，第二页显示11-20条数据...以此类推是不是有思路了代码：let productList = [];for (let i = 0; i < 99; i++) { productList.push({ name: "第" + i + "瓶奶酪", c...
2018-11-16 15:39:41
19791
33
原创 vue实现简单的分页功能
分页其实就是对一组数据分组！而vue又刚好是数据驱动，所以我们只需要关注数据层就行了！分页开始--->变量： data() { return { // 假设这是后台传来的数据来源 data: [], // 所有页面的数据 totalPage: [], // 每页显示数量 pageSize: 5,...
2018-09-15 16:09:54
56005
25
原创 两种实现点击'对话框'以外的区域，'对话框'消失的方法。
html:<div class="wrap"> <div class="content"> </div></div>第一种思路：当前点击的对象不是对话框本身，则让对话框消失var wrap = document.getElementsByClassName('wrap')[0];var conten...
2018-08-20 18:03:14
2052
原创 按需加载图片、html代码、js代码，前端页面性能优化
加载一个比较长的页面，或者图片比较多的页面，如果把资源一次性全部加载，在网络不是很好的情况下可能造成页面留白现象，用户体验极差！因此呢，我们可以把用户暂时不会看到或用到的资源先不加载，在某个条件下，如鼠标点击、滚动条高度到某一位置，窗口大小改变等等，按需加载资源！1.按需加载图片 用data-src设置个无效图片地址，滚动条快滚动到图片要显示时，把真正要显示的图片替换回来（...
2018-08-03 14:42:04
3096
原创 vscode jsx语法自动补全html闭合标签
<div>标签头要自己敲，敲级累呀~</div>初学react想必都经历过这个，感觉很不爽吧，还好，神通广大的vscode可能会让你受累，但绝对不会让你失望！想要让在jsx实现自动补全闭合标签，现在只需一步：文件--首选项--设置--用户设置，输入emmet.includeLanguages搜索，点击圈住的地方，编辑settings.json在用户设置添...
2018-08-01 11:00:39
12483
1
原创 一看就懂：自定义checkbox的样式（更改input表单控件的自定义样式）
默认的checkbox可能不能满足UI需求，而默认的样式是不能直接修改的，那该如何修改呢？在改样式之前我们建议先了解<label>标签属性。我们发现，可以通过label来操控关联的表单控件，于是，我们的思路是：把input的样式隐藏起来，通过设计label的样式（也就是input的样式）然后通过定位用label覆盖input,这样功能和样式都是一致的。这里我们以ch...
2018-07-24 16:29:14
19205
原创 利用express(nodejs)实现的前后端分离
首先确保你安装了nodejs，安装教程和利用vue-cli初始化一个项目在这就不娓娓道来了。（这里用vue-cli构建的项目，如果不是，只需要在客户端更换成其他请求数据的方法就好了）一.现在是上午10点，精神很饱满，我们先来搭建一下服务端吧！1>>在你的项目下新建一个server的文件夹，新建index.js和user.json,一个搭建服务器，一个用来存要返回客户端的js...
2018-07-10 10:48:22
14754
4
原创 一些ps技巧
一，图层切图：(这车开的有点稳，但注意跟上节奏)1.左上角：文件-打开 你要处理的图 。注意，打开psd文件会有提示，如果用图层抠图的话，则保留图层，不然选择拼合。2.选择右上角这个"移动选择工具"(这个工具还可以随意移动目标O),然后点击目标，这时软件右下角边图层那里，会自动定位到你点击的图层。3.点击那只眼睛，锁定的目标消失了，则说明是当前选择的图层。（我们不要的图层都可以用...
2018-06-20 16:33:10
1861
1
原创 $(window).scroll()无法触发滚动条事件的问题
滚动条事件很常见。但有的时候竟会无法触发这个事件，真的让人有点捉急！首先我们看，$(window).scroll()，是window的滚动，window代表的是当前窗口,但是如果我们把html和body设置了width：100%；height：100%；则无法$（window）.scroll的滚动条事件。解决办法是，把window换成你页面的其他元素,比如一个网页的容器，如clas...
2018-06-12 15:07:56
12641
3
原创 解决轮播图图片大小不一的问题！
要把大小不一样的图片做成整齐排列的轮播，如果直接固定宽高会把图片伸缩变形的，不固定又会让图片不整齐，用ps截图截成一样的大小难度系数略高。看似头大的问题，现在解决，只需2步：1.假如有4张图，我们就先写4个一样大小一样的div.给div设置display：inline-block和一样的宽高。2.然后将图片作为div的背景图来显示。这样保证了呈现的每张图都是一样大的！利用ba...
2018-06-11 13:49:30
22552
1
原创 不让图片失真，使大小不一的图片整齐排列！
作为前端er,肯定碰到过将一组要将一组图标整齐排列的问题，图片一样大还好，不一样大的话，没经验还真是烦人呢。如图，排列不整齐美观。为了方便你我他，我加了边框如果粗暴的把图片设置为一样大小，那图片会失去原有比例，导致伸缩，不雅。一个一个调整也不靠谱。如何是好。其实很简单，在给4个图片外面分别加个一样大小的div，然后让图片居中就好啦。 div {border: 1px ...
2018-06-09 13:54:03
4124
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人