- 博客(34)
- 收藏
- 关注
RSS订阅
原创 浏览器的事件轮询（消息轮询）
程序运⾏需要有它⾃⼰专属的内存空间，可以把这块内存空间简单的理解为进程。每个应⽤⾄少有⼀个进程，进程之间相互独⽴，即使要通信，也需要双⽅同意。有了进程后，就可以运⾏程序的代码了。运⾏代码的单位我们称之为「线程」。⼀个进程⾄少有⼀个线程，所以在进程开启后会⾃动创建⼀个线程来运⾏代码，该线程称之为主线程。如果程序需要同时执⾏多块代码，主线程可以启动更多的线程来执⾏代码，所以⼀个进程中可以包含多个线程。浏览器是⼀个多进程多线程的应⽤程序（可以在浏览器的任务管理器中查看当前的所有进程。
2023-03-15 19:07:57
508
原创 浏览器渲染原理
reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。
2023-03-15 16:38:38
193
原创 前端工程化系列知识总览（更新中）
前端构建简史npm scriptbash 基础node cli前端代码规范npm包版本规范其他规范code review测试基础知识、概念单元测试E2E测试前端异常监控与上报工程目录设计代码托管方案multi-repo VS mono-repo前端构建简史编译器Babel编译原理编译器Babel的基础概念编译器Babel的使用持续集成(CI)持续部署(CD) 简介持续集成平台-jenkin持续集成具体实现部署 - 前后端发布策略虚拟化方案 Docker
2023-03-16 13:31:18
181
原创 css计算过程 / css computed
所谓声明值就是作者自己所书写的 CSS 样式。所谓确认声明值就是将作者样式表与浏览器样式表中没冲突的样式值确定为最终值。例如：p{ color:#f00;在上面的示例中，作者样式表中设置了 color 与display，而浏览器样式表（专业名字叫用户代理样式表，下文中主要用浏览器样式表代替，便于理解）中设置了诸如 display、margin-block-start、margin-block-end、margin-inline-start、margin-inline-end 等属性对应的值。
2023-03-15 20:15:22
439
原创 编译器Babel的使用
是一个能够从终端（命令行）使用的工具，可以直接使用babel cli进行语法转换的任务，也可以使用babel node像node一样去启动一个应用，唯一的区别是babel node在加载js文件前会先按照配置对其进行语法转换。注意：它们的的名称是可以缩写的，如果你发现一个工程中的babel plugin 找不到对应的依赖时，去看看这个plugin的名称是否是被缩写了。官方提供的preset有好几个，但是用得最多的可能是preset-env，这里单拎出来讲一下，如果想查看其他的preset请前往。
2023-03-11 22:11:36
699
原创 编译器 Babel 的概念
很多人在配置Babel的时候总会出现配了这里丢了那里，这个很常见的问题往往是因为对Babel的基本概念缺乏整体性的了解，把Babel当作一个黑盒在使用。本文着重讲解Babel一系列的概念，意在为 Babel 的配置打下良好的基础。
2023-03-10 18:14:55
243
原创 前端异常监控与异常上报
监控是软件质量最后的防线，帮助我们发现真实场景中才会出现的问题，是提高软件质量的有效手段，在后端世界中异常监控已经是不可或缺的模块。
2023-03-09 14:13:23
385
原创 .gitignore、.npmignore、.vscode 、.editorconfig相关配置
配置.gitignore、.npmignore、.vscode 、.editorconfig
2023-03-04 17:12:16
930
原创 虚拟化方案 Docker
虚拟化虚拟化在大规模分布式应用中非常重要，在一机器上部署了多个服务，如果它们各自需要不同的运行环境时很容易发生冲突，如果人工的一个一个去解决它们的冲突显然在大规模集群中是不现实的，这时候就需要用虚拟化方案来进行环境隔离。我们常见的虚拟化方案是虚拟机和DockerDocker是什么Docker是个划时代的开源项目，它彻底释放了计算虚拟化的威力，极大提高了应用的维护效率，降低了云计算应用开发的成本。使用Docker，可以让应用的部署、测试和分发都变得前所未有的高效和轻松。Docker
2022-04-11 09:00:00
212
原创 持续集成具体实现
Github Actions 介绍背景持续集成往往与代码版本管理密切结合，CI的过程往往由git操作触发。Gitlab为此设计了Gitlab Cl，Github提出了Github Actions特点GitHub提供慷慨的计算资源（为每个workflow也就是一个持续集成过程提供一个独享的1核虚拟cpu，3.75GB的内存，网络权限以及100GB的磁盘空间），使得它的性能十分强大 广泛支持各种语言和框架 实时日志，为你的构建行为提供丰富的反馈 可以自由地创造和分享Actions .
2022-03-28 09:00:00
544
原创 持续集成平台-jenkin
CI平台诞生的背景很多公司因为种种原因，不想使用GitHub/gitlab上的CI能力，或是希望定制一些功能更加强大的CI/CD工作流，这时就需要一些更专业的CI平台了。CI平有那些github / gitlabAone (阿里巴巴)、织云 (腾讯)、Overmind (网易)、Jenkins (开源的)、...Jenkins简介Jenkins是一款开源CI&CD 软件，用于自动化各种任务，包括构建、测试和部署服务历史悠久，功能强大，之后出现的各个CI平台的设计都受其影
2022-03-28 09:00:00
727
原创 部署 - 前后端发布策略
前端发布策略前端发布的本质是静态资源的发布（主要关心缓存和资源同步问题）HTTP缓存合理的使用缓存让未修改的文件复用可以有效的减轻服务器负担和提高前端页面渲染效率1、协商缓存2、本地缓存（本地缓存无需跟服务器再次确认，直接根据文件名匹配，节省了跟服务器的通讯成本，在实际开发中更受开发者青睐）本地缓存的资源怎么更新？可以通过给静态资源都加上版本号解决hash代替version如果每次更新都把所有静态资源文件名改变了，然后跟着所有文件都改变了，其中也包括了没修改的静态
2022-03-28 09:00:00
468
原创 持续集成(CI)持续部署(CD) 简介
定义：一天中多次的将所有工作者的工作合并到一个共享的主线的协作方式，具体来说是开发人员提交新代码后立即进行构建，测试。根据测试结果我们可以确定新代码和原代码是否能正确的集成到一起CI / CD的意义和价值敏捷开发思想的体现。 频繁、自动化、可重复。流程像管道，代码像水。 快速发现问题，快速解决（从软件质量的角度讲，快是为了让有问题的代码快速的被发现，尽早解决，在CD的阶段发现问题比在正式环境发现问题好，在CI阶段发现问题比在CD阶段发现问题好）。 不能保证Bug Free,所以提高发布频率
2022-03-21 09:00:00
1892
原创 vue 自定义指令
为什么要自定义指令//创建方式1：全局vue.directive('directName',{})//创建方式2：组件内directives: { directName: { // 钩子 }}//使用方式1：在模板中使用<div v-directName></div>//使用方式2：jsx语法中export default{ name:'app', render(){ return ( <div id="app">
2021-05-04 15:50:43
207
原创 用 [[scope]] 解释闭包 JavaScript 闭包
什么是闭包MDN 中的解释：一个函数和对其周围状态（词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。第一句可以理解为：闭包就是函数与声明该函数的词法环境（本文主指[[ scope ]]属性）的组合。闭包就是带着词法环境的函数闭包就是一个有 [[ scope ]] 的函数[[ scope ]]函数创建时会
2021-05-03 13:16:27
261
原创 微信小程序 - 自定义组件
定义在组件的 json 中配置 component：true在组件的 js 中用 component() 注册组件使用1、在页面的 json 中引入组件{ "usingComponents": { "component-tag-name": "path/to/the/custom/component" }}2、页面中应用`<view> <!-- 以下是对一个自定义组件的引用 --> <component-tag-name inner
2021-04-28 14:05:52
413
1
原创 小程序开发基础知识
WXML1、数据绑定<view> {{message}} </view>2、列表渲染<view wx:for="{{array}}"> {{item}} </view>3、条件渲染<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view><view wx:elif="{{view == 'APP'}}"> APP </view><view w
2021-04-28 14:00:06
503
原创 小程序开发文档学习笔记 - 分包
独立分包是什么：即不依赖其他包也可以独立运行的程序包配置：设置app.json中subpackage数组成员对象的 independent 属性为true注意：独立分包里面的程序需要保证独立性不能保证getApp()能正常返回app实例（主包加载前调用会得到undefined），但是在基础库 2.2.4版本开始可以通过传参得到一个默认实现，默认实现中定义的属性会被覆盖合并到真正的 App 中//独立分包中const app = getApp({allowDefault: true
2021-04-20 22:40:51
112
原创 前端工程化 - 质量 - code-review
前端工程化 - 质量 - code-reviewCR是什么？是对约定开发规范不足的补充和监督，是一种团队成员间互相审核代码的机制。CR的意义1、有助于团队的知识共享。可以分享好的点子和技巧，快速将团队成员的代码水平拉到同一水平。2、对规约的保证，可以补充lint的不足，例如：文件命名、变量命名、工程的结构等。3、提高代码的质量。发现代码中lint不能检测出来的bug，例如：逻辑错误、新能问题等。4、减缓工程腐化。由于需求变更、设计缺陷、项目中bad smells的积累，项目无可避免的出现腐化现
2021-04-18 15:08:31
234
原创 小程序post请求注意事项
属性method为get方法时，header必须为（默认header就是这个）：header: { 'content-type': 'application/json' }, method为post时，header必须为（POST 请求会将data的值放在Request Payload里面，而不是Query String Parameters里面，后端服务器如果不注意，就无法取到数...
2019-10-14 11:42:37
276
原创 vscode 创建文件模板
在使用vscode的时候发现初始化文件的时候没有文件模板，每次新建文件之后都得...(这个痛苦的过程我就不再描述了)。鉴于以上情况，在这里奉上vscode创建文件模板的方法。1、使用Ctrl + Shift + P召唤出控制台，然后输入snippets(跟着自动提示走就行了）并选择。2、接下来输入vue并选择，VSCode会自动生成一个vue.json的文件。这里就是我们要输入模板的地方了...
2019-06-14 15:24:54
4524
原创 call() & apply() & bind()的作用与区别
对于call() & apply() & bind()的概念一直有点模糊，今天抽时间终于捋清楚了^o^共同点1、这三个方法都会将调用者的上下文对象this指向调用call() & apply() & bind()时传入的第一个参数2、在调用这三个方法的时候都会将调用者（函数）的上下文对象this指向调用call() & apply() &...
2019-06-13 11:53:58
170
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人