2022年1月9日
前端性能优化-资源优化
摘要： 资源优化方向压缩和合并，目的是减少http请求数量、减少请求资源大小。 css、JS文件合并原则： 1、若干小文件可以尝试合并 2、无冲突，服务相同模块 3、不是为了优化合并而合并，按需合并，让用户更早看到和使用功能为主。 图片优化方案： 1、选择合适格式的图片，了解jpg、png、svg、webp 阅读全文
posted @ 2022-01-09 13:40 火星_PGY 阅读(96) 评论(0) 推荐(0)
前端性能优化-代码优化
摘要： JS的开销在哪里：加载、解析编译、执行 下图是谷歌演讲展示JS和图片之间的性能对比，相同大小的文件JS开销明显要比图片大的多： 加载优化方案： 1、Code splitting 代码拆分，按需加载 2、Tree shaking 代码减重 3、代码压缩 解析编译执行优化方案，主要是减少主线程工作量： 阅读全文
posted @ 2022-01-09 11:51 火星_PGY 阅读(367) 评论(0) 推荐(0)
前端性能优化-渲染优化
摘要： 一、现代浏览器网页渲染原理——关键渲染路径（critical rendering path） 这个过程无论首次加载还是后续操作都会经历这样的过程。 浏览器渲染页面过程： 1、浏览器构建对象模型： （1）构建DOM对象：HTML=>DOM （2）构建CSSOM对象：CSS=>CSSOM 2、浏览器构建 阅读全文
posted @ 2022-01-09 10:54 火星_PGY 阅读(343) 评论(0) 推荐(0)
2022年1月8日
前端性能优化-指标和工具
摘要： 一、性能是Web网站和应用的支柱 优化主要体现在流量、搜索、转换率、用户体验。 据Amazon亚马逊的发现，每100ms延迟会导致1%的销量损失。 移动端用户更缺少耐心，大于3秒加载导致53%的跳出率。 二、性能优化的标准和指标 RAIL测量模型： Response响应，这里是指网页给用户的响应，如 阅读全文
posted @ 2022-01-08 22:36 火星_PGY 阅读(369) 评论(0) 推荐(0)
2021年11月14日
如何设计自研微前端框架
摘要： 1、主应用 注册子组件 加载、渲染子应用 路由匹配（activeWhen，rules - 交由框架判断） 获取数据（公用依赖，通过数据做鉴权处理） 通信（父子通信，子父通信） 2、子应用的功能 渲染 监听通信（主应用传递过来的数据） 3、微前端框架 子应用的注册 有开始内容（应用加载完成） 路由更新 阅读全文
posted @ 2021-11-14 09:15 火星_PGY 阅读(220) 评论(0) 推荐(0)
微前端实现方式对比
摘要： 一、Iframe 优势： 1、技术成熟 2、支持页面嵌入 3、天然支持运行沙箱隔离，独立运行 劣势： 1、页面之间可以是不同域名 2、需要对应的设计一套应用通讯机制，如何监听、传参格式等内容 3、应用加载、渲染、缓存等体系的实现 二、web component 优势： 1、支持自定义元素 2、支持s 阅读全文
posted @ 2021-11-14 08:51 火星_PGY 阅读(327) 评论(0) 推荐(0)
2021年11月13日
软件设计原则
摘要： 架构设计六大原则： 单一职责、开放封闭、里氏替换、最少知识、接口隔离、依赖倒置 将以上六大原则的英文首字母拼在一起就是SOLID（稳定的），所以也称为SOLID原则。 一、单一职责原则 永远不应该有多于一个原因来改变某个类。 理解：对于一个类而言，应该仅有一个引起它变化的原因。 二、开放封闭原则 软 阅读全文
posted @ 2021-11-13 19:10 火星_PGY 阅读(167) 评论(0) 推荐(0)
2021年6月28日
前端面试题整理——手写防抖和节流
摘要： 防抖debounce： 防抖是在定义N的时间范围内，如果没有触发事件则执行，如果触发了时间重置进行下一轮判断。 使用场景例如一个输入框有搜索功能，当键盘输入停止了一段时间，判定用户结束或暂停输入，然后再进行接口搜索，避免每次输入都进行一次接口调用。 手写防抖函数： <input type="text 阅读全文
posted @ 2021-06-28 21:39 火星_PGY 阅读(244) 评论(0) 推荐(0)
2021年6月6日
前端面试题整理——VUE相关题目与回答
摘要： 1、v-if与v-show的区别？ v-if的原理是根据判断条件来动态的进行增删DOM元素， v-show是根据判断条件来动态的进行显示和隐藏元素，频繁的进行增删DOM操作会影响页面加载速度和性能所以此时使用v-show更合理。 只有v-if能和v-else连用进行分支判断，v-show是不能和v- 阅读全文
posted @ 2021-06-06 17:29 火星_PGY 阅读(526) 评论(0) 推荐(0)
2021年6月1日
Vue3生命周期的理解
摘要： beforeCreate()：在实例生成之前 created()：在实例生成之后 beforeMount()：在模板已经被编译成函数之后，组件内容被渲染到页面之前 mounted()：在组件内容被渲染到页面之后 beforeUpdate()：当data中的数据发生变化时 updated()：当dat 阅读全文
posted @ 2021-06-01 20:53 火星_PGY 阅读(197) 评论(0) 推荐(0)