- 博客(212)
- 收藏
- 关注
RSS订阅原创 webpack-dev-server原理解析及其中跨域解决方法
webpack proxy ,就是 webpack 提供的解决跨域的方案。其基本行为是接受客户端发送的请求后转发给其他的服务器，目的是为了解决在开发模式下的跨域问题。
2024-01-21 16:14:25
1679
原创 跨域原理和解决方案
主要是由于浏览器的同源策略引起的，同源策略是浏览器的安全机制，当协议域名端口三者有一个不同，浏览器就禁止访问资源。比如：http://www.company.com:80http://www.company.com:80/dir/page.html ----成功http://www.child.a.com/test/index.html ----失败，域名不同https://www.a.com/test/index.html ----失败，协议不同。
2024-01-19 11:03:25
840
原创 数字证书和数字签名
数字签名是一种加密技术，用于验证数字文档的完整性、真实性和身份。它使用了公钥密码学的原理和技术，以及哈希函数来实现。数字签名基于公钥密码学的原理，使用了非对称密钥加密算法。它使用了两个密钥：私钥（私有密钥）和公钥（公共密钥）。私钥只有文档的签名者（CA机构）拥有，并且必须保密保存。公钥可以被任何人访问。签名通过使用公钥密码学和哈希函数的组合，实现了对数字文档的完整性、真实性和身份的验证。其它：私钥，公钥，数字签名的区别。
2024-01-18 11:48:56
951
原创 webpack 中，filename 和 chunkFilename 的区别
webpack 中，filename 和 chunkFilename 的区别
2023-11-18 16:16:05
631
原创 常见的内存泄漏场景
console导致的内存泄漏 因为打印后的对象需要支持在控制台上查看，所以传递给console.log方法的对象是不能被垃圾回收的。乍一看好像写的还不错，有及时移除监听器，对resize这种频繁触发的事件也加了debounce处理。Tips：在记录第一个堆快照之前你可以先做一些“预热”操作，避免一些懒加载和缓存策略影响到了对内存的分析。尽管大部分同学都会有主动移除监听器的观念，但如果姿势不对，可能依旧会造成内存泄漏。方法传入的回调函数已经不是同一个回调函数，监听器没有被正确移除，内存泄漏。
2023-05-31 09:40:48
504
原创 排查Javascript内存泄漏案例(一)
Chrome DevTools里的Performance面板和Memory面板可以用来定位内存问题。但当你真正上手使用它们的时候，往往会觉得不知所措 —— 因为里面有着各种各样的选项和功能，让人眼花缭乱。下面我会通过一些常见的FAQ来带大家一起学习怎么用工具定位javascript里的内存问题。
2023-05-30 16:43:47
1051
原创 Node中间件 http-proxy-middleware 代理跨域
http-proxy-middleware 代理跨域的简单用法，平常 vue/react 项目配置 webpack-dev-server 的时候也是通过 Node proxy 代理的方式来解决的。
2022-10-30 14:35:41
1749
原创 vue中的响应式数据和副作用函数
理解vue中的响应式原理，不懂不要怕，怕的是不想学习，探索源码从里面学习更多的源码设计思路和新的规范，让我们在职业生涯中走的更远。
2022-10-28 10:31:16
764
原创 vue3的设计思路（4）模板的工作原理
Vue.js 的模板会被一个叫作编译器的程序编译为渲染函数，编译器、渲染器都是 Vue.js 的核心组成部分，它们共同构成一个有机的整体，不同模块之间互相配合，进一步提升框架性能。
2022-10-26 16:26:46
357
原创 vue3的设计思路（3）组件的本质
组件的本质：组件其实就是一组虚拟 DOM 元素的封装，它可以是一个返回虚拟 DOM 的函数，也可以是一个对象，但这个对象下必须要有一个函数用来产出组件要渲染的虚拟 DOM。渲染器在渲染组件时，会先获取组件要渲染的内容，即执行组件的渲染函数并得到其返回值，我们称之为 subtree，最后再递归地调用渲染器将 subtree 渲染出来即可。
2022-10-25 22:33:07
581
原创 vue3的设计思路（1）声明式地描述 UI
Vue.js 3 是一个声明式的 UI 框架，意思是说用户在使用 Vue.js 3 开发页面时是声明式地描述 UI 的。思考一下，如果让你设计一个声明式的 UI 框架，你会怎么设计呢？
2022-10-25 20:47:22
685
原创 读懂vue源码必懂什么叫运行时和编译时
了解运行时和编译时的相关知识，了解纯运行时、纯编译时以及两者都支持的框架各有什么特点，并总结出Vue.js 3 是一个编译时 + 运行时的框架，它在保持灵活性的基础上，还能够通过编译手段分析用户提供的内容，从而进一步提升更新性能。
2022-10-25 17:18:38
1783
原创 虚拟DOM的性能测算
往往在比较虚拟DOM的性能时只是理论上的，这里我们从实际操作上去对比虚拟DOM和innerHTML在更新节点上的差异性。从生成DOM的每个阶段去量化为什么虚拟DOM能够胜出。
2022-10-25 15:47:13
398
原创 命令式和声明式相关知识
我们在框架设计上要做出的关于可维护性与性能之间的权衡。在采用声明式提升可维护性的同时，性能就会有一定的损失，而框架设计者要做的就是：在保持可维护性的同时让性能损失最小化。
2022-10-24 22:26:13
758
原创 innerHTML和creatElement创建元素的区别
innerHTML与createElement创建dom元素的区别：可以从innerHTML是采用字符串拼接还是数组形式拼接和其结构来说
2022-10-24 22:01:18
353
原创 建立HTTP请求
我时常在想40岁了我还能做什么，我还能给社会带来哪些价值，会还有老板需要我么，在时光面前大家都是公平的也是残酷的，时代永远在变，唯有不变的是要继续学习才能在将来有更多的机会。
2022-10-20 21:45:19
1494
原创 Node的异步I/O
事件循环、观察者、请求对象、I/O线程池这四者共同构成了Node异步I/O模型的基本要素。Node自身的执行模型——事件循环。
2022-10-10 18:44:23
194
原创 异步I/O与非阻塞I/O
异步I/O在Node中应用最为广泛，但是它并非Node的原创。如同Brendan Eich援引18世纪英国文学家约翰逊所说，“它的优秀之处并非原创，它的原创之处并不优秀”，以之评价他自己创造的JavaScript一样，Node的优秀之处也并非原创。下面我们看看操作系统对异步I/O实现的支持状况。
2022-10-09 17:30:32
743
原创 webpack的优化配置（四）——webpack的资源持久化缓存
利用webpack对我们的网络资源进行持久化的缓存，利用缓存可以提高用户度对我们网页再次访问时的体验，加快网页的加载速度。当项目上线时更新部署到服务器，资源的更新是有时间间隔的，也就是有先有后，此时用户去访问我们的资源的话就很容易出现问题。比如用户在这个时间间隔去访问时他那到的可能是最新的HTML，但是相关的资源却没有拿到，那浏览器很可能用的还是缓存的css和js，那用户访问最新的HTML和旧的代码逻辑及样式网站就无法正常访问到，所以管理好缓存很重要，不然很容易出现程序员常说的，这个项目在我电脑上访问挺好
2021-03-11 15:11:55
354
原创 webpack的优化配置（三）——webpack的资源压缩
Terser压缩jsmini-css-extract-plugin提取css，比如我们在react中写css，可能会把样式以对象的方式插在结构代码中，这个插件可以帮助把css提取出来到单独的css文件中，将打包后的css和js进行拆分。拆分前没有提取css：拆分后提取css到单独的文件：optimize-css-assets-webpack-plugin压缩css接着对提取的css进行压缩优化HtmlWebpackPlugin-minify压缩HTMLHtmlWebp..
2021-03-11 11:52:13
382
原创 webpack的优化配置（二）——webpack代码拆分
对于大型的webpack而言，如果把所有的东西都放在一个文件中打成一个包，这是十分低效的，也是不可接受的。webpack在默认情况下会把所有的文件都打包成一个文件（也就是一个包），代码拆分要做的就是把单个bundle文件拆分成若干个小bundles/chunks，这样可以缩短首屏的加载时间。手动定义多个入口splitChunks提取公有代码，拆分业务代码与第三方库将公有代码，业务代码和第三方库进行拆分是一个更有效的方式，业务代码随着需求的改动会有改动，但是第三方库我们几乎是不改变的，这样进行拆分后
2021-03-11 10:32:14
983
原创 webpack的优化配置（一）
webpack通过配置loader和plugin可以帮我们做很多不同的工作，但是比较头疼的是，记住很多的loader和plugin并不方便，所以webpack4之后就引入了新的概念，就是mode模式，通过配置官网约定的两个模式：开发模式和生产模式，这两个模式分别有默认配置好的插件供我们使用，我们不需要再为配置而发愁（convention over configuration也就是约定大于配置），如果模式中有些细微的东西在项目中不太合适，也可以overwrite重写里面的配置，但我们不需要大规模的从头到尾自己
2021-03-11 07:10:09
344
原创 前端性能指标和优化目标——高频事件处理函数，防抖
有些事件触发频率非常的高，甚至超过帧的刷新速率，比如pc端的滚动事件，鼠标移动事件，移动端的touch事件，这些事件在一帧内会触发非常多次，会导致我们在一帧内对这些事件进行多次响应， 这些事件的处理函数如果消耗比较高，那在一帧内任务就会比较重，但实际上在一帧内这些任务是没有必要处理多次的，比如滚动我们并不关系中间的过程，我只关心最后滚动到了哪里，之前多出来的那些滚动会造成额外的任务量，如果无法保证一帧在16ms内完成了，没有办法在16ms内完成就会造成页面卡顿，也就是页面抖动。一帧的生命周期（life o
2021-03-08 14:40:55
552
原创 前端性能指标和优化目标——复合线程(compositor thread)与图层(layer)
复合是关键渲染路径中的最后一步，浏览器为了提高渲染的效率才有了复合，复合就是把页面拆解成不同的图层（类似Photoshop），当页面发生视觉变化时，可能只是影响了某一个图层其它图层不需要受到影响，此时我们可以把需要变化的元素单独创建一个图层。复合线程主要做了以下几点：将页面拆分多个图层进行绘制再进行复合，默认情况下如何拆分图层是由浏览器决定的，浏览器会根据规则来判断是否将页面拆分成多个图层以及把哪些元素拆分成单独的图层，它主要分析元素相互之间的影响，如果某个元素对其它元素影响非常的多，那这个元素就会被单独
2021-03-07 18:08:58
961
原创 前端性能指标和优化目标——布局(layout) 与绘制(paint)
常用的性能测量API利用性能测量工具可以去模拟用户的使用场景进行性能分析和评估。这些有时候还不够，这就需要通过动态的测量，借助web提供的标准的api。web标准API：关键时间节点（Navigation Timing , Resource Timing）网络状态（Network API）客户端服务端协商（HTTP Client Hints）& 网页显示状态（UI API）现代浏览器网页渲染原理，关键渲染路径（critical rendering path），...
2021-03-06 16:22:51
2204
原创 前端性能指标和优化目标
profiling就是性能分析的意思在性能评测中往往不要勾选Disabled cache，因为我们也要关系用户第二次访问页面时缓存有没有生效，这些缓存会帮助用户再次访问页面时提高访问的速度。Throttling网络吞吐自定义调整网络状态，模拟用户网络的情况，比如模拟4G，4G下载的速率大概在5M到12M左右，上传的速度大概在2M到5M。加载瀑布图资源首先经过排队才能从浏览器发出去，浏览器会对资源请求进行优先级的安排，它会把高优先级的资源先进行请求；每个资源会有一个域名，这个域名会被转换.
2021-03-05 18:05:06
578
1
原创 webpackShimming 预置依赖
为什么需要Shimming 预置依赖webpack compiler 能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些 third party(第三方库) 可能会引用一些全局依赖（例如 jQuery 中的 $）；或者有些 library 也可能会创建一些需要导出的全局变量.这些 “broken modules(不符合规范的模块)” 就是 shimming(预置依赖) 发挥作用的地方。shim 另外一个极其有用的使用场景就是：希望 polyfill 扩展浏览器
2021-03-03 14:17:19
230
原创 webpack缓存
使用 webpack 打包模块化后的应用程序，webpack 会生成一个可部署的 /dist 目录，然后把打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，所以浏览器使用 缓存 的技术来降低网络流量，使网站加载速度更快。然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码时，就会显得很
2021-02-04 15:47:48
742
1
原创 webpack代码分离
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。常用的代码分离方法有三种：入口起点：使用 entry 配置手动地分离代码。防止重复：使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离 chunk。动态导入：通过模块的内联函数调用来分离代码。入口起点这是迄今为止最
2021-02-03 17:30:40
381
原创 webpack中的开发环境
使用 source map当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向bundle.js。但我们需要知道错误来自哪个源文件中的具体位置，所以这种提示通常不会提供太多帮助。为了更容易地追踪 error 和 warning，JavaScript 提供了 source m
2021-01-31 14:01:26
187
原创 webpack中引入资源
引入图片资源用webpack内置的 Asset Modules 就可以轻松添加图片资源到我们的项目中，不需要再另外安装loader。webpack.config.js添加配置：// using the built-in Asset Modules of webpack to incorporate our images { test: /\.(png|svg|jpg|jpeg|gif)/i, type: 'asset/resource' },
2021-01-30 16:48:14
698
原创 webpack集成TS（typescript）
在webpack搭建的项目中引入ts文件，文档中仅提到了引入ts-loader，然后webpack.config.js中配置{ test: /\.ts$/, use: 'ts-loader' }，这样会报以下错误：还需要安装TypeScript编译器 ： npm install -D typescript，编译还是会报错：接着添加tsconfig.json文件 ：{ "compilerOptions": { "allowSyntheticDefaultImports":
2021-01-28 15:01:36
1580
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人