Violetks Blog

Thinking will not overcome fear but action will.

前端性能优化

一、感知性能优化让用户感觉你的网站访问很快，没有衡量标准。如果一个页面的加载时间很长，可以通过一些方式让用户觉得没有那么慢。 1、使用 loading 图标、骨架屏二、HTML 优化 1、压缩 HTML HTML 代码压缩，将注释、空格和新行从生产文件中删除。删除所有不必要的空格、注释和中断行将减少 HTML 的大小，加快网站的页面加载时间，并显著减少用户的下载时间。 2、删除不必要...

Posted by violetks on April 1, 2023

JavaScript 延迟加载的六种方式

一、概念 JavaScript 延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件，有助于提高页面加载速度。延迟脚本：带async或defer属性的script标签，以及通过document.createElement('script')创建并且没有指定script.async=false的脚本默认为异步延迟脚本（必须为非内联脚本）。一般情况下，浏览器在解析 HTML ...

Posted by violetks on March 6, 2023

原型链

一、原型（★） 1、函数中 prototype 指向原型对象当我们创建一个函数时，函数都会有一个默认属性prototype，该属性指向一个原型对象。 function fun() {} fun.prototype // 原型对象 2、对象中 __proto__ 指向原型对象（1）当函数作为普通函数进行调用时，该属性不会有任何作用。（2）当函数作为构造函数进行调用时，构建出来的实...

Posted by violetks on March 2, 2023

函数柯里化

函数柯里化（★） 1、柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数的技术。简单来说，只传递给函数一部分参数来调用它，让它返回一个函数去处理剩余的参数，这个过程就称之为柯里化。 2、一个柯里化的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值（延迟执行），而是继续返回另外一个函数，...

Posted by violetks on March 1, 2023

Vue3 基础知识（一）

官网：https://cn.vuejs.org/ 一、Vue3 带来了什么 1、性能的提升：（1）打包大小减少 41%。（2）初次渲染快 55%，更新渲染快 133%。（3）内存减少 54%。 2、源码的升级：（1）使用 Proxy 代替 defineProperty 实现响应式。（2）重写虚拟 DOM 的实现和 Tree-Shaking。 3、更好地支持 TypeScr...

Posted by violetks on January 7, 2023

Vue Router

Vue 路由配置 & 页面跳转 & 参数传递

路由重新渲染了视图，不是真正的页面跳转。注意：与 Vue2 匹配的是 Vue Router 3.x，与 Vue3 匹配的是 Vue Router 4.x。一、单页应用（SPA）与多页应用（MPA）的区别 1、多页应用有多个独立的页面的应用，每个公共资源（JS、CSS等）需选择性重新加载，多页面跳转刷新所有资源。每一次页面跳转时，服务器都会返回一个新的 HTML 文档。常用于 ...

Posted by violetks on January 6, 2023

Vuex

一、Vuex 的功能？能否进行兄弟组件之间的传值？注意：与 Vue2 匹配的是 Vuex 3，与 Vue3 匹配的是 Vuex 4。 Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。主要用于管理 Vue 中的共享状态，可以兄弟组件互相传值。上图的说明： ①Vue Compon...

Posted by violetks on January 5, 2023

Vue2 过渡&动画

Vue2 于 2023年12月31日停止维护，官网：https://v2.cn.vuejs.org/ 一、单元素/组件的过渡：使用<transition> 1、当插入或删除包含在transition组件中的元素时，Vue 将会做以下处理：（1）自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。（2）如果过渡组件提供了 Ja...

Posted by violetks on January 4, 2023

Vue2 基础知识（三）

Vue2 于 2023年12月31日停止维护，官网：https://v2.cn.vuejs.org/ 一、处理边界情况（★） 1、访问元素 & 组件（1）访问根实例：在每个new Vue实例的子组件中，其根实例可以通过$root访问。 // Vue 根实例 new Vue({ data: { foo: 1 }, computed: { bar:...

Posted by violetks on January 3, 2023

Vue2 基础知识（二）

Vue2 于 2023年12月31日停止维护，官网：https://v2.cn.vuejs.org/ 一、computed 和 watch 有什么区别？应用场景？侦听的是 data 里面的值吗？（★） 1、功能上：computed是计算属性，依赖其他的属性计算而得出最后的值，是用于定义基于数据之上的数据。watch是侦听一个值的变化并做对应的操作，允许数据变化时执行异步操作。 2、...

Posted by violetks on January 2, 2023