- 博客(64)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 超简单！三步实现多个markdown合并输出一个 pdf
需要准备：vscodechrome合并markdown打开命令行，输入：windowstype *.md res.mdMac OScat *.md > res.mdchrome预览markdownvscode下载插件：vscode Markdown Preview Enhanced预览markdown，右击，用浏览器打开chrome打印在 chrome 中右击，选择打印，导出 pdf...
2021-08-05 10:55:46
4938
8
原创 从输入内容到展示页面全过程详解
整体流程将整个流程分为导航流程和渲染流程两部分。导航流程处理用户输入判断是搜索内容还是url搜索内容则直接用默认搜索引擎，合成带搜索关键字的URLurl，则判断url规则，根据规则，把内容加上协议，合成完整的URL监听beforeunload事件，beforeunload 事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面用户可以通过 beforeunload 事件来取消导航，让浏览器不再执行任何后续工作进入页面资源请求过程。浏览器进程会通过进程间通
2021-02-24 15:13:56
748
原创 小程序底层架构
小程序底层架构与浏览器对比以微信小程序为例，与浏览器中的对应关系：js 开发逻辑代码 -> js -> v8wxss （多了rpx单位）控制样式 -> css -> 浏览器渲染器wxml xml语言 控制渲染层展示 -> html -> 浏览器渲染器 -> dom浏览器单线程 存在阻塞小程序双线程架构js 逻辑层wxml、wxss 视图层JSBridge 通信（可以实现相机、扫码）微信小程序初级架构所有的逻辑代码会打
2021-02-06 16:05:15
2710
3
原创 浏览器的进程和线程简述
文章目录进程和线程进程和线程的关系浏览器是多进程的浏览器的四大进程关于浏览器渲染进程关于WebWorker关于SharedWorker关于硬件加速进程和线程进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）进程之间互相独立。线程是不能单独存在的，它是由进程来启动和管理的。一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码
2020-08-13 11:47:11
1070
1
原创 HTML和CSS基础系列（三）
文章目录伪类、伪元素的区别css选择器优先级（权重问题）css标准盒子和怪异盒子css提升性能的方式可继承属性visible:hidden和display:none有什么区别？在render tree 和 dom tree里面呢?window和document的区别 window.onload和document.ready的区别h5新增结构元素和属性如何开启硬件加速transform会引起回流吗伪类、伪元素的区别举几个例子：伪类：:link,:visited,:hove,:active,:focus
2020-08-02 16:42:35
197
原创 HTML和CSS基础系列（二）
文章目录语义化标签@import @media @charset 等 @ 规则页面导入样式时，使用link和@import的区别css中有哪些单位px、em、rem的区别rem为什么能够实现自适应布局，在不同的手机端表现是什么static、fixed、relative、absolute的区别display可以取哪些值href和src的区别三栏布局css3动画 transition和animationflex的使用方法，flex：1代表了什么bfc的作用，触发条件清除浮动的方式（解决高度坍塌）css水平垂直居
2020-08-02 16:37:42
205
原创 HTML和CSS基础系列（一）
文章目录DoctypeHTML5 为什么只需要写 你知道多少种Doctype文档类型？行内元素和块级元素块级元素行内元素行内块级元素让块级元素一行显示的方法HTML5 表单验证全局监听错误的方法document.write和innerHTML的区别DOM属性datasetHTML5的离线缓存离线检测iframe的缺点与iframe有关的小知识``与`<h1>`的区别、`<b>`与`<strong>`的区别、`<i>`与`<em>`的区别？</
2020-08-01 21:31:08
263
原创 JavaScript系列之函数执行上下文和闭包（作用域与作用域链）
内含词法作用域、变量对象、函数执行上下文、函数执行上下文栈、作用域链的概念和闭包的实质。另外，还通过具体的代码分析函数执行的整个过程。
2020-07-30 10:53:20
505
原创 手把手写一个迷你版的koa2
koa2中间件的简单实现说明本次的简单实现重点在中间件的原理上（compose函数），而其他部分的实现就忽略了很多细节，只是让代码能跑起来。与express不同，koa2的路由处理与它本身是分开的（路由处理用koa-router）。这里的内容不包括路由处理。本次的实现内容包括koa的use，listen和中间件的洋葱圈模型。koa中间件执行机制koa2中间件使用的是洋葱圈模型。这里附上一张网络上广为流传的图：从这张图也能知道个大概意思：请求从最外层传到最里层，响应从最里层逐层
2020-07-08 00:05:03
281
原创 es、js、nodejs傻傻分不清楚？（ECMAScript、JavaScript、nodejs的区别和联系）
目录ECMAScript、JavaScript、nodejs的区别和联系ECMAScriptJavaScriptNode.js联系js与nodejs的区别js引擎简单介绍ECMAScript、JavaScript、nodejs的区别和联系首先简单介绍一下：ECMAScript定义了语法，这是写JavaScript和nodejs都必须遵守的语法包含变量定义、循环、判断、函数，原型和原型链、作用域和闭包、异步不能操作DOM，不能监听click事件，不能发送ajax请求不能处理http请求，
2020-06-28 11:32:28
1685
1
原创 带你快速了解js的函数式编程
几个概念函数式编程函数式编程是一种范式，我们能够以此创建仅依赖输入就可以完成自身逻辑的函数。这保证了当函数被多次调用时仍然返回相同的结果。函数不会改变任何外部环境的变量，这将产生可缓存的、可测试的代码库。引用透明性引用透明性是指所有的函数对于相同的输入都将返回相同的值。那么在调用这个函数的时候，我们不必关心函数内部的实现，只用结果就好。你可以储存这个结果，甚至直接用结果去替换函数的调用。命令式和声明式命令式就是告诉编译器如何做。比如，遍历一个数组：const array = [1, 2,
2020-06-25 22:01:34
411
原创 leetcode1371 每个元音包含偶数次的最长子字符串
题目给你一个字符串 s ，请你返回满足以下条件的最长子字符串的长度：每个元音字母，即 ‘a’，‘e’，‘i’，‘o’，‘u’ ，在子字符串中都恰好出现了偶数次。示例1输入：s = "eleetminicoworoep"输出：13解释：最长子字符串是 "leetminicowor" ，它包含 e，i，o 各 2 个，以及 0 个 a，u 。示例2输入：s = "leetcodeisgreat"输出：5解释：最长子字符串是 "leetc" ，其中包含 2 个 e 。示例3输入：s =
2020-05-30 16:57:55
706
原创 js位运算详解及巧妙应用
位运算JavaScript中的数字以浮点数的形式64位存储。但在位运算中，数字被转换为有符号32位整数格式。每种位操作均直接在这32位数上实现结果，返回值也是有符号的32位整数。最后再将这32位的结果转换回64位数值。这种转换导致了一个严重的副效应，即在对特殊的NaN和Infinity值应用位操作时，这两个值都会被当成0处理。如果对非数值应用位操作符，会先使用Number()函数将该值转换为一个数值（自动完成），然后再应用位操作。得到的结果将是一个数值。js中的位运算有 按位或（|），按位与（&am
2020-05-22 18:10:53
2145
原创 移动端300ms延迟和点击穿透
文章目录一、移动端点击产生300 ms的延迟解决方案方案一：禁用缩放（HTML文档头部设置meta标签）方案二：更改默认的视口宽度方案三：CSS touch-action方案四：FastClick方案五：使用touchstart替代click二、点击穿透什么是点击穿透，点击穿透为什么会发生什么时候会触发点击穿透解决方案延迟蒙层的消失时间CSS touch-action使用FastClick参考链接一、移动端点击产生300 ms的延迟300ms延迟是指当我们点击页面的时候移动端浏览器并不是立即作出反应，而
2020-05-17 18:18:16
1124
2
原创 前端面试之移动端适配篇
关于像素，括号中为别名设备像素（物理像素）DP（Device Pixel），显示屏上的像素点，出厂即确定。设备无关像素（设备独立像素）DIP（Device Independent Pixel），缩放比为1时，设备独立像素也等于CSS像素（逻辑像素）。我们通过CSS和javascript代码设置的像素都是逻辑像素。在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位，px是一个相对单位，相对的是设备像素(device pixel)。显示器上的小色框就是像素
2020-05-13 16:06:42
5632
原创 前端面试之性能优化篇
关于这个，面试官常常会问你，说说你知道的性能优化方式（我在腾讯二面的时候被问到）。目录图片的懒加载和预加载预加载懒加载页面白屏如何排错如何减少白屏时间和首屏时间FP和FCP减少白屏时间和首屏时间的方式浏览器卸载旧页面到新页面加载完成的整个过程（window.performance.timing）总结一下性能优化方式图片的懒加载和预加载预加载预加载简单来说就是将所有所需的资源提前请求加载到本...
2020-04-06 19:57:00
1145
原创 前端面试之vue篇
目录vue的特点（优势）vue和react的区别computed和watch有什么区别数据双向绑定（响应式原理），订阅者update是怎么实现的vue数组和对象的更新方式vue生命周期vue虚拟dom和diff算法模板是怎么解析的vue路由的实现原理vue的特点（优势）vue和react的区别computed和watch有什么区别功能上：computed是计算属性，watch是监听一个值的...
2020-04-06 18:41:31
719
原创 前端面试之webpack篇
目录webpack作用、实现原理babel原理plugin和loader的区别webpack作用、实现原理依赖管理：方便引用第三方模块、让模块更容易复用、避免全局注入导致的冲突、避免重复加载或加载不需要的模块。合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS可以减少、优化代码的体积。各路插件：babel把ES6+转译成ES5-，eslint可以检查...
2020-04-05 23:36:21
694
原创 前端面试之浏览器篇
目录从输入URL到浏览器显示页面经过了什么window.onload、documentloaded、document.ready计算页面渲染时间，在哪个阶段为止回流和重绘浏览器渲染原理浏览器缓存机制强缓存和协商缓存的区别从输入URL到浏览器显示页面经过了什么1、首先，在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，...
2020-04-05 23:29:08
697
原创 前端面试之网络篇
目录cookie有哪些字段http和https的区别，ssl握手的过程http2DNS（域名）解析步骤与原理域名发散和域名收敛跨域问题解决跨域的方案XSS和CSRF攻击XSSCSRFXSS攻击，Cookie相关的字段，HttpOnlyCSRF攻击，Cookie的SameSite字段状态码304、200（from disk cache）、Etag（hash），结合浏览器的缓存机制fetch和xhr的...
2020-04-05 12:01:11
1752
原创 2020腾讯前端暑期实习面经
一面（1h）一面是在腾讯会议上进行的电话面试。面试官是一个温柔的小姐姐。主要流程就是自我介绍+基础知识问答+手写代码。自我介绍就不用说了，就说一些自己的基本情况还有在学校做过的项目。离一面也有点久了，我就记一下还记得的问答。不过可以肯定的是基本所有的问题都在我总结的面试知识点之内（因为我面试后都有补充）。css有哪些单位讲一下css的flex布局js的原型和原型链，原型链的终点在哪里...
2020-04-04 23:06:11
2177
原创 前端面试之HTML&CSS篇
感觉这块面试的时候还是比较少问的，我在面试时被问到过css的单位和px与rem的区别。另外常见的可能就是垂直居中了。目录语义化标签css水平垂直居中css中有哪些单位px、em、rem的区别display可以取哪些值href和src的区别三栏布局transition和animation语义化标签让标签具有自己的含义。常见语义化标签：title header footer article h...
2020-04-04 21:59:38
582
原创 前端面试之ES6篇
目录es6新特性箭头函数与普通函数的区别Map、Set、weakMap、weakSet与垃圾回收机制关于异步：什么是Promise手写promise实现思路如何中断一个promiseasync、awaitES7和ES8的新特性es6新特性let、const 块作用域 箭头函数、参数展开、剩余参数、Promise、解构赋值、Set和Map、weakSet和weakMap、Symbol（唯一）a...
2020-04-04 21:35:12
784
原创 前端面试之JavaScript篇
之前准备面试的时候整理的，希望能带给大家一点帮助~目录js为什么是单线程，有什么好处？js异步加载的方式Microtasks、Macrotasks（事件循环event loop、任务队列task queues）原型和原型链构造函数、原型、实例的关系new的基本原理（当let fun = new Fun（）时发生了什么？）继承prototype和__proto__的关系typeof和instanc...
2020-04-04 21:08:03
1020
原创 js查找字符串中出现次数最多的字符及其出现的次数（3种方法，考虑多个字符出现次数同时最大的情况）
昨天面试的时候被问到了，看到网上也没有很完美的解决方案（当然这个也没有很完美）。就记录一下。测试用例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...
2020-03-26 22:14:05
2249
原创 关于JavaScript的内存泄漏
目录什么是内存泄漏导致内存泄漏的原因一、意外地创建全局变量例子1：没有使用var例子2：this指向问题二、垃圾回收机制：引用计数法的循环引用限制闭包例子1：一个简单的闭包解决方案例子2：包含事件处理程序的闭包解决方案如何实时查看内存占用Chrome开发工具查看什么是内存泄漏js具有垃圾自动回收机制（GC）的语言。应用程序不再需要占用内存的时候，由于某些原因，本应被回收的内存没有被操作系统或可...
2020-03-23 13:04:43
285
原创 关于js的垃圾收集机制
目录原理标记清除法（主流方法）介绍限制引用计数法限制性能问题编写代码建议原理JavaScript具有自动垃圾回收机制，其原理是：找出不再继续使用的变量，然后释放其内存。这一操作会按照固定的时间间隔（或代码执行中预定的收集时间）周期性执行。而对于如何找出不再继续使用的变量，有标记清除法和引用计数法两种方法。标记清除法（主流方法）介绍这个算法把“对象是否不再需要”简化定义为“对象是否可以获得...
2020-03-20 17:06:18
153
原创 关于JavaScript中的声明提升
目录声明提升变量提升函数提升函数声明和函数表达式辨析为什么会出现声明提升？声明提升变量提升观察如下代码：a = 1;var a;console.log(a);将js代码从上往下一行一行地分析：第一行声明了a全局变量，并赋值1（在非严格模式下，引擎进行LHS查询，在全局作用域中创建一个具有名称a的变量）第二行再次声明变量a，将a重新默认值undefined打印a按照以上思...
2020-02-19 16:26:01
260
原创 关于事件冒泡和事件捕获
这里写自定义目录标题什么是事件事件流事件冒泡和事件捕获的概念事件冒泡事件捕获事件冒泡示例事件捕获示例阻止冒泡方法一方法二（jQuery，同时会阻止默认事件）什么是事件事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互就是通过事件实现的。可以用侦听器或处理程序来预定事件，以便事件发生时执行相应的代码。事件流事件流描述的是从页面接收事件的顺序。为什...
2020-01-31 16:31:28
761
原创 将script放在body中内容的最后的原因详解
chrome在页面渲染过程中的，绿色标志线是First Paint的时间。为什么会出现firstpaint，页面的paint不是在渲染树生成之后吗？其实现代浏览器为了更好的用户体验,渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有HTML解析之前开始构建和布局渲染树。部分的内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。假如我们将js放在heade...
2019-11-09 15:41:18
4725
1
原创 div+css实现水平/垂直/水平垂直居中超详解
单个元素水平居中1.margin:0 auto方法wrapper相对屏幕居中<div class="wrapper"></div>body{ width: 100%;}.wrapper{ margin: 0 auto; width: 120px; height: 120px; background-color: purple;}...
2019-11-02 19:56:03
5371
6
原创 正则表达式验证手机号和邮箱
手机号/^1[3456789]\d{9}$/邮箱/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/常用方法regExp.test(yourString)
2019-10-20 19:33:04
1511
原创 国际区号json（含国家中英文名称、简称、区号、首拼）
[ { "short": "AD", "name": "安道尔共和国", "en": "Andorra", "tel": "376", "pinyin": "adeghg" }, { "short": "AE", "name": "阿拉伯联合酋长国", "en": "UnitedArabEmirates", "te...
2019-10-13 15:02:43
10683
1
这里返回值为什么是false啊？?
2018-12-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人