bugfix
Heading 1 Heading 2 Heading 3 code elements: Lorem ipsum dolor sit amet consectetur adipisicing elit. referrence "A" Animi
Astro博客重构
Heading 1 Heading 2 Heading 3 code elements: Lorem ipsum dolor sit amet consectetur adipisicing elit. referrence "A" Animi
module federation - handbook
模块联邦是指把需要共享的模块通过去中心化的形式构建出来并应用于分布式系统的解决方案,不仅为代码带来了可扩展性还未个人和组织的生产力带来了可扩展性 背景 随着前端业务的复杂度越来越高对于微前端架构的需求愈加强烈,在此之前解决方案大多通过iframes或者服务端代码嵌套(将一个应用嵌入另一个应用中)的方式尝试解决.但在性能、灵活性和安全性方面存在很大的局限性 2020年随着Webpack5伴随模块联邦这一新功能的发布使得web开发中代码共享的发展迈进了重要一步,模块联邦通过Module Federation Runtime扩展webpack打包以支持远端加载和依赖项解析,它
《React设计原理》- 读书笔记
工程 目录结构 源码主要集中在react/packages中,核心功能相关模块如下 shared: 公共模块包含了很多基本赖姓数据结构和公共方法以供其他模块使用 react/src: react入口文件及api文件 react-dom/src: react api入口文件 react-dom/bindings: react api具体逻辑和合成事件逻辑 react-reconciler/src: fiber架构协调相关逻辑 scheduler/src: react调度相关逻辑 react-is/src: react类型判断工具方法 其他略
Gatsby Cloud迁移Netlify记录
自从Netlify收购Gatsby后原有的Gatsby-Cloud也停止服务统一使用Netlify部署 前置条件 Gatsby版本为5.12.x(内置netlify-adapter) 解绑原有Gatsby-Cloud相关设置(域名映射等) 具体步骤 导入项目 导入已有项目(github等)并设置关联(和Gatsby-Cloud基本一致) 域名管理 如果使用netlify提供的dns服务填入域名即可
OpenAI api-学习笔记
OpenAI提供了各模型能力api供用户使用,本文主要在记录文档及相关工具学习过程中的要点和问题 OpenAI 概念术语 <Primary>LLMs(Large language models)</Primary>:即自然语言处理程序利用神经网络根据指定输入生成输出文本的语言模型 api能力 <Primary>Chat</Primary>: 用于交互式聊天机器人或虚拟助手 <Primary>Embeddings</Primary>: 用于对prompt进行分类、搜素、聚类 <Primary>Analysis</Primary>: 用于对
Electron-handbook
项目模版 对于electron无论是webpack、vite都需要分别对main、preload、renderer进行打包并和chromium、node api生成对应平台应用 electron-forge: 通过其插件系统提供了项目环境、打包分发、包发布、等完整流程,并且具有webpack、vite两种构建可以选择 electron-vite: 以vite为构建方案的不同框架模版 核心API Main Process
Nestjs-学习笔记
Nestjs作为一个在nodejs框架(express、fastify、...)之上的抽象层提供了可扩展、可测试、多样性(rest api、microservices、web sockets、graphql)、渐进式的架构解决方案,可以满足各种后端的需求场景 基础 CLI nest cli提供了系列模板代码创建以及启动、打包命令
rollup-插件钩子及使用场景
rollup作为一个轻量、良好的插件系统专注于esmodule的打包器,对于插件开发提供了很多友好的钩子方法特此记录并根据遇到的问题解决办法持续更新. 范式约定 插件编写规范 插件名称以rollup-plugin-作为前缀 在package.json中包含rollup-plugin关键字 建议单元测试并支持Promise开箱即用 开发中尽可能使用异步方法,例如fs.readFile而不是fs.readFileSync 使用英文作为文档语言 尽可能输出正确的source-map 使用
vite-本地开发服务
vite本地服务在npm script一般是dev: vite这种形式所以在命令行中是使用根命令来表示: cli vite command ts title=packages/vite/src/node/cli.ts cli .command('[root]', 'start dev server') .alias('serve') .alias('dev') // .option('省略cli参数)... .action(async (root: string, options: BuildOptions & GlobalCLIOption
vite-生产构建流程
vite生产构建是通过获取用户配置和预设处理合并配置后函数式调用rollup方法(write、generate)并返回包含了构建结果的Promise以供后续对应钩子处理,熟悉生产构建流程有助于编写自定义插件以及实现特定业务需求. cli build command ts title=vite\packages\vite\src\node\cli.ts cli .command('build [root]', 'build for production') // .option('省略cli参数)... .action(async (root:
vite-@vitejs/plugin-legacy源码阅读
@vitejs/plugin-legacy作为兼容不支持原生ESM的方案插件，其根据构建目标生成对应polyfill的插件设计思路很值得学习特此记录。 用法及参数说明
vite-不同场景下的集成及配置方式
在实际业务开发中，只是通过 vite 官方提供的模版还不足以满足当前业务接入的需求。特此记录整理常见业务模型下对于 vite 的整合方式 传统后端集成 传统后端集成是将 vite 原本的开发环境能力整合到现有的后端服务中,处于前端的生产环境处理没有变动 官方文档说明 官方现有集成语言 在 v
vite-handbook
本文主要记录实际应用、库构建模式开发遇到的技巧及解决方案 样式处理 css-module: 使用xxx.module.css开启 @import: 需要安装postcss-import lightingcss: parcel2使用rust编写的css处理模块,速度快、体积小 css.preprocessorOptions: 当处理到对应css预处理文件后缀时会通过预处理器选项解析(processorOptions.scss、processorOptions.less) 静态资源 public 在public文件夹下的资源不经处理
Babel-handbook插件
Babel作为source to source的转换编辑器(transpiler)转换过程主要分为三步: parse: 通过parser把源码转换成抽象语法树(AST),词法分析根据规则拆分成各个token再通过语法分析将token递归组装成可用的AST transform: 通过相应visitor函数遍历AST调用各种transform插件对AST进行操作修改 generate: 把转换后的AST生成对应结构的字符串并拼接还会并生成sourcemap 抽象语法树(AST) AST节点组成 处理过程中每一步都
Babel-handbook使用
Babel作为构建工具广泛采取的Javascript编译器，其转换编译、静态类型检查、动态polyfill等功能通过编写自定义插件来满足特定业务需求是工程化进阶必学知识点，此文章主要记录babel内置功能包和插件的使用 预设 预设是指根据配置加载对应插件的特定配置集合,每个预设在进行语法解析时会分别加载对应的转换插件而不用手动安装很多插件并配置 @babel/preset-react react相关预设 @babel/preset-flow
前端工程化-实践总结
前端工程化是指遵循一定标准和规范通过工具从开发、生产到部署的解决方案，用以解决日益复杂的前端业务需求来提升效率和优化开发体验。 项目初始化 除了框架提供的官方脚手架外(rect、vue、angular、svelte，etc)，还有几种用于自定义创建项目模版的工具 Yeoman 常规使用:搭配generator使用，执行对应命令后通过交互生成 创建自定义生成器: 特定的项目
《从零开始搭建前端监控平台》-学习笔记
前端性能优化的前提是获取前端性能数据的现状然后才能在此基础上进行性能优化所以前端性能监控平台是必不可少的 主要功能 一边了解用户的运行环境、更好的解决问题前端监控平台需要的主要功能能有: 系统、设备统计 点击量统计 用户在线市场统计 用户登陆状况、服务器页面加载状况、混合App内部报错检测和服务器接口返回报错统计 预警提示(微信报警、邮件报警、短信报警) 上报数据 监控数据分为两部分自动上报和手动上报所以需要提供标准、统一的上报数据方法集合，也称为数据SDK。 自动上报数据又分为错误类型数据、性能相关数据和环境相关数据:
《前端技术架构与工程》- 读书笔记
随着web的发展和复杂度的提升，前端工程师的工作重点逐渐偏向复杂的交互和架构，同时技能和发展方向也发生了改变。较普遍的有: 服务端 + Web前端也被称为大前端模式 App前端 + Web前端因为React Native、Flutter的跨端技术出现也被称为范前端 工程化 组件化 思维与服务支撑 Devops与Serverless to be continued
《前端工程化:体系设计与实践》- 读书笔记
概述 前端工程体系是一种服务，以项目迭代过程中的前端开发为主要服务对象，涉及开发、构建、部署等环节，不是一个框架或者工具，聚焦的不是某个垂直的研究领域或者特殊的业务类型，而是一种可演化、可扩展的服务，服务的目标是解决前端开发以及前后端协作开发过程中的难点和痛点。 构建系统从编程语言、优化和部署3个角度解决了前端开发语言内在的缺陷以及由宿主客户端特性引起的开发和生产环境之间的差异性；本地开发服务器提供了前后端并行开发的平台；部署功能权衡速度、协作和安全，把控着Web产品上线前的最后一道关卡。最后将这些功能模块合理地串联为完整的工作流，便是前端工程化的完整外在形态。 开发 将各
《Front-End Tooling》- 读书笔记
应用工作流 前端工作流和相关工具的使用及总体构想,了解前端开发在日常工作中的挑战,使用构建工具(gulp)、依赖管理(bower)、脚手架工具(Yeoman)来完成启动、运行和部署应用 软件开发一般分为初始化（project directory、boilerplate code、vendors import） > 开发（compile、hint、local server） > 部署（build、test、assets optimization、deploy）三个阶段，分别对应套用代码（模版代码）、依赖代码（库、依赖）和预处理代码（业务代码） 对应
微前端学习笔记
微前端是一种软件架构，将每个应用以模块化的形式进行划分使之能够独立(与框架无关)开发部署的微型应用然后在讲这些微应用进行组合使其称为整体应用的架构模式. 一般用于解决不同技术栈协同开发的场景: 对举行项目的拆分,对于当下新技术最小代价升级 兼容历史应用，实现增量开发 架构实现 应用组合 多个微应用注册于容器应用中,通过模块化的方式被容器应用启动和运行，此种方式可以防止不同微应用在同时运行时发生冲突 微应用路由 当路由发生改变时容器应用首先会拦截路由的变化，根据路由匹配微前端应用启用对应微应用加载对应模块资源 跨组建通讯 通过rx.js
webpack-优化点记录
通用配置 使用最新版本Webpack(V5版本的本地缓存)、Node 通过设置resolve控制资源搜索范围 使用动态加载，减少首屏加载量 正确使用[hash]命中缓存优化http资源请求效率 针对不需要编译的库设置module.noParse跳过编译步骤 使用试验阶段功能experiments.lazyCompilation只构建被使用的入口文件 source-map开发环境使用eval(最佳编译速度)，生产环境使用source-map(最佳打包质量) 通过设置watchOptions.ignored指明不频繁更新的目录
single-spa-微前端种类
single-spa作为一个应用广泛的微前端框架，很值得学习本文主要记录文档中推荐的技术方案、整合方式以及注意点。 Single-spa的微前端类型 single-spa application: 根据特定路由渲染组件的微前端 single-spa parcels: 无需控制路由即可呈现组件的微前端 utility modules: 导出共享js洛基无需渲染组件的微前端 Single-spa Application构成 single-spa root config:渲染HTML页面和注册应用程序的JavaScript。每个程序都注册
svg学习笔记
命名空间 xmlns(xml name space):用以标识svg版本,区别在不同版本下的语义规范。 坐标系统 用户单位和屏幕单位的映射关系被称为用户坐标系统。和canvas类似，以左上角(0,0)为原点，x 轴
monorepo-不同包管理器workspace的使用方法
在日益复杂的需求下，单一仓库已经不能满足团队开发的需求。多仓库聚合开发模式由此诞生，此笔记主要记录不同包管理器(npm、yarn、pnpm)下workspace的使用方式及功能 Npm npm自7.x版本以后支持workspace package.json配置 npm install之后所有包下的依赖都会被软连接
typescript-常见范式记录
《TypeScript全面进阶指南》的不完全速记笔记. 泛型 泛型作为类型编程中的参数，可以应用在类型别名、对象类型、函数与Class中 类型别名中的泛型
qiankun下webpack使用webworker问题记录
参考资料 https://github.com/webpack-contrib/worker-loader/issues/154 https://github.com/umijs/qiankun/issues/908 报错 在qiankun微前端webpack配置下使用webworker时报错:
Gatsby-综合bundler更换讨论的记录
本文主要记录Gatsby对底层打包器优化规划的讨论以及综合现阶段功能架构考虑的取舍和看法. 参考资料 New Bundler in Gatsby disscussion Bundler: Vite vs Webpack 从开发及生产打包方面,vite的快速开发环境相应以及更小的包体积从现代浏览器角度出发更符合大众的需求，但是webpack凭借着庞大的生态以及月下载量还是位于前列。 <Callout>如果是基于pc的vue应用那么推荐切换
vanilla-extract/css-使用用途及范式总结
此笔记主要记录vanilla-extract/css api使用用途、组合方式以及范式，后续随机补充.基础用法参考官方文档 样式组合 使用基础样式组合自定义样式实现自定义混入,并最终生成一个类名
vanilla-extract/css-在gatsby改造期间问题记录
order conflict warning 当使用vanilla-extract/css时，当导出命名书写不规范时就会报order-conflict类似如下警告：
《WebGL权威指南》学习笔记-进阶
立方体 三维物体与二维图形的显著区别就是，三维物体具有深度也就是Z轴绘制时需要考虑他们的深度信息(depth infromation) 视点和视线 绘制三维场景到二维屏幕上其实是绘制观察者看到的世界需要考虑观察方向和可视距离,观察者所处的位置称为视点(eye point)从视点出发沿着观察方向的射线称作视线(viewing direction) <Primary>视点(eyeX,eyeY,eyeZ)</Primary>:观察者所在的三维空间中位置,视线的起点 <Primary>观察目标点(atX,atY,atY)</Primary>:被
《WebGL权威指南》学习笔记-基础
概述 WebGL（Web Graphic Library的缩写）是一项结合HTML5和JavaScript在网页上绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。WebGL完全集成到浏览器的所有网页标准中，可将影像处理和效果的GPU加速使用方式当做网页Canvas的一部分。WebGL元素可以加入其他HTML元素之中并与网页或网页背景的其他部分混合。 优势 跨平台性(支持web项目的设备均可以) 开发便捷(只需要编辑器和浏览器) 可以充分利用浏览器的功能 互联网拥有大量县城资料帮助学习WebGL 起源 个人计算机使用最广泛的两种三维图形渲染技
howtographql-advance conception
学习文档 @howtographql advaced 客户端 在前端使用GraphQL API是开发新抽象并帮助在客户端实现通用功能的绝佳机会。让我们考虑一些您可能希望在应用程序中拥有的"基础设施"功能： 直接发送查询和突变，无需构造HTTP请求 整合视图层 缓存 基于schema的查询校验和优化 当然，没有什么能阻止你使用纯HTTP来获取数据，然后自己移动所有位，知道正确的信息最终出现在你的UI中。但是，GraphQL提供了将你在该过程中通常
howtographql-basic conception
学习文档 @howtographql_basic [//]: # ([//]( [https://graphql.org/learn/](https://graphql.org/learn/))) 介绍 GraphQL 是一种新的 API 标准，它提供了一种更高效、更强大、更灵活的 REST 替代方案。它由 Facebook 开发和开源，现在由来自世界各地的公司和个人组成的大型社区维护。 特点 支持声明式数据获取，客户端可以从API中准确制定需要的数据
body-parser处理application/x-www-urlencoded参数解析错误踩坑
在使用application/x-www-urlencoded方式请求时，当传入的参数为数组集合类型时，会被body-parser错误解析需要通过设置urlencoded > extended为false 参考资料
monorepo解决方案
yarn workspace & lerna yarn workspace lerna pnpm turbo nx
typescript-handbook笔记
基础类型 注解 通过注解指定变量类型 元祖 具有固定长度和属性的数组，通常用来表示相关联的属性 Enumms 用来表示一组常量，其默认值从0开始当指定值后会顺延递增 Functions t
CSS-问题及技巧记录
日常开发css问题、技巧及怪异问题解决记录。 scrollbar样式自定义 windows下原生滚动条十分丑陋，需要自定义样式设置scrollbar-width: xxx时会导致根元素尺寸动态增加，特定样式下会导致重绘闪烁。此时就需要使用scrollbar-gutter属性来设置滚动条宽度预留从而解决动态改变宽度影响特定布局。 此时windows下正常，但是Macos下还是会动态改变视图尺寸。即使
webrtc-开发记录
测试STUN/TURN服务是否有效 https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice
webrtc-Data Channel
webrtc同样适用于非音视频数据传输 <Callout type="info"> 参考mdn文档：<a target="blank" href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTCAPI/Usingdatachannels">WebRTC data channels</a> </Callout> createDataChannel 参数及配置 label
webrtc-RTP Media
RTP Media结构体 Receiver & Sender getReceivers 获取一组RTCRtpReceiver对象，用于接收数据 getSenders 获取一组RTCRtpSender对象，用于发送数据，每个对象对应一个媒体轨 共有属性 MediaStreamTrack 媒体轨 RTCDtlsTransport Transport媒体数据传输相关的属性 RTCD
webrtc-stun/turn服务相关api配置
STUN/TURN服务器 rfc5766-turn-server coTurn ResTurn coturn <Callout type="info"> <a target="
webrtc-RTCPeerConnection
<Callout type="info"> 具体属性、方法和事件参考<a target="
webrtc-协议与连接
webrtc为了保证两端之间的高效传输，所以引入了很多传输协议。 <Callout type="info"> 协议说明摘录于MDN：<a target="blank" href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTCAPI/Protocols">WebRTC protocals</a> </Callout> 连接流程图 NAT
webrtc-信令与连接
Sinaling(信令) 信令是在两个设备之间发送控制信息以确定通信协议、信道、媒体编解码器和格式以及数据传输方法以及任何所需的路由信息的过程,因为信令在规范中并没有定义，所以开发者需要自己实现这一过程 信息协议：SIP或XMPP 双向通信信道: WebSocket或XMLHttpRequest以及持久化api(google channel api) <Callout> 还值得注意的是，用于执行信令的信道甚至不需要通过网络。 一个 Peer 可以输出一个数据对象，这个数据对象可以被打印出来，然后物理携带（步行或由信鸽）直到进入另一个设备，然后由该设备输出响应
webrtc-媒体录制
MediaRecorder stream: 传入的stream可从getUserMedia、video、audio或者canvas中获取 options: 为限制选项 mimeType: 媒体流类型(video/webm、audio/webm、video/mp4;codecs=vp8、video/webm;codecs=264、audio/webm;codecs=opus) audioBitsPerSecond: 音频码率 videoBitsPerSecond: 视频码率 bitsPerSecond: 整体码率
webrtc-设备管理及采集
enumerateDevices 获取所有有效的输入输出设备(麦克风、摄像头、穿戴设备等)音视频设备，返回promise其resolve值是所有设备的列表
webrtc-基础概念
WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。 参考资料 Experiment repo: https://github.com/muaz-khan/WebRTC-Experiment Mdn doc: https://d
typescript pnpm symlinks error
在使用rollup打包typescript时，使用pnpm作为包管理器时rollup.config.ts导出配置报错： 参考资料 github issue: https://github.com/microsoft/TypeScript/issues/42873 preserveSymlinks配置项说明:
gatsby with pnpm
在使用pnpm作为包管理器时，当启动打包gatsby项目时因为webpack无法识别pnpm独特的node
Node项目调试的几种方式
web项目在调试模式下可以很轻松的通过chrome dev tool或者在编辑器中使用debugger语句进行断点调试，下面将列举5种Node程序的调试方法: debugger官方文档：https://nodejs.org/dist/latest-v16.x/docs/api/debugger.html 使用V8内建的Inspector命令行调试 node inspect app.js 例如这个求和最终返回NaN,通过调试找到问题:
SSG、CSG、SSR、DSG渲染方式区别和优缺点
当我们使用Next.js、Gatsby.js类似的站点生成框架时，它们本身具有ssg、dsg、ssr的预渲染方案。该如何选择以及改动成本是什么，下面将列举这几种构建方式的区别、优缺点及适用场景。 参考资料 netlify博客: https://blog.logrocket.com/ssg-vs-ssr-in-next-js/ netlify博客:
Github Markdown prefers-color-scheme 媒体查询功能
参考官方示例 https://github.blog/logo/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta
gatsby-remark-images加载不了gif图片
想要在markdown中插入效果图，生产环境打包时不被放进资源目录。文档虽然说在markdown中像静态资源一样引入但是gatsby-remark-image插件在构建过程中并未处理。 因为在gastby-remark-images源码中仅对可调整图像大小进行处理，对gif、svg文件类型直接跳出不做处理，导致构建忽略 解决方法：使用gatsby-remark-copy-linked-files将特定类行原样输出 参考github问答 gatsby-remark-images issue:
Vim使用fzf选择文件回车不进入vim界面
在iterm2中直接fzf命令进入文件检索视图时，按下回车时不自动进入vim。但是在vim中使用FZF全局命令选中时却可以。经过一番查找资料原来是和本身fzf设计有关 fzf is designed to be a 'Unix filter' meaning it reads from stdin and prints to stdout. If no stdin pipe is provided, it lists files from the current directory as a useful default. 解决办法：设置别名通过脚本提前进入vim环境否则回车的选
Svelt Macos下通过sirv开启本地资源服务无法访问问题
Svelt项目通过sirv启动本地服务，localhost:port资源文法访问 参考github问答 sirv脚手架issue: https://github.com/lukeed/sirv/issues/70 npm script 设置 host 0.0.0.0或者127.0.0.1
web鉴权cookie session token(jwt)的区别
web应用中常见的几种鉴权凭证形式以及它们的区别 cookie 特点: 存储于客户端，分为内存客户端(请求时)和硬盘客户端(根据过期时长) 单一域名,可以指定domain、path 属性: 1.name=value 以键值对的形式设置cookie 2.expire、max-age 设置过期时间
npm run .sh脚本文件识别不了问题
在使用npm或者yarn执行script脚本为.sh文件时，windows下报错识别不了 stack-overflow: https://stackoverflow.com/questions/34937724/running-bash-scripts-with-npm use-npm-run-shell:
函数式编程学习笔记
函数式编程的概念、特性及具体应用。 概念 函数式编程(Functinal Programing, FP)是相对于面向过程、面向对象编程的范式之一。 面向对象编程思维：把现实世界中的食物抽象成程序世界中的类和对象，通过封装、继承和多台来演示事物事件的联系。 函数式编程思维：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）。 程序的本质：根据输入通过某种运算获得相应的输出，程序开发过程中会设计很多有输入输出的函数。 x > f(联系、映射) > y, y = f(x) 函数式编程中的函数指的不是程序中的函数(方法),而是数学中的函数
Gatsby自定义字体预加载解决方案
加载自定义字体解决方案 https://www.digitalocean.com/community/tutorials/gatsbyjs-custom-fonts-in-gatsby
Macos 使用brew services 命令启动关闭服务
参考github问答 brew services命令文档 https://docs.brew.sh/Manpage#services-subcommand 各种解决方法：https://gist.github.com/zubaer-ahammed/c81c9a0e37adc1cb9a6cdc61c4190f52 B
nvm install: version not found try use nvm remote-lts browser remote versions
今天在安装 Node lts 版本时说找不到对应版本，而且使用 nvm remote-lts 也是查看不到远程版本。 首先nvm指令正常只是远程无法访问，可以通过如下配置解决: 参考stackoverflow问答
P5js Api Sheet
<u>P5js api 速查表:</u>
Sharp error in mac os
在升级gatsby及其依赖时install模块时发现 ../src/common.cc:24:10: fatal error: 'vips/vips8' file not found，导致sharp模块不能正常安装。 经查资料，并非是sharp模块的原因而是libuvips模块未安装导致(应该和升级nodejs版本有关？): https://github.com/lovell/sharp/issues/1882
除了flex和grid以外的常规垂直居中布局
日常工作中，除了flex、grid以外好用的垂直剧中方法。 页面布局
CSS-常规布局(flex、grid)用法笔记
本篇主要回顾复习一下CSS中常见的布局方式:弹性盒子、网格、多栅栏(flex box、grid、Multiple-column)总结其共通点及实现方式 Flexbox 2019: display: box 2011: display: flexbox 2016: display: flex 根据flex-direction: row | column来确定主轴(main axis)方向那么另外一个就是交叉轴(cross axis) Flex Container(display: flex)属性: flex-direction |
CSS-媒体查询(media-query)
媒体查询当我们在根据设备的类型(screen, print, ...)及参数(min/max-width, ...)做出更改时非常有用。 媒体查询可作用于以下用途: 可以条件性的应用于@media和@import 为<style>、<link>、<source>和其他拥有media=属性的HTML元素指定特定媒体属性 使用Window.matchMedia()和MediaQueryList.addListener()方法进行测试和监控媒体状态 语法 媒体查询由可选的媒体类型和任意数量的媒体特征表达式组成，同样可以使
IOS中不支持的Javascript
IOS下不支持向后匹配正则语法,安卓正常。 Stakoverflow问题 https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group
Nodejs学习笔记-模块化
主要记录了前端项目中Commonjs、AMD、 CMD、ESmodule模块化区别及特点。 模块化 在没有模块化之前可以通过立即函数调用表达式(IIFE)来解决，命名冲突等问题。 <u>模块化规范的出现主要解决以下问题：</u> 多人协作开发中没有规范的混乱场景,避免命名冲突及全局混淆 便于代码的组织、拆分及复用 采用模块化类库规范项目管理进行模块化开发 Browserify Gulp Grunt Webpack ... 服务端的模块化 Commonjs 开始于一个ServerJS项目提出的用
工作者线程种类及用途
工作者线程简介及用途细节笔记摘要 参考资料 <u>《Javascript高级程序设计第4版》第27章</u> 工作者线程与线程 工作者线程是以实际线程实现的 工作者线程并行执行 工作者线程可以共享某些内存 工作者线程不共享全部内存 工作者线程不一定在同一个进程里 创建工作者线程的开销更大 <u>工作者线程相对比较重，不建议大量使用。例如，对一张 400 万像素的图片，为每个像素 都启动一个工作者线程是不合适的。通常，工作者线程应该是长期运行的，启动成本比较高， 每个实例占用的内存也比较大</u> 工作者线程的类型 专
使用Web Worker独立线程处理耗时请求
当遇到一些大数据量请求发送非常耗时，但又不得不在前端处理时，比如一次性推10万+数据。 一方面是服务器压力，再者就是如果用户想要看到最终处理结果那么就会一直等待用户体验就会很差。 那么使用Web Worker在后台分批进行请求就很适合这种场景。 参考资料 http://www.ruanyifeng.com/blog/2018/07/web-worker.html
Javascript中的内存监控
内存问题的体现 页面出现延迟加载或经常性暂停 页面持续性出现糟糕的性能 页面的性能随时间延长越来越差 界定内存问题的标准 内存泄漏：内存使用持续升高 内存膨胀：在多数设备商都存在性能问题 频繁垃圾回收：通过内存变化图进行分析 监控内存的几种方式 浏览器任务管理器 Timeline时序图记录 堆快照查找分离DOM 判断是否存在频繁的垃圾回收 Timeline中频繁的上升下降 任务管理器中数据频繁的增加减小 V8运行流程 通过scanner对脚本扫描进行词法分析出对应tokens
Javscript中的类
类定义 主要有两种: 类声明和类表达式(使用class关键字) <Callout> 与函数表达式类似，类表达式在它们被求值前也不能引用。不过，与函数定义不同的是，虽然函数声明可以提升，但类定义 </Callout>
Javascript中的内存管理
内存管理 内存：由可读但愿组成，表示一片可操作空间 管理：人为的去操作一片空间的申请、使用和释放 内存管理：开发者主动申请空间、使用空间、释放空间 管理流程: 申请-使用-释放 Javascript中内存管理 Javascript中的垃圾回收 Javascript中内存管理是自动的 对象不再被引用时 对象不能从根上访问到时 GC算法 Garbage Collection: 根据引用规
Javscript中的对象
对象的原型 对象变量proto方法 和对象变量方法的不同 proto是每个构造函数实例自有的属性(非规范)，指向构造函数的prototype prototype是构造函数的显式属性又是实例化对象的原型,它自有的proto又指向Object.prototype 当在实例化之后修改构造函数的prototype时，实例化对象本身的proto还指向原来未修改的原型，此时的原型修改重新分配了内存地址而proto则保留了原来的地址引用