鱼与前端🐟

前言这是一道非常非常经典的面试题，但涉及到的内容非常的广，接下来从小到大逐步分析他所包含的内容 详细版 在浏览器地址栏输入 url(这里可能会问 url 的长度最长是多少，状态码，编码方式，) 浏览器查看缓存，如果请求资源在缓存中且新鲜，则跳到转码步骤(这里考缓存的形式，新鲜度的计算，缓存的头字段，缓存策略)2.1 如果资源未缓存，发起新请求2.2 如果已缓存，检测是否足够新鲜，足够新鲜提供给客户端，否则与服务器进行验证。 解析 url 获取协议 端口 主机 path(这里可能会考 https 协议 端口看协议 主机可能和主机托管相关) 浏览器组装一个 HTTP 请求报文(当然这个不一定是 get 请求，所以可能考各种请求方式，如果是 2 的话还要考流的运输组装) 浏览器获取主机 ip 地址 过程如下5.1 浏览器本地缓存5.2 本机缓存5.3 hosts 文件(考 host 的话可能考 linux 里面的 host 路径和 windows 下的 host 路径 其实改 host 能解决 github 被墙的原因也是来自于此)5.4 路由器缓存(这个不了解)5.5 ISP DNS 缓 ...

前言之前对正则的理解一直是半懂不懂，现在和houdunren学一波正则。本篇是js正则相关的案例与细节学习笔记 十分建议配套quokka使用,是vscode一个显示代码实时结果的一个插件,非常方便. 学习笔记GitHub仓库:传送门 取出数字123456789// 取出数字// case: jojo123jojo321// 正常写法：let test = "jojo123jojo321";let num = [...test].filter(n=>!Number.isNaN(parseInt(n)));console.log(num.join(''))// 正则写法console.log(test.match(/\d/g).join('')) 字面量创建正则/存放变量1234567//字面量创建正则let test = "jojo123jojo321";console.log(/o/.test(test))//字面量中放变量let useO = 'o';console.log(e ...

前言其实有时候学习八股并非是一件不好的事情，我们能从八股文里面学到很多平时自己没注意到的知识点，算是查漏补缺 jsjs 有多少种数据类型7+1 USONB undefined string symbol object null number boolean bigint 栈和堆的概念 什么是堆空间共享 如何改变引用地址栈中存放基本数据类型，栈内的数据大小固定，体积较小，会被频繁使用，拷贝或者引用的时候会创建一份相同的复制 堆存放引用类型，堆内的数据大小不定，占据空间大。当一个引用类型被创建的时候，其属性会被放在堆空间中，指针放在栈中，当被引用的时候，先从栈找到对应的指针，指向堆空间的地址，获取属性。 堆空间共享指的是 多个引用指向同一个地址。 引用地址可以使用 bind call apply 去改变。 栈和堆的存在是为了维持 js 的内存平衡 闭包是怎么存储的闭包被创建的时候，会创建一个 closure 对象到堆中，用于保存闭包中的变量，这就是为什么闭包可以常驻在内存的原因。且会导致内存泄漏。 什么是内存泄漏内存泄漏指的是堆内存中的变量由于某种原因无法及时释放造成系统资源的浪费，甚至 ...

前言记录 js 输出问题过程和知识点解答 1 暂时性死区和变量提升输出是什么？ 12345678function sayHi() { console.log(name); console.log(age); var name = "Lydia"; let age = 21;}sayHi(); A: Lydia 和 undefined B: Lydia 和 ReferenceError C: ReferenceError 和 21 D: undefined 和 ReferenceError 答案 D let，const 声明前读取有暂时性死区，js 抛出`ReferenceError` 变量提升 `undefined`置顶 2 作用域以及事件循环输出是什么？ 1234567for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1);}for (let i = 0; i < 3; i++) { setTi ...

前言这一篇为什么要叫 vite 官方文档浓缩呢？一方面是自己不太了解 vite，想通过官方文档进行 vite 的学习。一方面是靠自己的理解处理一下文档的细节。话不多说，开刷 前置知识：CJS/ESM，HMR，ESM 的引入方式，FOUC 为什么选 ViteVite 诞生的背景是大型应用中 webpack 构建速度变慢，需要很久才能开启服务器，即使通过 HMR 也需要很久浏览器才能反馈出内容。以上都是基于打包的学说，而 Vite 诞生的原因则是浏览器开始逐步支持 JS 模块，他使用非打包的方式构建，以冷启动的方式启动，因此构建速度上面极大快于前者。 冷启动Vite 先将应用中的模块分为依赖和源码两类，改进服务器启动时间。 依赖：依赖大多数为开发不会变动的纯 js。一些比较大的依赖(比如组件库)处理的成本也很高，依赖通常有多种模块化的格式(eg:CJS/ESM) Vite 在依赖处理这方面使用的是 esbuild，由 go 语言编写，比 js 编写的打包器预构建快 10-100 倍 源码：源码通常包含一些非 js 文件，比如 css，jsx 或者 vue/svelte 组件，特点是 ...

前言本文将简述前端通过不打包的方式将代码运行在浏览器上的几种方式 原理与浏览器中的 ESM当下，主流浏览器已经逐步支持 js 原生模块的导入，出现了很多 bundless 的构建方案，比如 vite，snowpack 等。原理就是利用浏览器对于原生 esm 的支持，进行代码的开发和部署。 Native Import: import from URL通过script[type=module]，可以直接在浏览器中使用原生 ESM，使得前端不打包成为可能 123<script type="module"> import lodash from "http://cdn.skypack.dev/lodash";</script> 由于前端运行在浏览器中，所以他也只能从 URL 中引入 package 绝对路径：http://cdn.skypack.dev/lodash 相对路径：./lib.js 现在打开浏览器控制台，把下面的代码粘贴在控制台中，就可以调试 loadash 了。 123> lodash = await ...

前言本篇讲述 webpack 打包体积优化的思路和方向 如何分析打包体积做过第三方依赖 CDN 引入的话，应该都了解到需要使用webpack-bundle-analyzer分析打包后的体积。 原理就是 webpack 打包后 Stats 数据进行分析。在 webpack compiler 的 done hook 进行处理。见源码； 1compiler.hooks.done.tapAsync("webpack-bundle-analyzer", (stats) => {}); stats数据：一个json文件，包含了模块的统计信息，用cli命令生成 在默认配置下，webpack-bundle-analyzer(opens new window)将会启动服务打开一个各个 chunk 下各个 module 占用体积的可视化图。 可以通过他找到在打包体积中最大的模块并进行优化。 在查看页面有三个选项： stat：每个模块的原始体积。 parsed：每个模块经过 webpack 打包处理后的体积，比如 terser 等做了压缩，就会显示在上面。 ...

前言codetop 前一百题，review and review 3. 无重复字符的最长字串主要介绍基本语法老题新做利用 includes api 的特性以及循环弹出顶层的特性，将每个元素 push 进来后下一轮比对是否存在，存在则弹出。 123456789101112var lengthOfLongestSubstring = function (s) { let arr = []; let max = 0; for (const str of s) { while (arr.includes(str)) { arr.shift(); } arr.push(str); if (max < arr.length) max = arr.length; } return max;}; 88. 合并两个有序数组主要介绍基本语法思路：从后往前对比插入，大的数字优先插入末尾。但需要注意的是某一方提前结束的情况发生，此时如果一方提前结束了，终止判断直接用后一方直到后一方数字完全用完(j& ...

前言在前端工程化这块，打包肯定是大家初次入门的时候会接触到的玩意，最常见的一个例子就是第三方资源 CDN 外部引入。在网上各路教程中都说明他是减少了项目体积，实则不然，下面详细讲述前端打包的方案 模块化方案对于模块化，cjs，es，umd 模块你知道吗？ cjs首先是 cjs，全称 Commonjs，是 node 中的模块规范，通过 require 及 export 进行导入导出，进一步延申的化，module.export属于 commonjs2. 因为他属于 node 的模块，也就是意味着他只能在 node 环境中，也就是不能直接用在浏览器之上。如果你的前端项目需要用到以 cjs 规范写的模块，那么就会出问题(比如 cdn 加载)。 12345// sum.jsexports.sum = (x, y) => x + y;// index.jsconst { sum } = require("./sum.js"); 解决方法是 webpack 的 enhanced-resolve，webpack 是通过引入这个库来解析模块的，他相当于增 ...

前言好久好久没写博客了，人一旦停止记录，就会感觉学习没有积累。虽然相应的有更多时间去coding，不过记录一下才更不容易忘记。 展示效果 起因其实对particle熟悉的话，就知道这个和他基本上是一样的效果，为什么不直接用particle呢？首先是因为nuxt3开发不知道怎么使用这个插件，只好网上cv一个然后改成对应的vue代码，不过改代码也是一件慢慢进步的事情。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 ...