Larmy Blog

遇到一个问题，在使用element ui的多选框组件el-checkbox-group和el-checkbox的时候出现了无法选中选项的事情 1234<el-checkbox-group v-model="checkList" :min="less" :max="most"> <el-checkbox v-for="(item,index) in listDate.options" :key="index" :label="item"> </el-checkbox></el-checkbox-group> 其中，listDate是通过父组件传递过来的值，因为我要实现的是可以控制多选框组最多和最少的选项，按照el-checkbox-group要求，checkList是数组，如果不绑定min和max是可以选中的，但是反正就会出现复选框选不中的情况。 查看别人的资料和官 ...

最近学了canvas，写个小实例来巩固一下知识点上一下效果图：运用到的函数（具体使用方法可以自行搜索相关文档） moveTo() lineTo() arc() quadraticCurveTo() bezierCurveTo() beginPath() fillStyle stroke() fill() 代码内容：1.绘画头部先利用arc()，画出外部的圆，再利用二次贝塞尔曲线画出面部轮廓效果图：（白色多出的部分没关系，因为还要画项圈）代码： 123456789101112131415161718cxt.beginPath();//起始路径 cxt.lineWidth = 1;//线宽度为1 cxt.strokeStyle = '#000';//笔触的颜色 cxt.arc(200,200,140,Math.PI*0.3,Math.PI*0.7,1); cxt.fillStyle = '#0bb0da'; cxt.fill(); cxt.stroke(); cxt.beginPath ...

前端性能优化：细说浏览器渲染的重排与重绘前端性能优化因为涉及到计算机网络、数据算法、图形图像处理、浏览器渲染等多方面计算机知识，常作为前端工程师乐此不疲的技术讨论话题，也正因如此，它也是面试时容易被问及的面试题之一。 缘起 本篇文章缘起一次偶然的面试问答所引申出的思考整理，着笔于浏览器渲染的角度，探讨前端性能优化的思路和实践建议，当然，浏览器渲染是一个复杂的过程，本文笔者将围绕重排和重绘两个关键词开始行文。 目录结构 文章大致行文思路如下： URL从输入到页面展示的过程 DOM和JavaScript的关系 为什么操作DOM会很“慢” 浏览器解析HTML的过程 重排 重绘 优化方案 URL从输入到页面展示的过程 在探讨浏览器解析html之前，先了解url从输入到最后页面渲染的过程是一个很有必要的步骤，它可以帮助我们把握整体流程，让我们在了解HTML解析细节之前知道它处于整个请求周期中的哪一阶段，这对我们构建完善知识图谱很有帮助。 首先，我们假设输入的url的请求为最简单的Http请求，以GET请求为例，大致分以下几个步骤： 用户在浏览器的地址栏输入访问的URL地址。浏览器会先根 ...

方法一： 打开一篇禁止粘贴的作文 2.打开f12控制台，点击这个小按钮（我这是Google浏览器）3.把鼠标放到这个输入作文的框上，旁边的element或对应到这个textarea文本域4.右键点击这个标签，选Edit as HTML5.在两个标签内放入作文即可方法二：1.还是上面步骤一到步骤三，找到<textarea></textarea>这个标签，看它的id号，这里的id是contents2.在console控制台输入3.就可以复制粘贴了

整理一下有关原型或者原型链上常出的一些方法 1. istancenofa instanceof b用来判断a的原型链上是否有b的存在 1234567891011121314// instanceoffunction Father(){ this.sayFather = 'i am father'}function Son(){ this.saySon = 'i am son'};Son.prototype = new Father();var son = new Son();console.log(son instanceof Son) // trueconsole.log(son instanceof Father) // trueconsole.log(son instanceof Number) // falseconsole.log(son instanceof Object) // trueconsole.log(Father instanceof Object) // true 2 ...

 浏览器存储在开发过程中，有些数据我们需要多次用到，但是如果每一次需要就去和服务器请求，那么无疑会造成一定的资源浪费，所以我们可以根据业务需求，把一些数据在浏览器中存储起来，目前最常见的存储方案是： Cookie web存储(localStorage和sessionStorage) IndexedDB Cookie背景因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，所以Cookie就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。 Cookie的又称是HTTP Cookie，最初是在客户端用于存储会话信息，从底层来看，它作为HTTP协议的一种扩展实现，Cookie数据会自动在web浏览器和web服务器之间传输，因此在服务器端脚本就可以读写存储的cookie的值，因此Cookie通常用于存储一些通用 ...

浏览器控制台输出图片在浏览b站的时候打开浏览器控制台会出现b站的logo，其实他是通过一下函数玩转了ASSII-Aar ，后续有了解到可以在某些网站上可以将英文转化为ASSII-Aar 但是最近我发现了西瓜影视输出的是一张图片 其实他是输出了一张网络图片（居然还可以这样玩） 出于好奇我也想试一下 输出图片尝试在控制台输出我最爱的哆啦A梦 使用网络图片地址 1console.log("%c ", "background:url(https://inews.gtimg.com/newsapp_bt/0/11616110357/641) no-repeat ;line-height:600px;font-size:600px") 使用base64（base64代码比较大，不美观，而且打包体积会变大） 12console.log("%c ", "font-size:1200px;line-height:600px;background:url(data:image/jpg;base64,UklGRvo2AA ...

答辩整理魔方是如何建模的 这里主要使用到是three.js技术，第一步是画外形，虽然外观上看上去是一个大的正方体，但其实是做了26个小正方体拼接而成，期间会记录给一个小正方体的坐标位置，最后加上黑色边框，在浏览器上渲染出来。第二步是操控魔方视角，虽然说魔方已经在浏览器渲染出来了，但是因为无法操控空间视角，只能看到魔方的某一个面，这时候要加上three.js提供的视角控制库，我这里用的是轨道空间库，完成视角空间库的初始化，就可以观察到魔方的每一个面，整体就会出现一个3D的效果。最后一步就是监听鼠标事件，达到转动魔方的效果。 转动魔方是如何实现的 首先确定触摸点，通过监听鼠标事件操作就可以获得一个平面2D的XY坐标，然后就是通过一个平面2D坐标映射成为3D坐标的问题，这时需要引用three.js提供的Raycaster，原理就是在点击的位置和相机的位置发送一条射线，被这根射线射中的物体都被记录下来，这样就可以知道在三维空间中鼠标移过了什么物体。接下来确定转动方向，根据xyz正负轴分为六个方向，根据滑动的两点确定转动向量，然后判断转动向量和这六个方向向量夹角最小的方向即为转动方向，之后根据 ...

## 纯前端微信小程序实战最近在学习微信小程序开发，记录一下我的第一次纯前端小程序开发（无后台操作），也可以分享给还未开发过微信小程序，想找一个微信小程序的项目练习的朋友们，附上github地址：github地址https://github.com/Larmyliu/wechat_program一、先建立一个微信小程序项目要先在微信开放平台注册，拿到AppID，不拿AppID也可以开发小程序，但是有很多接口无法调用二、下载微信开发者工具三、在项目中新建小程序项目这里我就遇到了一个坑，在勾选的时候勾选了云开发，结果在里面一脸懵逼，没有后台经验的朋友不需要勾选 四、敲代码，调api 项目描述：1.是对ofo自行车的小程序模拟开发2.对页面进行简单的逻辑处理（主要还是查找微信官方api）注意：因为里面有一个要获取单车的密码和车牌号，所以前端可以直接mock假数据，通过链接访问假数据的地址，我是在eolinker上创建的假数据同时也要在微信开放平台中添加服务器域名，添加上后要在微信开发者工具内更新配置总结：具体的代码内容可以上github上下载clone，微信其实把很多组件都已经封装好了，而 ...

表单输入延迟优化问题描述在控制台埋点管理新增数据表中，可以新建大量字段名，当字段条数较少时（少于20个左右），输入延迟感并不强烈，但一次性创建条数较多时，会出现明显延迟感 （持续输入过程） 抓包分析 （抓包分析） 抓包分析后发现在输入的过程中不断的在触发Vue_render和Vue_update 优化在原代码中，根据条目数通过v-for循环生成四个el-form-item表单列表项，因为直接挂载在组件根部，所以每次添加都需要从组件根部开始深度遍历，从而导致输入延迟 解决那么解决方案就是最小化组件，最好不要在一个vue组件上直接绑定过多的数据，如果有大量数据请分多个组件绑定，减小当前组件绑定的数据量，将上述代码提取成组件 优化结果优化后输入延迟感明显降低 总结vue提倡最小化组件，当组件数据量过大时要考虑拆分组件，减小组件数据过大而导致深度递归时间过长，造成感官上延迟