woyebuzhidao321的博客

着色器材质（ShaderMaterial）是一个用GLSL编写的小程序 ，在GPU上运行。它能够提供 materials 之外的效果，也可以将许多对象组合成单个Geometry或BufferGeometry以提高性能。原始着色器材质(RawShaderMaterial) 此类的工作方式与ShaderMaterial类似,不同之处在于内置的uniforms和attributes的定义不会自动添加到GLSL shader代码中。

一个前端面试的典型题。服务器数据变化如何主动告知浏览器？脚手架工具中，代码更新后，是如何通知浏览器数据变化的？WebSocket 是一种基于 TCP 连接上进行全双工通信的协议，相对于 HTTP 这种非持久的协议来说，WebSocket 是一个持久化网络通信的协议；它不仅可以实现客户端请求服务器，同时可以允许服务端主动向客户端推送数据。在 WebSocket API 中，客户端和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。一、为什么需要 WebSocket在

这款生成dmg的工具灵活度非常高，如果您想写自动化打包脚本，那么一定要考虑的一款工具，亲测好用!

这个库能够让我们在js文件中执行shell命令。shelljs做的事就是自动化，从耗时的重复性常规动作里解放出来，提升开发效率和工作心情。

什么是鸿蒙鸿蒙操作系统 (HarmonyOS、鸿蒙OS) 是一款面向全场景的分布式操作系统。其开源项目为OpenHarmony。历史2012 年，华为开始规划自有操作系统“鸿蒙”2019 年 8 月 9 日，华为在发布鸿蒙 1.02020 年 9 月 10 日，华为发布鸿蒙 2.02021 年 6 月 2 日，鸿蒙正式商用（华为正式发布 HarmonyOS 2 及多款搭载 HarmonyOS 2 的新产品）鸿蒙的三大特征超级小程序H5 只能使用浏览器的功能。

之前说到定义自定义元素行为的类一定要继承自 HTMLElement，只有继承了它才能使用元素上的属性，如。

MDN：使用 custom elements基础使用define：注册/定义自定义元素get：获取自定义元素的构造函数upgrade：define 示例-- 使用元素 --> < long-time-no-see >

开发项目的时候为什么不手写原生 JS，而是要用现如今非常流行的前端框架，原因有很多，例如：Web Components 就是为了解决“组件化”而诞生的，它是浏览器原生支持的组件化，不依赖任何库、依赖和打包工具就可以在浏览器中运行。Vue、React 的组件化并不是真正的组件化，虽然写代码时写的是确实的组件化代码，但是编译后就不再是组件化了。例如用 Vue + ElementUI 开发的应用，ElementUI 的组件都是 el 开头的，如 ，但编译后显示在页面上的就不再是 标签了。这有点类似于 CSS 预处

Serverless：云计算的下一个十年最近几年的技术圈，对于 Serverless 技术的讨论异常火热，在业内也有了很多成熟的案例，国外发展较早，比较有代表性的就是亚马逊和谷歌， 而在国内，腾讯和阿里两位巨头，都将 Serverless 定义为集团战略型项目，不遗余力的推广和研发自己的 Serverless 技术；那么，Serverless 到底是什么？为什么说 Serverless 是云计算的下一个十年？

与 setIntervall方法相比，其最大的优势是将回调函数的执行时机交由系统来决定，即如果屏幕刷新频率是 60Hz，则它的回调函数大约会每 16.7ms 执行一次，如果屏幕的刷新频率是 75Hz，则它回调函数大约会每 13.3ms执行一次，就是说 requestAnimationFrame方法的执行时机会与系统的刷l新频率同步。在前面的前端页面的生命周期课程中,介绍过关键渲染路径的概念,浏览器通过这个过程对HTML,CSS, JavaScript等资源文件进行解析,然后组织渲染出最终的页面。

接下来需要考虑的是样式表文件 style.css ,由于其属于文本文件,可能存在内容的不定期修改,又想使用强制缓存来提高重用效率,故可以考虑在样式表文件的命名中增加文件指纹或版本号(比如添加文件指纹后的样式表文件名变为了 style.51ad84f7.css ),这样当发生文件修改后,不同的文件便会有不同的文件指纹,即需要请求的文件URL不同了,因此必然会发生对资源的重新请求。以前的做法是，在同一个 TCP 连接里面，先发送 A 请求，然后等待服务器做出回应，收到后再发出 B 请求。

threejs

像素图由一个个像素块组成，矢量图由多个数学公式绘制曲线组成，这样即使我们缩放，数学公式会重新计算，所以矢量图不会出现失真。二、D3.js使用https://d3js.org/D3js 是一个可以基于数据来操作文档的 JvaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。三、D3操作svg四、D3绑定数据五、绘制静态直方图

二、canvas动画三、canvas绘制关系图

前端数据可视化方案：二、canvas高清绘制解决模糊问题三、canvas绘制直角坐标系四、canvas绘制柱状图五、canvas绘制圆形六、canvas绘制饼状图七、canvas绘制文字

●●。

Jest 是 Facebook 出品的一个 JavaScript 开源测试框架。相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如零配置、自带断言、测试覆盖率工具等功能，实现了开箱即用。Jest 适用但不局限于使用以下技术的项目：Babel,、TypeScript、 Node、 React、Angular、Vue 等。Jest 主要特点：● 零配置● 自带断言。

对于稍微有一些开发经验的同学在开发过程中总会经历下面类似的问题。● 每次在版本发布上线之前，在电脑前蹲上好几个小时甚至是更长时间对你的应用进行测试，这个过程非常枯燥而痛苦● 当代码的复杂度达到了一定的级别，当维护者的数量不止你一个，你应该会逐渐察觉到你在开发新功能或修复 bug 的时候，会变得越发小心翼翼，即使代码看起来没什么问题，但你心里还是会犯嘀咕：这个 Feature 会不会带来其他 Bug？这个 Fix 会不会引入其他 “Feature”？

当前案例中包含三个微应用，分别为 Marketing、Authentication 和 DashboardMarketing：营销微应用，包含首页组件和价格组件Authentication：身份验证微应用，包含登录组件Dashboard：仪表盘微应用，包含仪表盘组件容器应用、营销应用、身份验证应用使用 React 框架，仪表盘应用使用 Vue 框架。

Module Federation 即为模块联邦，是 Webpack 5 中新增的一项功能，可以实现跨应用共享模块。

微前端是一种软件架构，可以将前端应用拆解成一些更小的能够独立开发部署的微型应用，然后再将这些微应用进行组合使其成为整体应用的架构模式。微前端架构类似于组件架构，但不同的是，组件不能独立构建和发布，但是微前端中的应用是可以的。微前端架构与框架无关，每个微应用都可以使用不同的框架。在微前端架构中，微应用被打包为模块，但浏览器不支持模块化，需要使用 systemjs 实现浏览器中的模块化。systemjs 是一个用于实现模块化的 JavaScript 库，有属于自己的模块化规范。

Cordova 是用 Web 技术（ HTML，CSS 和 JS ）构建移动应用的平台。我们可以认为Cordova 是一个容器，用于将的 Web 应用移植到移动端，同时支持移动端的功能（例如：定位、蓝牙、摄像头等）。对前端友好，学习成本低HTML，CSS 和 JS，只要你写过 SPA，就很熟悉 Cordova跨平台，一套代码，多端部署（便于移植）IOS，Android，Windows Phone，Amazon-fireos，黑莓，Firefox OS，Ubuntu 和 tizien。

本节的学习目标是通过 Flutter 技术，实现 仿拉勾教育 App 的效果。

shared_preferences - 操作StatefulWidget五、生命周期initState() 组件对象插入到元素树中时didChangeDependencies() 当前状态对象的依赖改变时build() 组件渲染时setState() 组件对象的内部状态变更时didUpdateWidget() 组件配置更新时deactivate() 组件对象在元素树中暂时移除时dispose() 组件对象在元素树中永远移除时六、ProviderProvider 是对 I

下载并导入字体加压压缩包,将字体文件复制到Flutter项目中在pubspec.yaml中声明字体使用为整个应用设置默认自定义字体为某个组件设置自定义字体。

如果 在工作过程中遇到一些用css3不好实现的动画，gif又满足不了需求，那么就试试lottie动画！复杂的动画完美解决！

Dart 是谷歌开发的，类型安全的，面向对象的编程语言，被应用于Web、服务器、移动应用和物联网等领域。Dart 诞生于 2011 年 10 月 10 日Dart简单易学(类似TypeScript, 是强类型的语言)运行方式原生虚拟机(Dart 代码可以运行在 Windows, Mac、 Linux 上)JavaScript 引擎(Dart代码可以转成 JS代码，然后运行在浏览器上)类是通过 class 声明的代码段，包含属性和方法。属性:用来描述类的变量。

但是输入框发现写起来很卡顿，经过一番折腾发现是因为 vue。最后用input原生事件去解决。jumpToItem函数里面也用到了防抖。在mounted里面监听input事件。这样就能完美解决卡顿问题!最近在做一个页面跳转功能。

4 、再使用source命令重新加载一下：【source ~/.zshrc】,下次再编辑这个文件就可以直接执行：【open ~/.zshrc】3 、把 bash_profile 中的内容copy到 zshrc 文件中，保存：【:wq回车】。2、再执行【open ~/.bash_profile 】5 、运行【flutter -h 】看生效没有。

Flutter 是谷歌开发的一款开源、免费的，基于 Dart 语言的U1框架,可以快速在i0S和Android上构建高质量的原生应用。它最大的特点就是跨平台和高性能。Dart是由谷歌，在2011 年开发的计算机编程语言，它可以被用于Web、服务器、移动应用和物联网等多个领域。号称要取代JavaScript.

React Native 是 Facebook在 React.js Conf 2015 上推出了开源框架React Native(简称RN)是React的一个原生(Native) 扩展它允许我们通过React语法，来开发ios和android原生应用资源网站官网：https://reactnative.dev/中文网：https://www.reactnative.cn/

Apollo 是一个开源的 GraphQL 开发平台， 提供了符合 GraphQL 规范的服务端和客户端实现。使用 Apollo 可以帮助我们更方便快捷的开发使用 GraphQL。

对于将枚举作为一等公民的语言，它的实现就可以利用这个特性；在有了 express-graphql 的情况下，你可以向 GraphQL 服务器上的入口端点发送一个 HTTP POST 请求，其中将 GraphQL 查询作为 JSON 载荷的 query 字段，就能调用 GraphQL 服务器。GraphQL 定义了自己的类型语言，称之为 “GraphQL schema language” —— 它和 GraphQL 的查询语言很相似，让我们能够和 GraphQL schema 之间可以无语言差异地沟通。

Koa 提供了ctx.throw()方法，用来抛出错误，ctx.throw(500)就是抛出500错误。● Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。catch 太麻烦，我们可以让最外层的中间件，负责所有中间件的错误处理。这时，必须调用ctx.app.emit()，手动释放error事件，才能让监听函数生效。Koa 的最大特色，也是最重要的一个设计，就是中间件（middleware）。

Express 是一个快速，简单，极简的 Node.js web 应用开发框架。通过它，可以轻松的构建各种 web 应用。例如● 接口服务● 传统的 web 网站● 开发工具集成等● …Express 本身是极简的，仅仅提供了 web 开发的基础功能，但是它通过中间件的方式集成了许许多多的外部插件来处理 HTTP 请求。●：解析 HTTP 请求体● compression：压缩 HTTP 响应● cookie-parser：解析 cookie 数据。

运行错误指在命令执行时出现的错误，比如使用散列类型的命令操作集合类型的键，这种错误在实际执行之前 Redis 是无法发现的，所以在事务里这样的命令是会被 Redis 接受并执行的。此外回顾刚才提到的会导致事务执行失败的两种错误，其中语法错误完全可以在开发时找出并解决，另外如果能够很好的规划数据库的使用，是不会出现如命令与数据类型不匹配这样的运行时错误的。这意味着即时是一个有几千万个元素的列表，获取头部或尾部的10条记录也是极快的（和从只有20个元素的列表中获取头部或尾部的10条记录的速度是一样的）。

在这次演示中，我们来搭建一个支持 MongoDB 数据库 CRUD 操作的 Web 接口服务，用来进行博客文章的管理。CRUD（创建，读取，更新，删除）操作使您可以处理存储在 MongoDB 中的数据。● 接口路径：DELETE /articles/:id。● 请求路径：PATCH /artilces/:id。● 请求路径：GET /articles/:id。数据格式：application/json。● 请求路径：GET /articles。● 请求参数（Query）● 请求参数（Body）

在 MongoDB 中，存储在集合中的每个文档都需要一个唯一的 _id 字段作为主键。替换文档可以具有与原始文档不同的字段。在嵌套在文档数组中的多个字段上指定条件时，可以指定查询，以使单个文档满足这些条件，或者数组中文档的任何组合（包括单个文档）都满足条件。使用 $or 运算符，您可以指定一个复合查询，该查询将每个子句与一个逻辑或连接相连接，以便该查询选择集合中至少匹配一个条件的文档。如果数组字段上的复合查询条件未使用$ elemMatch运算符，则查询将选择其数组包含满足条件的元素的任意组合的那些文档。

难以应付每秒上万次的高并发数据写入。查询上亿量级数据的速度极其缓慢。分库、分表形成的子库到达一定规模后难以进一步扩展。分库、分表 的规则可能会因为需求变更而发生变更。修改表结构困难。在很多 互联网应用场景下 ， 对数据联表的查询需求不是那么强烈 ，也并不需要在数据写入后立刻读取，但对数据的读取和并发写入速度有非常高的要求。在这样的情况下 ，非关系型数据库得到高速的发展。

在日常写代码时，我们会经常遇到过，js文件或html页面内的 js 逻辑太过复杂，并且处理的数据太过庞大，页面经常会出现loading时间过长或直接卡死，大大的降低用户的体验效果。这样改写js之后，页面会正常展示在用户面前，不会被卡死，提高了用户的体验。在计算出num的结果之前，页面是不能操作的，很影响用户体验.r是一个能处理js长期运行,页面卡死的一个很好函数。如果页面加载一个业务逻辑复杂的js 该怎么办。vscode里面有这样一段代码 是这样处理的。咱们先看 这样一个例子。test.js的代码。...