前端

前端开发相关笔记,包括一些开发经验和代码。

细说Javascript中的ESM及其与CommonJS区别

esm是什么 esm 是将 javascript 程序拆分成多个单独模块,并能按需导入的标准。和webpack,babel不同的是,esm 是 javascript 的标准功能,在浏览器端和 nodejs 中都已得到实现。使用 esm 的好处是浏览器可以最优化加载模块,比使用库更有效率 esm 标准通过import, export语法实现模块变量的导入和导出 esm 模块的特点 ...

什么是pnpm以及pnpm的安装与使用

pnpm是 Node.js 的替代包管理器。它是 npm 的直接替代品,但速度更快、效率更高。当您安装软件包时,我们会将其保存在您机器上的全局存储中,然后我们会从中创建一个硬链接,而不是进行复制。对于模块的每个版本,磁盘上只保留一个副本。

Typescript 中的 interface 和 type 区别

interface 和 type在官方规范中所描述的区别: An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot. An interface can have multiple merged declarations, but a type alias for an object type literal cannot. 翻译如下: 接口可以在extends或im...

js经典易错合集(一)

1.函数的this指向 var length = 10 function fn(){ console.log(this.length) } fn() //10 //函数的this指向调用者,这里调用者为window //var声明的变量会挂载到window上 var obj={ length:2, show:function(f){ this.length=5 f() arguments[0]() }, show2:(f)=>{ this...

一文吃透浏览器渲染基本原理

大多数设备的刷新频率是60Hz,也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间,页面的渲染就会出现卡顿现象,影响用户体验。前端的用户体验给了前端直观的印象,因此对B/S架构的开发人员来说,熟悉浏览器的内部执行原理显得尤为重要…

网站动态换肤

各位如果为自己的网站动态的换肤是怎么操作的? 一般动态更新<style>标签内的样式字符串,使用CSS变量实现全局控制。<style>标签中只传入变量,在具体的样式中使用var(--aaa)引入。 今天看到一个挺好的方法,到时可以试试。 这个方法是借助rel属性的alternate值(候补属性)实现。 <link href="reset.cs...

DOM之事件定义-Event类

Event 什么是Event?就是表示在DOM中发生的事件。 我们知道事件可以被用户的鼠标点击的类似操作给触发,也可以通过程序的HTMLElement.click()类似的方式来触发。当然,我们也可以定义事件,然后通过EventTarget.dispatchEvent()来触发。 要创建一个事件,首先可以根据Event构造函数来创建一个事件。 var event = new Eve...

Vue重点知识总结—vue-router

1.vue-router导航守卫(生命周期钩子) 导航守卫主要⽤来对路由的跳转进⾏监控,控制它的跳转或取消,路由守卫有全局的, 单个路由独享的, 或者组件级的。 导航钩⼦有3个参数 to:即将要进⼊的⽬标路由对象; from:当前导航即将要离开的路由对象; next:调⽤该⽅法后,才能进⼊下⼀个钩⼦函数(afterEach)。 具体有...

SPA单页面应用和SSR服务端渲染对比

1.什么是单页面应用(SPA)? 整个web项目只有一个页面,使用路由机制进行组件之间的切换。 优点:客户端渲染、数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离。 缺点:首屏加载慢、对SEO不友好,不利于搜索引擎收录和排名。 2.什么是服务端渲染(SSR)? 将组件或页面通过服务器端生成HTML字符串,...

js事件循环机制总结

js是一门单线程语言,但却能优雅地处理异步程序,在于js的事件循环机制。 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程,其中浏览器渲染进程(浏览器内核)属于浏览器多进程中的一种,主要负责页面渲染,脚本执行,事件处理等 其包含的线程有:GUI 渲染线程(负责渲染页面,解析 HTML,CSS 、构造 DOM ...

加载中...