- 博客(75)
- 收藏
- 关注
RSS订阅原创 为你的项目搭建sentry并且通过企微推送
sentry是一个开源的监控系统，能支持服务端与客户端的监控，还有个强大的后台错误分析、报警平台。本篇文章主要介绍 搭建sentry、使用sentry、接入企业微信推送 …更多学习案例尽在我的。
2022-08-05 14:04:21
1837
2
原创 ⚡性能优化之首屏秒开
最近做了c端的h5产品，上线后，部分用户投诉说打开很慢，经过调查发现，在网速慢的情况下，部分用户首屏展示需要5-10s，网速快的情况也要将近3s。在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内在这里总结记录一下，基本上都是一些常规可复制的优化手段，希望能为同样想优化网页性能的你提供思路~这是优化前的效果。............
2022-07-29 11:14:35
706
1
原创 你不知道的web性能指标
web应用的常见性能指标：页面加载时间、全部页面加载时间、首字节时间、DNS时间、TCP时间、页面渲染、下载速度、页面流畅度、网络丢包率、网络时延、请求响应时间、事务响应时间、并发用户数等。web的性能指标1、页面加载时间从页面开始加载到页面onload事件触发的时间。一般来说onload触发代表着直接通过HTML引用的CSS，JS，图片资源已经完全加载完毕。2、全部页面加载时间全部页面载入时间指从最初启动浏览开始，直到所有元素都被加载完成后，在2秒后仍然没有网络活动的时间。0-2秒：.
2022-04-11 15:58:54
1196
原创 Threejs/Webgl智慧城市部分效果实现
很多同学看到许多智慧城市的效果，却始终苦苦无法学会，而且网上大多数特效都没有给到完整的开源代码。大家的学习之路，困难重重。本人在学习智慧城市效果查阅资料的时候，也是花了大量的时间，太多的误导代码。...
2022-02-18 18:22:48
6996
13
原创 vue项目 history模式在nginx多级目录的配置
起因因为测试环境的链接一般都是一个主链接后面加文件目录的形式来配置nginx。例如：www.xxxx.com/admin 、www.xxx.com/clond …admin和clond是不同的项目，只是通过nginx代理使用同一个域名下面。所以我们如果在这种域名下面配置nginx，满足history模式的话，需要更改一些配置。vue官方告诉我们配置方式是：前端：const router = new VueRouter({ mode: 'history', routes: [...]}
2022-01-19 18:03:34
3366
原创 搭建适合自己团队的构建部署平台
使用Node+react+mysql 搭建构建部署平台。功能包括：git拉取、代码检测、构建、发布、植入sh脚本、查看日志、统计等等... 可扩展性较强
2022-01-19 17:18:00
2381
原创 一篇文看懂IO阻塞、非阻塞和多路复用
IO阻塞一直到多路复用，其实是发展的过程。先讲讲传统的网络 IO 的弊端，再看多路复用 IO 的优势。为了方便理解，以下所有代码都是伪代码，知道其表达的意思即可。阻塞 IO服务端为了处理客户端的连接和请求的数据，写了如下伪代码。listenfd = socket(); // 打开一个网络通信端口bind(listenfd); // 绑定listen(listenfd); // 监听while(1) { connfd = accept(listenfd); .
2022-01-12 11:25:32
671
1
原创 前端与DSL的秘密
DSL 简介DSL（Domain Specific Language）中文翻译为领域特定语言，例如 SQL、JSON、正则表达式等。与之形成对比的是 GPL（General Purpose Language），中文翻译为通用编程语言，我们熟悉的C、C++、JavaScript、Java 语言等就是。DSL特点是一门便于人们理解的编程语言或规范语言，并且可以被计算机解释执行用于专门领域，不能用于其他领域表现力有限不描述解答域，仅描述问题域DSL主要分为二类：外部 DSL、内部 DSL。外部DS
2021-12-15 14:11:39
893
原创 如何高效提高前端代码质量
原则首先说一个最重要的优化原则：代码优化是每天都要进行的，而不是一两个月做一次大优化， 那个时候就太晚了。另外由于优化是每天做的，所以你不需要一次的就过度优化，保持小步快跑即可。这个原则为什么重要？因为很多程序员会在写代码的时候说「先不优化了，等不忙的时候再优化」，然后……就没有然后了。基本上「烂代码」就是因为「不忙的时候再优化」造成的。为什么会有烂代码一些长寿命技术公司都会遇到的问题，一个系统开发了4，5年走了一批核心人员后，代码质量就会直线下降，代码质量和项目成立时间成反比，越新的项目质量越
2021-12-13 22:56:00
1370
1
原创 Node层次解析
本文内容主要分为两大部分，第一部分是 Node.js 的基础和架构，第二部分是 Node.js 核心模块的实现。Node.js 基础和架构Node.js 的组成Node.js 代码架构Node.js 事件循环组成Node.js 主要由 V8、Libuv 和第三方库组成。v8：实现js解析、执行、自定义扩展之类的Libuv：跨平台的异步 IO 库，但它提供的功能不仅仅是 IO，还包括进程、线程、信号、定时器、进程间通信，线程池等第三方库：http，Dns解析之类的。结构上.
2021-11-18 16:36:28
2302
原创 threejs看这里就行了
threejs技术预研现代浏览器都支持WebGL，这样我们就不必使用Flash、Java等插件就能在浏览器中创建三维图形。虽然WebGL提供的接口非常丰富和强大，但使用起来过于繁琐和复杂。Three.js的出现完美地解决了这个矛盾。它提供一个很简单的关于WebGL特性的JavaScript API，使得用户不需要详细地学习WebGL，就能轻松创作出好看的三维图形样例。1、基本介绍1.1 Three.js 的功能特点创建简单和复杂的三维几何图形。 在三维场景下......
2021-06-07 17:03:08
4496
原创 微前端架构实现(项目引入，消息总线，构建部署，监听服务)
简介为了解决庞大的一整块后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices）：微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理然而，越来越重的前端工程也面临同样的问题，自然地想到了将微服务思想应用（照搬）到前端，于是有了「微前端（micro
2021-01-21 16:05:02
4469
6
原创 从源码角度了解react工作原理
为什么要用虚拟domDOM操作很慢，轻微的操作都可能导致⻚面重新排版，非常耗性能。相对于DOM对象（dom对象打印出来很大，很难diff），js对象 处理起来更快，而且更简单。通过diff算法对比新旧vdom之间的差异，可以批量的、最小化的执行dom 操作，从而提高性能。React中用JSX语法描述视图，通过babel-loader转译后它们变为React.createElement(…)形式 ，React 17中的 JSX 转换不会将 JSX 转换为 React.createElement，而是自动从
2020-12-21 12:05:19
365
原创 AST语法树和babel原理
AST（抽象语法树）在计算机科学中，抽象语法树（abstract syntax tree 或者缩写为 AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。无论是LL(1)文法，还是LR(1)，或者还是其它的方法，都要求在语法分析时候，构造出相同的语法树，这样可以给编译器后端提供了清晰，统一的接口。即使是前端采用了不同的文法，都只需要改变前端代码，而不用连累到后端。即减少了工作量，也提高的编译器的可维护性。
2020-12-10 10:37:14
836
原创 高级前端必备--自动化测试
测试分类常见的开发流程里面，都有测试人员，这种我们称之为黑盒测试。测试人员并不需要去管实现机制，只看最外层的输入输出。比如一个计算机加法页面，设计人员会设计n个case，去测试该加法的正确性。这种如果我们开发人员用代码去做的话，我们称之为e2e测试。还有一种测试叫白盒测试。我们针对⼀些内部机制的核⼼逻辑，使⽤代码进行编写，我们称之为单元测试。其实我们代码里面的console.log，也算是一种测试的雏形。测试的好处组件的单元测试有很多好处:提供描述组件⾏行行为的⽂文档节省⼿手动测试的时间
2020-11-25 19:01:45
778
2
原创 高级前端必备--设计模式
设计模式发布订阅订阅/发布模式 (观察者) pub/sub这个应该⼤大家⽤用到最⼴广的设计模式了了，在这种模式中，并不不是⼀一个对象调⽤用另⼀一个对象的⽅方法，⽽而是⼀一个对象订阅另⼀一个对象的 特定活动并在状态改编后获得通知。订阅者因此也成为观察者，⽽而被观察的对象成为发布者或者主题。当发⽣生了了⼀一个 重要事件时候发布者会通知(调⽤用)所有订阅者并且可能经常已事件对象的形式传递消息vue代码里面的on,emit事件就是发布订阅，双向绑定也是。单例单例例模式的定义:保证⼀个类仅有⼀个
2020-11-23 10:07:56
1688
原创 高级前端必备--数据结构
数据结构时间空间复杂度一个是运行时间的长短，一个是占用内存空间的大小。衡量程序好坏的重要因素逻辑结构和物理结构逻辑结构线性结构 （顺序表、栈、队列…）非线性结构 （二叉树、图…）物理结构顺序存储结构（数组）链式存储结构（链表）数组的访问速度最快，直接访问下标就行。链表单向链表双向链表查找元素的时候，链表不像数组可以通过下标，快速定位，只能从头结点一个个往下找。数组在内存中是顺序存储，所以可以直接用下标查找，而链表是乱序存储，只能通过next指针一个个往下找
2020-11-18 18:24:02
1630
原创 如何构建一个高可用的node环境
如何构建一个高可用的node环境主要解决问题：故障恢复多核利用多进程共享端口项目源码和更多案例放在github上面，欢迎star.cluster （集群）cluster可以多核监听同一个端口。实现多进程共享端口，这个在node底层已经做好了。folk（child_process.fork）方式不能实现多进程共享端口,还需要nginx去做多个端口的负载均衡，一般来说用cluster要好点，folk方式适用与多个程序之间。建立一个cluster.js文件var cluster = re
2020-11-11 16:37:38
2053
5
原创 koa2源码剖析和koa-compose实现
简介Koa由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数。同时koa的中间件机制和洋葱模型是它独有的特点，并且它没有捆绑任何中间件，而是可以让用户以更优雅的方式去扩展。Koa是一个精简的web框架，它主要做了以下几件事：为request和response对象赋能，并基于它们封装成一个context对象，可以通过get，set调用参数基于async/await的
2020-11-05 16:44:22
2171
6
原创 mongodb与Node
mongodb1个数据库对应对个集合1个集合对应多个文档对象mongdb中无论是集合还是对象都不用去创建它直接用，db.要创建的集合名称.save({})集合就被创建了mongodb和mysql区别mysql(关系型数据库) 有数据需要提前建表，加入数据（各表之间关系强烈）mongodb(非关系型数据库) 关系操作比较弱化，所有的DB/集合都无需提前创建，就当已经存在，直接用。node中mongodb运用安装mysql模块: npm install mongodb --save
2020-11-03 17:04:02
535
原创 学会restful Api
restful ApiRepresentational State Transfer翻译过来是"表现层状态转化"，它是一种互联网软件的架构原则。因此复合 REST风格的Web API设计，就称它为RESTful APIRESTful特征:每一个URI代表一种资源(Resources)，比如: http://xxx.com/courses ;客户端和服务器之间，传递这种资源的某种表现层，比如: http://xxx.com/courses/web ;客户端通过HTTP动词，对服务器端资源进行操
2020-11-03 16:56:48
365
1
原创 10分钟彻底搞懂https
HTTPS随着 HTTPS 建站的成本下降，现在大部分的网站都已经开始用上 HTTPS 协议。大家都知道 HTTPS 比 HTTP 安全，也听说过与 HTTPS 协议相关的概念有 SSL 、非对称加密、 CA证书等。很多应用平台和接口明确都表明了需要https才能上架或者访问，比如苹果。更多案例放在github上面，欢迎star配置https:公钥 公开加密方式私钥 存在服务器的唯一解密公钥的方式签名 保证数据的一致性证书 确保当前发送数据单位可信https采用非对称加密算法+对称加
2020-10-29 10:23:37
1082
2
原创 Vue3.0体验
Vue3.0体验vue3.0已经问世了，Vue 团队先后对外发布了 vue-function-api 和 vue-compisition-api 的 RFC，我们从最新发布的vue-compisition-api来学习vue3.0的新特性，看看对比vue2.0有什么不同。1.初始化项目安装vue-cli3 npm install -g @vue/cli创建项目 vue create my-project项目中安装 composition-api npm install @vue/compos
2020-10-26 21:09:16
854
原创 前端搞搞基建（三）
前端大基建“基建”，就是研发团队的技术基础设施建设，是一个团队通用技术能力的沉淀，是一个团队未来的保证。网上看到的一句话，说的很好，“业务支撑是活在当下，技术基建是活好未来”。源码和更多案例放在github上面，欢迎star前端基建链路层基建的内容和业务阶段团队既有建设的沉淀是分不开的，所以基建就是从最基础的部分开始搞，怎么样能规范流程，方便开发，方便维护，怎样 能更加优雅的扩展业务，就怎么去搞基建。接下来我们以“基建链路层”来搭建基建系统，下面是我所整理的基建链路层：性能、错误监控
2020-10-23 11:38:59
2144
1
原创 前端搞搞基建（二）
前端大基建“基建”，就是研发团队的技术基础设施建设，是一个团队通用技术能力的沉淀，是一个团队未来的保证。网上看到的一句话，说的很好，“业务支撑是活在当下，技术基建是活好未来”。源码和更多案例放在github上面，欢迎star前端基建链路层基建的内容和业务阶段团队既有建设的沉淀是分不开的，所以基建就是从最基础的部分开始搞，怎么样能规范流程，方便开发，方便维护，怎样 能更加优雅的扩展业务，就怎么去搞基建。接下来我们以“基建链路层”来搭建基建系统，下面是我所整理的基建链路层：接口联调说到
2020-10-21 18:52:35
3301
5
原创 前端搞搞基建（一）
前端大基建“基建”，就是研发团队的技术基础设施建设，是一个团队通用技术能力的沉淀，是一个团队未来的保证。网上看到的一句话，说的很好，“业务支撑是活在当下，技术基建是活好未来”。基建的意义在哪里 ？基建的搭建有三个要素去确定：公司的团队规模、公司的业务、团队水平。根据不同的环境来搭建不同"重量"的基建系统。对我们开发来说，技术之所以有价值，是因为技术最终是为了解决业务问题。搞基建主要是为了以下几点：提高效率，基建可以提高单个人的工作产出和工作效率，可以从代码层面解决一些普遍性和常用性的业务问题
2020-10-20 16:51:14
3937
1
原创 手写一个webpack（loader、plugin）
手写webpack源码和更多案例放在github上面，欢迎star实现一个简单weboack可以分为4点编译一个入口文件(代码文件)解析并改造代码如将 import、require转换成 webpack_require收集依赖的模块并重复2生成文件并导出上面的模版。扩展：加上loader (文件转换)加上plugin （编译过程中 不同周期 做额外的事，比如编译过程中加注释，加图片等等。。。）搭建骨架 class KWebpack { constructor(){
2020-07-21 16:04:13
2559
3
原创 15分钟学会vue项目改造成SSR
15分钟学会vue项目改造成SSRPs：网上看了好多服务器渲染的例子，基本都是从0开始的，用Nuxt或者vue官网推荐的ssr方案（vue-server-renderer），但是我们在开发过程中基本上是已经有了现有的项目了，我们所要做的是对现有项目的SSR改造。那么这里，跟我一起对一个vue-cil2.0生成的项目进行SSR改造关于这篇文章的案例源代码我放在我的github上面，有兴趣的同学，.........
2019-12-16 18:01:24
13812
8
原创 摸鱼前端的自检（六）你不知道的web性能优化
你不知道的web性能优化你遇到过打开一个网站需要10秒以上的吗，这种网页响应非常缓慢，占用大量的CPU和内存，浏览起来常常有卡顿，页面的动画效果也不流畅。你会有什么反应？我猜想，大多数用户会关闭这个页面，改为访问其他网站。作为一个开发者，肯定不愿意看到这种情况，那么怎样才能提高性能呢有兴趣的同学可以去我的github，里面有我的分享的学习过程和blog.github.com/193Eric...
2019-11-20 12:31:37
14548
9
原创 摸鱼前端的自检（五）深入HTTP缓存机制及原理
深入HTTP缓存机制及原理身为一个web开发者，必要的http缓存机制还是要去深入了解，因为在这上面可以做很多的web性能优化。要想成为一个好的架构师，这一环节必不可少。有兴趣的同学可以去我的github，里面有我的分享的学习过程和blog.github.com/193Eric一、http报文因为缓存机制要用到报文，所以这里简单介绍下http报文。现在广泛的应用还是HTTP1.1，H...
2019-11-15 11:44:52
4509
1
原创 摸鱼前端的自检（四）浏览器如何防gank?
浏览器如何防gank?在面试中我们常常会被问到web攻击，如果预防和处理之类的，确保网站或者网页应用的安全性，是每个开发人员都应该了解的事。这里主要列出集中常见的web攻击方式和防御处理方法。有兴趣的同学可以去我的github，里面有我的分享的学习过程和blog.github.com/193EricXSSXSS攻击：跨站脚本攻击(Cross-Site Scripting)XSS是一种...
2019-11-06 19:04:22
6221
1
原创 摸鱼前端的自检（三）v8干了些什么？
v8干了些什么？V8是被设计用来提高网页浏览器内部JavaScript执行的性能，那么如何提高性能呢？接下来我们一个个介绍它干了些什么。有兴趣的同学可以去我的github，里面有我的分享的学习过程和blog.github.com/193EricJIT说到v8首先我们要明白什么是解释型语言和编译型语言。编译型语言，如c/c++，处理该语言实际上使用编译器直接将它们编译成本地代码，所以...
2019-11-05 17:20:13
6867
1
原创 摸鱼前端的自检（二）深入浏览器和node的事件循环
浏览器事件循环和node事件循环node和js都保持了单线程的特点，javascript在最初设计时设计成了单线程,为什么不是多线程呢？如果多个线程同时操作DOM那岂不会很混乱？有兴趣的同学可以去我的github，里面有我的分享的学习过程和blog.github.com/193EricJS事件循环首先我们要知道js是干嘛的，和用户通过浏览器进行交互，如果同时两个任务操作一个dom，那不...
2019-11-04 11:17:10
7599
原创 摸鱼前端的自检（一）浏览器渲染过程剖析
浏览器渲染过程剖析作为一个前端，不了解浏览器在干什么，不是个合格的前端哦~有兴趣的同学可以去我的github，里面有我的分享的学习过程和blog.github.com/193Eric首先先贴一张图，网上找的~我们可以看到，主要的组件部分有7大部分。用户看到的界面（User interface） 我们可以打开浏览器，除了主窗口（你的页面内容）之外的其他地方，地址栏，前进后退，t...
2019-10-31 15:46:54
8404
4
原创 Vue源码剖析（五）vuex机制
Vuex机制网上看了好多的博客和源码教程，感觉很多仔细的地方没有说清，而且在一些复杂的部分加了好多的描述，所以就想自己也写下心得, 方便自己, 方便他人，有兴趣的同学可以关注我的github里面有我之前一些博文 github/193Eric正常的vue.js里面我们用来传递数据或者状态是用props,或者$emit事件的方式，但是当应用很复杂的时候，还单独用这种方式，页面会乱七八糟，页面与页...
2019-10-28 17:50:37
15738
原创 Vue源码剖析（四）nextTick更新机制
nextTick更新机制网上看了好多的博客和源码教程，感觉很多仔细的地方没有说清，而且在一些复杂的部分加了好多的描述，所以就想自己也写下心得, 方便自己, 方便他人，有兴趣的同学可以关注我的github里面有我之前一些博文 github/193Eric为什么大家听到的vue是异步更新机制？传统的dom更新不是同步的吗？vue修改视图的方式是：setter -> Dep -> ...
2019-10-28 17:49:47
8745
原创 Vue源码剖析（三）patch和Diff算法
Patch和Diff算法我们知道的，在数据更改后，会触发getter，然后通过dep.notify()来通知watcher触发update进而更新视图，最终是通过Diff算法来对比新老Vnode的差异，并把差异更新到Dom视图上Diff我们知道的，Virtual DOM是一颗树，而diff算法主要把两颗树进行对比，找出之间的差异，来渲染页面diff 算法是通过同层的树节点进行比较而非对...
2019-10-28 16:27:23
10175
1
原创 Vue源码剖析（二）响应式
响应式主要是双向绑定和依赖收集Object.defineProperty，Vue.js就是基于它实现「响应式系统」的。observer（可观察的）我们知道要实现双向绑定需要给对象通过Object.defineProperty添加getter和setter方法。那我们是怎么来设置vue的呢，我们可以实现一个observer函数，我们需要它接收一个对象，那个对象是需要对数据进行响应式的，然后...
2019-10-27 23:17:01
8526
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人