摘要: 你是否有过以下一些经历? 面试中 说一下做过哪些性能优化? 从输入url到看到页面内容经历了哪些过程? 什么是web性能? 简单来说就是网站是不是够快,包括常见的一些场景的交互,网页的白屏时间,多久可进行界面的交互事件,提交表单,编辑等交互操作是否流畅,列表加载,切换页面,动画效果,上传(下载)文件 阅读全文
posted @ 2022-11-27 17:04 向日葵的花语 阅读(205) 评论(0) 推荐(0) 编辑
摘要: 一.mousedown、mousemove和mouseup 拖着目标元素在页面任意位置 如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。 1.onmousedown:鼠标按下事件2.onmousemove:鼠标移动事件3.onmouseup:鼠标抬起事件 重点: 1、一定 阅读全文
posted @ 2020-11-12 11:53 向日葵的花语 阅读(1123) 评论(0) 推荐(0) 编辑
摘要: 1.创建代理对象,通过代理对象访问属性时抛出错误 Property "${key}" does not exist const man = { name: 'jscoder', age: 22 } const pMan = new Proxy(man, { get(target, key){ if 阅读全文
posted @ 2020-10-17 17:55 向日葵的花语 阅读(300) 评论(0) 推荐(0) 编辑
摘要: 一、发布一个npm新包 第一步:进入项目根目录,初始化 npm init/yarn init 依次按提示填入包名、版本、描述、github地址、关键字、license等为npm包 这步操作完成后会生成一个package.json文件,里面的信息可在.json文件里修改 注意:如果包里引入了第三方包, 阅读全文
posted @ 2020-10-17 17:27 向日葵的花语 阅读(166) 评论(0) 推荐(0) 编辑
摘要: 1、vue.js的computed方法:处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值。用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods。 实例1:computed和method 阅读全文
posted @ 2020-06-19 11:14 向日葵的花语 阅读(678) 评论(0) 推荐(0) 编辑
摘要: 参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob 前言 如果你允许用户从你的网站上下载某些文件,那你可能会遇到 Blob 类型。为了实现上述的功能,你可以很容易从网上找到相关的示例,并根据实际需求进行适当的调整。对于部分开 阅读全文
posted @ 2020-06-10 10:26 向日葵的花语 阅读(3264) 评论(7) 推荐(2) 编辑
摘要: 0.Webpack构建流程简单说一下 Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程: 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始 阅读全文
posted @ 2020-06-06 17:46 向日葵的花语 阅读(280) 评论(0) 推荐(0) 编辑
摘要: 前言 提到前端打包,肯定提及webpack,毕竟它已经是现在流行的打包工具,对于一个前端而言,生产环境的静态资源优化,它既是面试中的高频问题,同时也最容易成为平时工作中的 OKR/KPI。如果你经常致力于优化前端打包提及,必然会对一些数字极为敏感,比如: lodash 和 react gzip 后的 阅读全文
posted @ 2020-06-06 16:42 向日葵的花语 阅读(349) 评论(0) 推荐(0) 编辑
摘要: 前言 防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者不管就容易引起浏览器卡死。 应用场景 诸如碰到resize、scroll、mouseover、setInterval、keydown/keyup/keypress的时候,事件高频触发,导致性能上的问题,造成大量的 阅读全文
posted @ 2020-05-01 14:34 向日葵的花语 阅读(284) 评论(0) 推荐(0) 编辑
摘要: 一、Flex 布局是什么? Flex是Flexible box的缩写,意为“弹性盒布局”,用来为盒状模型提供最大的灵活性,在父容器中自动扩展多列和多行。 任何一个容器都可以指定为flex布局 .mybox{ display: flex; } 行内元素也可以设置flex布局 .mybox{ displ 阅读全文
posted @ 2019-01-04 11:18 向日葵的花语 阅读(62) 评论(0) 推荐(0) 编辑