ygunoil-CSDN博客

原创 AIGC

AIGC(Artificial Intelligence Generated Content / AI-Generated Content)中文译为人工智能生成内容，一般认为是相对于PCG(专业生成内容)、UCG(用户生成内容)而提出的概念。AIGC狭义概念是利用AI自动生成内容的生产方式。广义的AIGC可以看作是像人类一样具备生成创造能力的AI技术，即生成式AI，它可以基于训练数据和生成算法模...

2023-03-16 12:07:00 261

原创 script 标签中的defer 和 async 属性

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的<script> 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。整个过程如下图所示：可以看到，script 阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面...

2022-12-11 16:01:00 221

原创 js判断当前手机是否有touch bar

参考资料：https://useyourloaf.com/blog/iphone-12-screen-sizes/export const hasBottomToolBar = () => { return ( /iphone/gi.test(navigator.userAgent) && window.devicePixelRatio &&...

2022-11-29 17:13:00 266

原创 ios中getTime()的兼容性问题

时间格式为：2017-12-12 12:00:00在苹果上获取时间戳有兼容性问题需要转换成2017/12/12 12:00:00 才可以正确获取到时间戳var getTime=function(time){ var myDate = new Date(time); var u = navigator.userAgent; var isAndroid = u.indexOf('...

2022-11-29 17:07:00 163

原创直播间架构

直播间模块：视频区域、观众区域、聊天区域(feed通知)、送礼区域、活动区域(用户可操作区域)、礼物动画播放区域、弹框区域、游戏区域、连麦区域(pk，斗地主、舞台房)、主播(用户)简介区域、人气榜...

2022-10-27 18:37:00 66

原创 flex布局子元素宽度被压缩

使用flex布局，当子元素超过一屏时，子元素会去挤压别的兄弟元素。解决方案：flex-shrink:0;解释：flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，它还有另外一个值0。如果在子元素的css样式中添加flex-s...

2022-10-25 10:14:00 153

原创 React父组件获取子组件方法

React父组件获取子组件方法在react的class组件中父组件调用子组件方法直接用ref就可以拿到子组件这个实例，但是在function中，api并没有这么明确，我们需要借助hooks去帮助我们拿到这个实例。本篇介绍如何运用useRef 与 useImperativeHandel 方法结合函数组件实现子组件代码import { Input } from 'antd';import...

2022-10-12 10:17:00 104

原创创业

1.创业首先要选择一个好行业，国家扶持的行业，新兴起的行业，竞争力少的行业，垂直领域强的行业都是好行业2.公司要有业务，有盈利模式3.老板主要要懂管理，管理分为销售、运营、客服、产品研发、售后、财务、人事4.好的时候迎面直上，不好的时候裁员过冬，艰难维持，直到破产倒闭，只要最终挣到钱就可以5.大公司有钱跨了多个行业，做了很多产品，但主要盈利的也就那几个，也投资了很多公司，买了很...

2022-10-09 16:33:00 42

原创为什么模块循环依赖不会死循环？CommonJS和ES Module的处理不同？

如果被问到“CommonJS和ES Module的差异”，大概每个前端都都背出几条：一个是导出值的拷贝，一个是导出值的引用；一个是运行时加载，一个是静态编译...这篇文章会聚焦于遇到“循环引入”时，两者的处理方式有什么不同，这篇文章会讲清：CommonJS和ES Module对于循环引用的解决原理是什么？CommonJS的module.exports和exports有什么不同？引入模块...

2022-10-09 10:39:00 42

原创开课吧-web全栈架构师

2022-09-30 17:06:00 73

原创受用一生的产品思维

无论你是学生还是职场人，面对成长、晋升、生活、学习等重大问题，光有硬技能是不够的。掌握系统的底层方法，不断修炼内功，才能四两拨千斤，应对纷繁复杂的难题。本课程将解决问题的底层思维和方法论，以及被验证过的多学科理论，进行了提炼和设计，形成了这套帮助普通人解决职业，生活，学习等难题的系统课程，希望你通过学习，提升人生掌控感。借助产品思维解决人生难题(含实践方法论+分析工具)课程目录：第1章 ...

2022-09-30 17:04:00 35

原创 kubernetes实战与源码剖析

介绍docker的前世今生，了解docker的实现原理，以Django项目为例，教大家如何编写好的Dockerfile实现构业务镜像的制作。通过课程的学习，大家会知道docker的概念及基本操作，并学习构建自己的业务镜像，并通过抓包的方式学习Docker最常用的bridge网络模式的通信。kubernetes实战与源码剖析|MCA小课| 完结课程目录：├──章节1-第1章准...

2022-09-30 17:02:00 59

原创极客郭东白的架构课

东白老师会以痛点问题为导向，结合大量真实、复杂的案例，助你快速掌握在多种资源条件的掣肘下，选择最具长期价值和商业价值的设计方案，做好选型和评审。与此同时，也会为你规划一条清晰可见、切实可行的成长路径，帮你实现能力的跃迁和职业的发展。而课程的最高阶目标，就是让你在大量的实例锻炼和逻辑推导中，培养全局的思维方式，提高你作为架构师的核心竞争力。郭东白首次体系化的架构经验输出从程序员到 C...

2022-09-30 16:58:00 321

原创 Kubernetes 入门到进阶实战，系统性掌握 K8s 生产实践

K8s，容器编排的事实标准，云原生时代的企业技术战略重点，也是未来后端开发、运维必备技能。但 K8s 包含技术点繁多复杂，学起来并不容易。本课程将提供一条更容易系统掌握 K8s 的学习路线，让大家学得轻松，学得透彻。阿里云最有价值专家亲授，云原生时代必备技能Kubernetes 入门到进阶实战，系统性掌握 K8s 生产实践百度网盘课程目录：第1章课程导学试看第2章课前准备之项...

2022-09-30 16:56:00 135

原创 Vue3 + React18 + TS4 入门到实战

前端项目开发，基本绕不开 Vue + TS 或 React + TS ，因此，这已经成为前端开发工程师日常需掌握的三大热门技术。本课程针对真正的初级前端同学而设，带大家系统地掌握3者目前新版本的原理及应用，更高质量地完成工作。Vue3 + React18 + TS4 入门到实战课程目录：第1章课程导学 – 了解本课程必看试看4 节 | 16分钟第2章 Vue3核心概念及选项式API...

2022-09-30 16:44:00 91

原创从基础到实战手把手带你掌握新版Webpack4.0

本课程完整讲清最新版本下的 Webpack 4 知识体系，通过基础 + 实例 + 原理代码编写 + 复杂案例分析完成Webpack4的分析与讲解。更重要的是让你对整个前端项目的构建有一个全局化的认识，实现能力思想双升级。...

2022-09-30 16:30:00 46

原创前端要学的测试课从Jest入门到TDD/BDD双实战

课程包括前端自动化测试框架 Jest 的讲解，React 中 Enzyme 组件测试工具的讲解，Vue-test-utils 的讲解，以及TDD，BDD测试模式的讲解，单元测试，集成测试的讲解。让你形成自己的测试方法论，提高核心竞争力。课程目录：第1章课程导学试看1 节 | 11分钟第2章 Jest 前端自动化测试框架基础入门试看14 节 | 222分钟第3章 Jest难点进阶6 ...

2022-09-30 16:25:00 115

原创掘金小册 – Taro 多端开发实现原理与项目实战

本小册按开篇、基础篇、进阶篇、实战篇、总结篇进行编排，以便于读者按照自己的已有知识进行学习。剖析 Taro 多端开发框架的实现原理，并通过电商核心的项目实战，帮助开发者快速上手多端项目。课程目录：1开篇：前端多端统一开发背景与趋势介绍2基础篇 1：React 核心语法初识3基础篇 2：微信小程序开发入门与技术选型4基础篇 3：多端统一开发框架 Taro 的安装与使用5基础篇 4：T...

2022-09-30 16:23:00 156

原创 Taro3最新版本开发企业级出行全栈项目

Taro3在多端的基础上，实现了跨框架，从开始的 React/JSX 开发，到现在的 React、Nerv、Vue 2、Vue 3 四种框架的支持，同时还有jQuery的支持，是我们目前多端开发的最佳选择。本课程通过一套可在微信、支付宝、百度运行的全栈小程序(包括H5端)，带大家学习Taro开发，踏平多端编译的各种坑，寻求Taro中的各种优秀技术方案。Taro@3.3.3最新版本开发企业级出...

2022-09-30 16:17:00 49

原创 git 恢复误删的远程分支

在当前git目录下，输入以下命令查找删除分支的commitIdgit reflog --date=isoreflog是reference log的意思，也就是引用log，记录HEAD在各个分支上的移动轨迹。选项 --date=iso，表示以标准时间格式展示。这里为什么不用git log？因为git log是用来记录当前分支的commit log，分支都删除了，找不到commit l...

2022-09-22 17:45:00 87

原创动画实现方案总结

动画：能用css实现的尽量用css实现，不能用的再用js方案a.transition animation transformb. setInterval、 setTimeoutc.requestAnimationFrame、d.canvase. 一些类库 threejs 、thingjs、openGL、animation、 jq的animation、p5js、 svgaplay...

2022-09-09 16:50:00 41

原创 react+tsx中使用better-scroll

首先，你要知道为什么可以滚动，原理很简单，父容器的高度比子元素的小即可。在这之前，我们先来看一下浏览器的滚动原理：浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。第二，你需要滚动的元素应该是父元素下的第一个子元素。...

2022-09-09 14:53:00 104

原创 typescript学习

1.https://www.w3cschool.cn/typescript/typescript-df-publishing.html2.https://www.dengwb.com/typescript/3.https://juejin.im/post/5e38dd65518825492b509dd64.https://ts.xcatliu.com/5.https://www.tsla...

2022-09-08 10:35:00 32

原创 babel-polyfill的几种使用方式

为什么要使用babel-polyfill？Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而可以在现有环境执行，所以我们可以用ES6编写，而不用考虑环境支持的问题；有些浏览器版本的发布早于ES6的定稿和发布，因此如果在编程中使用了ES6的新特性，而浏览器没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器就会无法识别ES6代码，例如...

2022-09-08 10:05:00 212

原创 axios的兼容性问题

1.axios在安卓低版本兼容性处理在较低版本的android手机中发现封装的 http 无效，我测试使用的是android 4.4的老手机，主要就是无法使用promise。解决方案安装npm install es6-promise --save-dev使用 main.js引用import promise from 'es6-promise'注册 ps:要在aixo之...

2022-09-08 10:04:00 223

原创 requestIdleCallback和requestAnimationFrame的区别

页面流畅与 FPS页面是一帧一帧绘制出来的，当每秒绘制的帧数(FPS)达到 60 时，页面是流畅的，小于这个值时，用户会感觉到卡顿。1s 60帧，所以每一帧分到的时间是 1000/60 ≈ 16 ms。所以我们书写代码时力求不让一帧的工作量超过 16ms。Frame那么浏览器每一帧都需要完成哪些工作？通过上图可看到，一帧内需要完成如下六个步骤的任务：处理用户的交互JS 解析执行...

2022-09-05 10:40:00 31

原创 iOS滚动回弹修复方案

在苹果的WKWebview中存在两个弹性滚动，分别是全局和局部滚动回弹，全局回弹最方便的办法是让客户端同学设置webview属性，禁用回弹效果，这样无需前端做兼容处理，也很方便实用，不过即便是客户端禁用了回弹，局部滚动中的回弹依然会存在。Q: 为什么需要关注这个回弹如果局部滚动的区域大于 1/2 的屏幕高度，就会出现用户在局部滚动中连续滑动锁定在这个局部牢笼中，无法滚动到其他区域，让人产生页...

2022-09-05 10:00:00 145

原创 ios Safari 不兼容问题 transform rotateY

解决方法1.transform: perspective(1000);2.transform：translateZ(1000px)注意：backface-visibility

2022-08-29 11:28:00 125

原创原生js解决ios手机input输入框弹出覆盖问题

背景：软键盘弹起挡住input框软键盘弹起页面布局乱掉安卓手机 + 界面父级组件使用了overflow: hidden 导致键盘弹出(页面本质上变小了)仍然不可滚动解决思路：父级别不要使用overlow:hidden 或者键盘弹起的时候去掉overflow: hidden.总之要确保键盘弹起的时候页面仍然可以拖动。不然界面很容易乱实现原生js方法(function() { wind...

2022-08-25 16:03:00 127

原创直播平台对比

1、抖音定位是娱乐直播，日活量3-4亿不允许留微信和联系方式。这类型的平台看似简单，但是想做要也没有这么容易，因为需要主播有很强的创意，对内容质量要求比较高，和粉丝互动率较低。经常由于主播之间市场进行撕逼大战，因此整体名声并不是很好。而抖音对流量控制得很严，无法从抖音建立私域流量。2、快手瞄准下沉市场的直播，去年年底直播日活用户破亿，以生活类的直播内容为主，包涵游戏、体育、教育、媒体、...

2022-07-28 17:56:00 180

原创第三方直播SDK对比（腾讯云，阿里云，网易云信，七牛云，金山云，声网，即构科技）...

首先看过各个平台直播SDK后大致知道平台SDK分为有2种：直播：传统方式，1个主播，多个观众互动直播：与普通的单向直播相比，赋予了观众“露脸发声****”的权利，因此对实时性、抗回声的要求更高；主打“连麦”、“多画面特效”等能力。以下内容是基于拥有连麦技术做的对比目录主要功能对比推流SDK其他功能比较拉流SDK其他功能比较价格对比腾讯云阿里云网易云信七牛云金山云...

2022-07-28 17:55:00 315

原创 typescript的?? 和?: 和?.是什么意思？还有!:

?:是指可选参数，可以理解为参数自动加上undefinedfunction echo(x: number, y?: number) { return x + (y || 0);}getval(1); // 1getval(1, null); // error, 'null' is not assignable to 'number | undefined'interfac...

2022-07-28 17:50:00 62

原创 react中实现路由缓存和组件缓存

该思路适合单页面应用。1.新建一个缓存组件，我们叫它componentCache,其核心方法就是每一个缓存组件都对应一个唯一的id，id都对应挂载再window对象上的productCache属性里,即id为pageA的缓存组件，它的缓存数据再window.productCache.pageA里// componentCache.tsximport React, { FunctionCom...

2022-07-26 14:45:00 197

原创 type 和 interface的区别

对typescript 有一定了解的,会发现 interface 和 type 很相似,类型定义上，很多时候，用两种方式都能实现。三分钟直入主题，除了语法不同外，interface和type主要有区别1 类型别名可以用于其它类型 (联合类型、元组类型、基本类型(原始值))，interface不支持type PartialPointX = { x: number };type Parti...

2022-07-25 15:48:00 76

原创阻止默认事件，阻止冒泡，阻止捕获

一、阻止默认事件：event.preventDefault();let aEle = document.getElementsByTagName("a")[0];aEle.addEventListener("click", e => { let event = e || window.event; //阻止默认事件 event.preventDefault()...

2022-07-18 15:39:00 54

原创当你代码写错分支时就用git stash吧

stash的原理：将本地没提交的内容(git commit的内容不会被缓存但git add的内容会被缓存)进行缓存并从当前分支移除，缓存的数据结构为堆栈，先进后出stash的参数详解：#1. git stash/git stash savegit stash与git stash save是一样的，将没有提交的内容缓存并移除，而这条缓存名称为最新一次提交的commit -m的内容，如果没有本地...

2022-07-14 23:17:00 26

原创手写react中的useContext

https://blog.csdn.net/qq_28992047/article/details/105985257

2022-07-14 20:59:00 30

原创手写react中的useRef

https://www.pudn.com/news/62490fa3ce850076c9be561d.htmlhttps://www.csdn.net/tags/NtjaIg0sNzQ2OTgtYmxvZwO0O0OO0O0O.html

2022-07-14 20:58:00 43

原创手写react中的useMemo和useCallback

https://www.csdn.net/tags/NtzaQg2sNDA0MzQtYmxvZwO0O0OO0O0O.htmlhttp://www.manongjc.com/detail/20-hxqljfikavyujxx.html

2022-07-14 20:58:00 52

原创手写react中的useState

https://blog.csdn.net/Zong_0915/article/details/116709801https://blog.csdn.net/weixin_46797477/article/details/120875565https://developer.aliyun.com/article/784027

2022-07-14 20:56:00 28

空空如也

空空如也