1
解析过程1、DNS解析
DNS解析 输入网址，浏览器并不知道要去哪里找资源，需要DNS递归查询对应IP
DNS递归查询首先是在本地服务器进行查询，本地服务器找不到后再向根域名服务器查询，根域名服务器找不到再向上一级顶级com域名服务器查找。直到最终找到并返回IP，然后本地域名服务器会将该ip缓存起来，供下次使用。比如输入www.google.com，那么查询过程为.->.com->google.com->www.google.com 此处优化方法： TCP连接：三次握手，四次挥手 TCP报文结构：
TCP报文结构中有固定的20字节的首部，里面有源端口、目的端口。序号、确认号、校验和、数据偏移等
seq（序号）: TCP连接的数据字节流中的每一个字节都有一个序号，seq表示的是本报文发送的第一个字节的序号。 ack(确认号)：表示期望收到的下一个报文段第一个字节的编号 标志位SYN（同步标识）：本bit位为1时表示发送的是一个连接请求或者连接接受的报文 标志位ACK（确认标识）：本bit位为1 表示确认号有效，表示确实收到seq为x的包，下次会回复ack = x + 1的值 标志位FIN（完成标识）：本bit位为1时，释放一个连接。表示发送端的数据已全部发送，要求释放传输通道。 标志位RST（复位标识）：为1时表示本次TCP连接出现严重错误，需要重新连接 标志位PSH（推送标识）：推送位。 标志位URG（紧急标识）：紧急bit位，表示紧急指针有效,这意味着不必等待前段数据被响应处理完即可发送给接收端 三次握手过程 从网上盗的图：
白话讲解 第一次握手：客户端：喂，听得到吗？ 第二次握手：服务器：听得到，你听得到我吗？ 第三次握手：客户端：听得到，咱们开始传输吧。 专业讲解： 第一次握手：客户端主动发起请求，第一个报文首部标志位为：SYN=1，seq=x 第二次握手：服务端表示收到请求并响应请求：SYN=1, ack=x+1,seq=y,ACK=1 第三次握手：客户端向服务器发送确认报文：seq=y+1, ACK=1。此时连接已建立 四次挥手
白话讲解（假设客户端先请求断开）： 第一次挥手：客户端：我说完了，咱们断开吧 第二次挥手：服务端：收到，我还没说完，￥@#（%&…… 第三次挥手：服务端：我说完了，咱们断开吧 第四次挥手：客户端：收到！(此时已断开，如果长时间没收到答复，也会默认断开) 专业解释： 第一次挥手：客户端：FIN=1，seq=u，客户端已停止向服务端发送数据 第二次挥手：服务端：ack=u+1,seq=v，客户端已停止，但服务端还在发送数据 第三次挥手：服务端：内容发送完成后，在最后一段报文的首部：FIN=1，ACK=1，ack=u+1，seq=w，并且不再发送数据 第四次挥手：客户端：对服务器应答，表示确认断开,ACK=1，seq=u+1，ack=w+1 TCP与UDP的区别 UDP报文结构：
16位源端口，16位目标端口，16位UDP长度，16位UDP校验和，数据
TCP是面向连接的，传输之前必须先握手，UPD不面向连接，直接传就完事了，但是对方收没收到是没底的。因此TCP更安全可靠，UDP效率更高
OSI五层模型
TCP属于传输层，TCP连接建立起来后会通知上层应用，进行其他活动。根据OSI(Open System Interconnect，开放式系统互联)五层模型，它的上层是应用层，下层还有网络层、数据链路层和物理层。其中，发送方从上到下一层层包装，分别依次序加上TCP首部、IP首部、以太网首部，通过物理层传输到接收方，接收方再由下到上逐层解析，最后到达应用层。
http请求 http请求 TCP连接建立起来后开始发送一个http请求，http请求报文由请求行(request line)、请求头(header)、空行和请求数据4个部分组成
请求行 请求方法：GET(http/0.9)，POST(http/1.0)，HEAD(http/1.0)，PUT(http/1.1)，DELETE(http/1.1)，OPTIONS(http/1.1)，TRACE(http/1.1)，CONNECT(http/1.1) 请求地址：URL(统一资源定位符)，组成格式：<协议(http/https)>://:<端口>/<路径> 协议版本：http0.9、http1.0 请求头 常见http请求头：
Host: 服务器IP地址或域名 User-Agent: 发送请求的客户端系统和浏览器信息 Connection: Keep-Alive 等，表示连接状态 Accept-Encoding: 通知服务端可以发送的数据压缩格式 Accept-Charset: 通知服务端可以发送的编码格式 Accept-Language: 通知服务端可以发送的语言 Cache-Control: 通过指定指令来实现缓存机制。比如private，public、no-cache Cookie: 存储一些用户信息、sessionId等 Range: byte=0-5 指定第一个字节和最后一个字节的位置，告诉服务器自己想提取哪些字节 Content-Security-Policy 用来开启CSP(内容安全策略) 请求数据 可选有或者没有，比如name=Alice
http响应 http响应报文主要包含状态行、响应头部、空行及响应数据组成。
状态行：主要由协议版本、状态码、状态码描述组成 协议版本：http/1.1 状态码：见http发展历史 ; 状态码描述：当前状态的描述。比如: 200 ok 响应头部 常见http响应头：
Content-Type: text/html;charset=UTF-8 告诉客户端，资源文件的类型，还有字符编码，客户端据此进行解码 Content-Encoding: 告诉客户端，服务端发送的资源都是gzip编码的 Date: 服务器发送资源的GMT(格林尼治时间)时间 Server: 服务器和相对应的版本 Transfer-Encoding: chunked 通知客户端，服务器发送的资源是分块发送的 Last-Modified: 最后一次更新时间 Connection: Keep-Alive 等，表示连接状态 Access-Control-Allow-Origin: * 表示所有网站可以跨域资源共享 Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS 允许哪些方法访问 Access-Control-Allow-Credentials: true 是否允许发送Cookie Content-Range 响应覆盖的范围和整体长度 ETag 判断服务器资源是否更改 Refresh 用于重定向 响应数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 HTTP /1.1 200 OK Date : Sun , 17 Mar 2017 08 :12 :54 GMT Server : Apache /2.2 .8 (Win32 ) PHP /5.2 .5 X-Powered -By : PHP /5.2 .5 Set -Cookie : PHPSESSID =c0huq7pdkmm5gg6osoe3mgjmm3; path=/Expires : Thu , 19 Nov 1981 08 :52 :00 GMT Cache -Control : no-store, no-cache, must-revalidate, post-check=0 , pre-check=0 Pragma : no-cacheContent -Length : 4393 Keep -Alive : timeout=5 , max=100 Connection : Keep -Alive Content -Type : text/html; charset=utf-8 <html> <head > <title > HTTP响应示例<title > </head > <body > Hello HTTP! </body > </html >
http缓存优化方案 在一次请求中，服务器会返回客户端Last-Modified时间，那么下次请求中，客户端就可以在请求头中添加If-Modified-Since+时间，如果没变，服务端会回状态码304，那么客户端就可以继续使用本地缓存展示内容。如果改变了，就返回200，并返回新的资源。
或者使用ETag（资源标识符）。在一次请求中，服务端会返回ETag，它是一串根据内容生成的字符串。下次请求时，客户端会加上请求头：
https请求 https与http的区别在于，应用层中，应用数据先经过SSL/TLS进行加密，再经过TCP连接
加密原理 安利这篇文章
客户端在向服务端发送请求时，服务端会返回自己的公钥（保险箱），客户端将数据根据服务端的公钥加密（把数据放在保险箱里），再返回给服务端，服务端用之前给客户端公钥相匹配的私钥（保险箱钥匙）解密，即得到传输的数据。
客户端发送请求 服务端返回自己的用数字证书加密过的公钥 客户端解析证书，包括正确性和完整性 传送加密信息 服务端解密信息，并使用客户端传给服务端的私钥加密信息 服务端向客户端传输加密后的信息 客户端解密 SSL/TLS握手过程 客户端向服务端发送Client Hello信息，里面包含一个客户端生成的随机数Random1，支持的加密套件、SSL版本 服务端返回Server Hello消息。服务端根据刚才客户端上报的支持的加密套件，确定一种加密方式，在这条信息中一块传给客户端。同时生成另一个随机数一块传给客户端 Certificate: 服务端将自己的证书下发给客户端，客户端用对应公钥解密，取出其中的公钥 Certificate Request(可选): 服务端要求客户端上报证书。 Sever Hello Done: 服务端通知客户端 Server Hello 结束 Certificate Verify: 客户端收到证书后，先从CA验证证书是否合法，合法后取出公钥。再生成一个随机数Random3，用公钥非对称加密(RSA等)Random3，生成PreMaster Key。 Client Key Exchange：客户端根据服务器传来的公钥生成了 PreMaster Key后，将这个 key 传给服务端，服务端再用自己的私钥解出这个 PreMaster Key 得到客户端生成的 Random3。至此，客户端和服务端都拥有 Random1 + Random2 + Random3，两边再根据同样的算法就可以生成一份秘钥，握手结束后的应用层数据都是使用这个秘钥进行对称加密。 页面渲染 浏览器拿到HTML文档后，开始解析并渲染页面
渲染过程 解析HTML生成DOM(文档对象模型)树 解析CSS生成CSSOM(CSS对象模型)树 将DOM树与CSSOM树结合为渲染树 根据渲染树设计布局(layout)，计算节点大小、布局 绘制节点 JS解析 浏览器的内核是多线程的，一个浏览器至少会有三个线程：javascript处理线程、GUI渲染线程、事件触发线程
JavaScript是事件驱动型的单线程语言，js处理引擎也是单线程，js一直等待着任务队列中任务的到来，然后加以处理 GUI渲染线程负责浏览器的渲染工作，浏览器发生回流或重绘时该线程就会触发。GUI线程与JavaScript线程是互斥的。只要JavaScript线程执行，GUI渲染线程就会挂起。一般是等待JavaScript线程执行结束，再从等待队列中取出GUI渲染线程执行。 事件触发线程。当一个事件被触发时，该线程会把该事件添加进事件触发队列的队尾，等待js引擎处理。 JS文件默认是阻塞进程的，所以为了用户体验，最佳实践是link标签放head标签而script放body底部。或者加上defer，延迟加载；加上async，异步加载。 注意点 回流与重绘
参考文档 https://www.jianshu.com/p/668970142765 https://segmentfault.com/a/1190000013522717 https://juejin.im/post/5c17d3cd5188250d9e604628 https://my.oschina.net/elitetao/blog/781227 https://developers.weixin.qq.com/community/develop/article/doc/000046a5fdc7802a15f7508b556413 https://www.jianshu.com/p/7158568e4867
]]>
https://github.com/wz71014q/2019/08/06/%E9%9D%A2%E8%AF%95%E9%A2%98-%E4%BB%8E%E8%BE%93%E5%85%A5url%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88/
2019-08-06T11:08:00.000Z
解析过程1、DNS解析
DNS解析 输入网址，浏览器并不知道要去哪里找资源，需要DNS递归查询对应IP
DNS递归查询首先是在本地服务器进行查询，本地服务器找不到后再向根域名服务器查询，根域名服务器找不到再向上一级顶级com域名服务器查找。直到最终找到并返回IP，然后本地域名服务器会将该ip缓存起来，供下次使用。比如输入www.google.com，那么查询过程为.->.com->google.com->www.google.com
此处优化方法：
TCP连接：三次握手，四次挥手 TCP报文结构： ]]>
面试题-从输入url到页面展示发生了什么
2026-05-15T08:53:54.868Z
Qiang
前端内容繁复，平时难免会碰到一些奇奇怪怪或者暂时无法理解的问题，所以特开此文将这些问题记录下来。屏幕适配问题 问题描述：移动端的屏幕适配问题，至今没有想明白是什么原因
出现场景：移动端App webview内。
复现步骤：刚开始手机字体大小为正常，打开页面后将App切后台，调整手机字体大小到最大，即出现这种情况。理论上webview内部不应该受到系统字体的影响，在原生中将该功能禁用即可。但是奇怪的是根元素的字体大小确实设置为18px，最终计算出来的字体大小却是27px。
html中已经禁止了页面缩放，但是并没有效果。
1 <meta name ="viewport" content ="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
解决方案：计算最后放大了多少倍，同比缩小：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 (function ( var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' ; var resizeTimeout; function resizeThrottler ( if (!resizeTimeout) { resizeTimeout = setTimeout (function ( resizeTimeout = null ; actualResizeHandler (); }, 66 ); } } function actualResizeHandler ( var fontsize = /^\d+/ .exec (document .documentElement .style .fontSize ); var cmtFont = /^\d+/ .exec (window .getComputedStyle (document .getElementsByTagName ("html" )[0 ]).fontSize ); var radio = Number (fontsize) / Number (cmtFont); if (radio !== 1 ) { document .documentElement .style .fontSize = 18 * radio + 'px' ; } } if (!document .addEventListener ) return ; window .addEventListener (resizeEvt, resizeThrottler, false ); document .addEventListener ('DOMContentLoaded' , resizeThrottler, false ); })();
一次偶然的发现，找出了上述问题的原因：DPR。由于系统字体变大，导致DPR变大，进而最终计算属性与设置属性不同。
]]>
https://github.com/wz71014q/2019/06/21/%E7%96%91%E9%9A%BE%E6%9D%82%E7%97%87%E8%AE%B0%E5%BD%95/
2019-06-21T12:00:00.000Z
前端内容繁复，平时难免会碰到一些奇奇怪怪或者暂时无法理解的问题，所以特开此文将这些问题记录下来。
屏幕适配问题 问题描述：移动端的屏幕适配问题，至今没有想明白是什么原因
出现场景：移动端App webview内。
复现步骤：刚开始手机字体大小为正常，打开页面后将App切后台，调整手机字体大小到最大，即出现这种情况。理论上webview内部不应该受到系统字体的影响，在原生中将该功能禁用即可。但是奇怪的是根元素的字体大小确实设置为18px，最终计算出来的字体大小却是27px。
html中已经禁止了页面缩放，但是并没有效果。
1 <meta name ="viewport" content ="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
解决方案：计算最后放大了多少倍，同比缩小：
]]>
疑难杂症记录
2026-05-15T08:53:54.866Z
Qiang
为了提高代码设计水平，测试是必不可少的。jest 是facebook出的一个测试框架，里面自带断言库，而且VUE有个Vue Test Utils 提供了官方支持，因此这里使用jest构建VUE单元测试部分。开始前建议先浏览一下官方网站，进行初步了解。起步 安装&简易demo 新建一个文件夹，然后执行：
1 2 npm init npm install jest -g
这就安装好了，接下来写一个简单的函数：
然后在你的项目文件夹下执行jest, 就会自动搜索所有.test.js和.spec.js文件进行测试。
增加配置 接着我们改一下目录，增加一个SRC文件夹，里面放着我们的原文件，然后新建test文件夹，将测试文件全部放进去
1 2 3 4 5 6 7 8 import checkNumber from '../src/demo/demo' ;describe ('decribe用来生成一个组' , () => { test ('checkNumber' , ()=> { expect (checkNumber (2 , 3 )).toBe (5 ); }); });
这时直接运行会报错，因为默认不支持ES6的部分语法，所以需要安装babel（注意babel的版本 ）进行转译：
1 npm install @babel/core @babel/preset-env babel-jest -D
在根目录新增babel.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 module .exports = { presets : [ [ '@babel/preset-env' , { targets : { node : 'current' , }, }, ], ], };
并且在package.json中配置好入口文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 { "name" : "jestdemo" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "test" : "jest" } , "author" : "" , "license" : "ISC" , "devDependencies" : { "@babel/core" : "^7.4.5" , "@babel/preset-env" : "^7.4.5" , "babel-jest" : "^24.8.0" , "jest" : "^24.8.0" } }
jest.config.js是jest配置文件，后面一些配置就在这里添加。
jest运行时会自动寻找默认的jest.config.js配置文件。如果要自定义目录，需要在package.json中指定路径：
1 2 3 "scripts" : { "test" : "jest --config ./test/jest.config.js" } ,
执行:
得到以下结果，说明执行成功！
测试Vue组件 Vue官方给我们提供了Vue Test Utils 单元测试工具，Vue Test Utils 通过将组件隔离挂载，然后模拟必要的输入 (prop、注入和用户事件) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试 Vue 组件。被挂载的组件会返回到一个包裹器内，而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。
简易Demo 以一个简单的组件为例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <template> <div > hello {{ msg }} <p class ="text" > I'm jest demo</p > <button class ="count" @click ="increment" > Increment {{ count }}</button > </div > </template> <script > export default { name : 'Hello' , data ( return { msg : 'picker' , count : 0 }; }, methods : { increment ( this .count ++; } } }; </script >
添加依赖
1 npm install vue-jest @vue/test-utils jest-serializer-vue -D
参考vue-cli2，修改jest配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 const path = require ('path' );module .exports = { rootDir : path.resolve (__dirname, './' ), moduleFileExtensions : ['js' , 'json' , 'jsx' , 'ts' , 'tsx' , 'node' , 'vue' ], moduleDirectories : ['node_modules' , 'assets' ], moduleNameMapper : { '^@/(.*)$' : '<rootDir>/assets/' , '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$' : 'identity-obj-proxy' , '\\.(css|less|scss)$' : 'identity-obj-proxy' }, transform : { '^.+\\.js$' : 'babel-jest' , '.*\\.(vue)$' : 'vue-jest' }, transformIgnorePatterns : ['<rootDir>/node_modules/' ], testPathIgnorePatterns : [ '<rootDir>/projects/' , '<rootDir>/test/sub.test.js' ], testRegex : 'hello.test.js' , snapshotSerializers : ['<rootDir>/node_modules/jest-serializer-vue' ], collectCoverage : true , coverageDirectory : '<rootDir>/test/coverage' , collectCoverageFrom : [ '<rootDir>/testDemo/**/*.{js,vue}' , '!**/node_modules/**' ] };
写测试文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 import Vue from 'vue' ;import { mount } from '@vue/test-utils' ;import { renderToString } from '@vue/server-test-utils' ;import hello from '../testDemo/hello.vue' ;let wrapper;let vm;describe ('vue组件测试' , () => { beforeEach (() => { wrapper = mount (hello); }); afterEach (() => { vm && vm.$destroy(); wrapper && wrapper.destroy (); }); it ('Dom' , () => { expect (wrapper.contains ('div' )).toBe (true ); }); it ('Content' , () => { expect (wrapper.find ('.text' ).text ()) .toEqual ('I\'m jest demo' ); }); it ('Trigger' , () => { const button = wrapper.find ('.count' ); button.trigger ('click' ); expect (button.text ()) .toEqual ('Increment 1' ); }); it ('renderToString render component as a html' , async () => { const str = await renderToString (hello); expect (str).toContain ('<p class="text">I\'m jest demo</p>' ); }); });
其中的API根据官方文档 自行调整，配置完毕后再次运行，出现以下结果即说明测试通过：
图中的表格就是我们配置的测试覆盖率。其中的几个参数意思是：
%stmts是语句覆盖率（statement coverage）：是否每个语句都执行了
从图中可以看出hello.vue文件的执行率全部为100%，并且全部通过测试。说明组件逻辑计算没有问题，实际使用怎样不能确定，但是肯定没有人为的失误问题。组件测试不一定非要追求100%，有些组件其实只要测试输入输出可以达到要求即可。
前面jest.conf.js中设置了覆盖率测试结果的输出路径(coverageDirectory)为test文件夹下的coverage，测试完成后就会自动生成：
组件挂载方式 我们要测试VUE组件，你得找个地方挂载它，这样才可以调用VUE实例的一些属性与方法。可以使用Vue Test Utils官方API创建一个包裹器wrapper，将组件挂载上去，也可以收到创建VNode，只渲染，不挂载：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import { mount } from '@vue/test-utils' ;import hello from './hello.vue' ;beforeEach (() => { wrapper = mount (hello); }); describe ('hello' , () => { it ('renders a div' , () => { expect (wrapper.contains ('div' )).toBe (true ); }) }) import hello from './hello.vue' const Constructor = Vue .extend (hello);const vm = new Constructor ().$mount();
简单组件可以用Vue Test Utils的API，挂载时顺便将slot、propsData设置好，检测输出的结果是否符合预期。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 import Vue from 'vue' ;import sinon from 'sinon' ;import { mount, shallowMount } from '@vue/test-utils' ;import index from '../index.vue' ;let wrapper;let vm;const leftSlot = '<div class="leftSlot">left icon</div>' ;const left = '<p class="leftText">left text</p>' const right = '<p class="rightText">right text</p>' const title = '<p class="title">header title</p>' describe ('check index' , () => { beforeEach (() => { wrapper = mount (index, { propsData : { theme : 'transparent' , leftOptions : { showBack : true , backText : 'goBack' , preventGoBack : false , showMore : true }, title : 'header组件' , transition : String , rightOptions : { showMore : true } } }); }); afterEach (() => { vm && vm.$destroy(); wrapper && wrapper.destroy (); }); it ('DOM' , () => { expect (wrapper.find ('.title' ).text ()).toBe ('header组件' ); }); });
复杂组件可以创建一个Vue的实例对象，在这个对象里引用你的组件，调用相关的API测试结果。下面这个例子是element-ui组件单元测试创建VUE实例的方法。使用时直接将引入的组件挂在创建的实例上即可。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 const createElm = function ( const elm = document .createElement ('div' ); document .body .appendChild (elm); return elm; }; export const createVue = function (Compo, mounted = false ) { if (Object .prototype toString .call (Compo ) === '[object String]' ) { Compo = { template : Compo }; } return new Vue (Compo ).$mount(mounted === false ? null : createElm ()); }; import child from '../child.vue' ;it ('create' , done => const vm = createVue ({ template : ` <div> <button class="btn">a button</button> <child ref="autocomplete" v-model="state" :options="options" @handle="handle" > hello world </child> </div> ` , data ( return { restaurants : [], state : '' , options : { show : false } }; }, methods : { handle (res ) { console .log ('handle' + res); }, }, mounted ( } }, true ); let elm = vm.$el ; let btnElm = elm.querySelector ('btn' ); expect (btnElm.text ()).toBe ('a button' ); });
复杂Vue组件 这里的复杂表示组件内包含Vuex、VueRouter等常用配套插件，不包括组件的业务逻辑
路由测试有三种方法：
使用了 router-link 或 router-view 的组件可以使用stub，但是一般项目都是编程式导航，因此使用第2种和第3种方式较好 1 2 3 4 5 import { shallowMount } from '@vue/test-utils' shallowMount (Component , { stubs : ['router-link' , 'router-view' ] })
引入要测试路由的组件，并创建一个真正的路由实例 如图，路由中有两个组件，App.vue是根组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import Vue from 'vue' ;import VueRouter from 'vue-router' ;import Home from './Home.vue' ;import Menu from './Menu.vue' ;const routes = [ { name : 'Home' , path : '/Home' , component : Home }, { name : 'Menu' , path : '/Menu' , component : Menu } ]; Vue .use (VueRouter );export default new VueRouter ({ routes });
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import { mount, createLocalVue } from '@vue/test-utils' ;import VueRouter from 'vue-router' ;import App from './App' ;import Home from './Home' ;import Menu from './Menu' ;import router from './router' ;const localVue = createLocalVue ();localVue.use (VueRouter ); describe ('router' , () => { it ('App router test' , () => { const wrapper = mount (App , { localVue, router }); router.push ({ name : 'Menu' }); expect (wrapper.find (Menu ).exists ()).toBe (true ); router.push ({ name : 'Home' }); expect (wrapper.find (Home ).exists ()).toBe (true ); expect (wrapper.vm .$route .name ).toBe ('Home' ); }); });
伪造 $route 和 $router 如下，mock所需组件，并添加相关参数，检查最终结果是否符合预期
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 import { shallowMount, mount, createLocalVue } from '@vue/test-utils' ;import VueRouter from 'vue-router' ;import App from './App' ;import Home from './Home' ;import Menu from './Menu' ;jest.mock ('./Home' , () => ({ name : 'Home' , render : h =>h ( 'div' , { class : { show : true }, attrs : { id : 'txt' } }, 'i\'m render text' ) })); const routes = [ { name : 'Home' , path : '/Home' , component : Home }, { name : 'Menu' , path : '/Menu' , component : Menu } ]; const router = new VueRouter ({ routes });const localVue = createLocalVue ();localVue.use (VueRouter ); describe ('router' , () => { it ('App router test' , () => { const wrapper = mount (App , { localVue, router }); router.push ({ name : 'Menu' }); expect (wrapper.find (Menu ).exists ()).toBe (true ); router.push ({ name : 'Home' }); expect (wrapper.find (Home ).exists ()).toBe (true ); expect (wrapper.find ('#txt' ).text ()).toBe ('i\'m render text' ); expect (wrapper.vm .$route .name ).toBe ('Home' ); }); }); describe ('Menu mock router' , () => { it ('renders a username from query string' , () => { const username = 'alice' ; const wrapper = shallowMount (Menu , { mocks : { $route : { params : { username } } } }); expect (wrapper.find ('.username' ).text ()).toBe (username); }); });
增加快照 当你的组件达到理想状态并测试无误后，可以将当前状态保存为一个快照，这样后面再有改动就可以跟这个快照对比，可以大大提高测试的速度。
1 2 3 4 5 6 7 8 9 10 11 12 13 describe ('vue组件测试' , () => { beforeEach (() => { wrapper = mount (hello); }); afterEach (() => { vm && vm.$destroy(); wrapper && wrapper.destroy (); }); it ('snaps' , () => { expect (wrapper.element ).toMatchSnapshot (); }) })
设置好快照，下次有更改的东西直接会提示出来：
更新快照可以用：
常用测试项 检测Dom 1 2 3 4 5 6 it ('renders a div' , () => { expect (wrapper.contains ('div' )).toBe (true ); }); it ('p标签的内容是I\'m jest demo' , () => { expect (wrapper.find ('.text' ).text ()).toEqual ('I\'m jest demo' ); });
检测类名 1 2 3 4 5 it ('check classes' , () => { const checkButton = wrapper.find ('.check-box' ); expect (checkButton.classes ()).toContain ('is-checked' ); expect (checkButton.classes ().indexOf ('checked' ) === -1 ).toBe (true ); });
检测样式 1 2 3 4 it ('传递的颜色应该是#fff' , () => { const icon = wrapper.find ('.icon' ); expect (icon.element .style .color ).toEqual ('rgb(255, 255, 255)' ); });
检测方法有没有被调用 1 2 3 4 5 6 7 8 9 10 it ('click' , () => { const checkButton = wrapper.find ('.check-box' ); checkButton.trigger ('click' ); expect (wrapper.emitted ().input .length ).toBe (1 ); expect (wrapper.emitted ().input [0 ]).toBeTruthy (); expect (wrapper.emitted ().input [0 ]).toEqual ([0 ]); expect (checkButton.classes ()).toContain ('is-checked' ); checkButton.trigger ('click' ); expect (wrapper.emitted ().input .length ).toBe (2 ); });
1 2 3 4 5 6 7 it ('triggle' , () => { const shallowWrapper = wrapper (Header ); const eventSpy = sinon.spy (wrapper.vm , '$emit' ); wrapper.find ('.gree-header-title' ).trigger ('click' ); expect (eventSpy.withArgs ('on-click-title' ).calledOnce ).toBeTruthy (); }); });
检测传入的数据有没有正常接收 1 2 3 4 5 6 7 8 9 it ('The text of check-box should be something, () => { const shallowWrapper = shallowMount(box, { slots: { default: ' something' } }) expect(shallowWrapper.find(' .check -box').text()).toBe(' something'); shallowWrapper.destroy(); });
常用API jest 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 descrip ('title' , () => { it ('test1' , ()=> { }) it ('test2' , ()=> { }) }) beforeEach (fn, timeout) afterEach (fn, timeout) beforeAll (fn, timeout) beforeAll (() => console .log ('global - beforeAll' ));afterAll (() => console .log ('global - afterAll' ));beforeEach (() => console .log ('global - beforeEach' ));afterEach (() => console .log ('global - afterEach' ));test ('' , () => console .log ('global - test' ));describe ('Scoped / Nested block' , () => { beforeAll (() => console .log ('Scoped - beforeAll' )); afterAll (() => console .log ('Scoped - afterAll' )); beforeEach (() => console .log ('Scoped - beforeEach' )); afterEach (() => console .log ('Scoped - afterEach' )); test ('' , () => console .log ('Scoped - test' )); }); describe (name, fn) test (name, fn, timeout) it (name, fn, timeout) test.each (table)(name, fn, timeout) test.each ([[1 , 1 , 2 ], [1 , 2 , 3 ], [2 , 1 , 3 ]])( '.add(%i, %i)' , (a, b, expected ) => { expect (a + b).toBe (expected); }, );
1 2 3 4 5 6 7 8 9 10 11 12 13 14 expect (fn ()).toBe (value) expect.extend (matchers) expect.extend ({ matchers ( return true ; }, }); it ('numeric ranges' , () => { expect (100 ).matchers ().toBe (true ); }); expect ().toBeTruthy () expect ().toEqual ()
1 2 3 4 5 6 jest.fn () const returnsTrue = jest.fn (() => true );returnsTrue ();console .log (returnsTrue ()); expect (returnsTrue).toHaveBeenCalled ();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 jest.mock (moduleName, factory, options) function sum ( return 88 ; } module .exports = sum;const sum = require ('./sum.js' );jest.mock ('./sum.js' , () => jest.fn (() => 66 )); describe ('sum' , () => { it ('sum should return 66' , () => { console .log (sum ()); expect (sum ()).toBe (66 ); }); });
Debug vscode有jest插件，安装后可以快速开启debug。debug环境是在node下的，也可以自己配置：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 { "version" : "0.2.0" , "configurations" : [ { "type" : "node" , "name" : "vscode-jest-tests" , "request" : "launch" , "args" : [ "--runInBand" ] , "cwd" : "${workspaceFolder}" , "console" : "integratedTerminal" , "internalConsoleOptions" : "neverOpen" , "program" : "${workspaceFolder}/node_modules/jest/bin/jest" } ] }
配置好后设置断点，按F5即可。
]]>
https://github.com/wz71014q/2019/06/05/VUE%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95/
2019-06-05T12:00:00.000Z
为了提高代码设计水平，测试是必不可少的。jest 是facebook出的一个测试框架，里面自带断言库，而且VUE有个Vue Test Utils 提供了官方支持，因此这里使用jest构建VUE单元测试部分。开始前建议先浏览一下官方网站，进行初步了解。
起步 安装&简易demo 新建一个文件夹，然后执行：
1 2 npm init npm install jest -g
这就安装好了，接下来写一个简单的函数：
然后在你的项目文件夹下执行jest, 就会自动搜索所有.test.js和.spec.js文件进行测试。
增加配置 接着我们改一下目录，增加一个SRC文件夹，里面放着我们的原文件，然后新建test文件夹，将测试文件全部放进去
1 2 3 4 5 6 7 8 import checkNumber from '../src/demo/demo' ;describe ('decribe用来生成一个组' , () => { test ('checkNumber' , ()=> { expect (checkNumber (2 , 3 )).toBe (5 ); }); });
Vue单元测试踩坑记录
2026-05-15T08:53:54.861Z
Qiang
前端适配是个麻烦事。PC端要适配不同浏览器，移动端又要适配各种屏幕。而这一切的根源，要从「设备像素」和「逻辑像素」这对概念说起。基础概念 设备像素（Device Pixel）是屏幕的物理像素 ，一块屏幕出厂时就固定的发光点数量。比如 iPhone 8 是 750 × 1334 像素，这是硬件决定的，改不了。
逻辑像素（CSS Pixel / Logical Pixel）是我们写代码时用的像素 。CSS 里的 width: 375px 指的就是逻辑像素。
为什么会有两套像素系统？因为手机屏幕太小了，如果 1px CSS 对应 1 个物理像素，文字和按钮会小到看不清。所以苹果在 iPhone 4 上提出了 Retina 概念，用一个逻辑像素对应多个物理像素。
DPR（Device Pixel Ratio） DPR 就是设备像素与逻辑像素的比值：
常见的 DPR 值：
设备 逻辑分辨率 物理分辨率 DPR iPhone SE / 6/7/8 375 × 667 750 × 1334 2 iPhone 12 Pro 390 × 844 1170 × 2532 3 MacBook Pro Retina 1440 × 900 2880 × 1800 2 普通 1080p 显示器 1920 × 1080 1920 × 1080 1
DPR = 1 时，一个 CSS 像素就是一个物理像素；DPR = 2 时，一个 CSS 像素由 2×2 个物理像素渲染，所以画面更细腻。
由 DPR 引发的问题 1. 1px 边框变粗 最经典的问题：写 border: 1px solid #ccc，在 DPR = 2 的屏幕上，物理上实际渲染了 2px 的宽度，看起来比设计稿粗。解决方案一般用 transform: scale() 来模拟 0.5px：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .hairline { position : relative; } .hairline ::after { content : '' ; position : absolute; left : 0 ; bottom : 0 ; width : 100% ; height : 1px ; background : #ccc ; transform : scaleY (0.5 ); transform-origin : 0 0 ; }
2. 图片模糊 一张 100×100px 的图片，在 DPR = 2 的屏幕上需要 200×200px 的物理像素来渲染，但实际只有 100×100px 的数据，就只能被拉伸，导致模糊。解决方案是用 srcset 提供不同倍率的图：
1 2 3 <img src ="photo-1x.jpg" srcset ="photo-2x.jpg 2x, photo-3x.jpg 3x" alt ="photo" >
或者用 CSS image-set()：
1 2 3 4 5 6 .avatar { background-image : image-set ( url ("avatar-1x.jpg" ) 1 x, url ("avatar-2x.jpg" ) 2 x ); }
3. 媒体查询 有时需要针对不同 DPR 做不同布局，可以用 device-pixel-ratio：
1 2 3 4 5 6 7 8 @media (-webkit-min-device-pixel-ratio : 2 ) { .box { border : 0.5px solid #ccc ; } } @media (-webkit-min-device-pixel-ratio : 3 ) { .box { border : 0.333px solid #ccc ; } }
视口（Viewport） 移动端还有一个「视口」概念。在没做适配的页面中，手机浏览器会用一个「虚拟视口」来容纳整个 PC 页面，导致文字看起来很小。解决方案是加 viewport meta 标签：
1 <meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
width=device-width 让页面宽度等于设备宽度（逻辑像素），initial-scale=1.0 禁止默认缩放。这样 CSS 中的 100vw 就等于逻辑宽度，页面就正常了。
总结 设备像素 是屏幕物理发光点，写代码时一般不用管它逻辑像素 是我们写 CSS 用的单位，通过 DPR 与物理像素关联DPR > 1 导致 1px 边框变粗和图片模糊，需要用 transform + srcset 来适配 移动端一定要加 viewport meta 标签
https://github.com/wz71014q/2019/06/04/CSS-%E8%AE%BE%E5%A4%87%E5%83%8F%E7%B4%A0%E4%B8%8E%E9%80%BB%E8%BE%91%E5%83%8F%E7%B4%A0/
2019-06-04T13:00:00.000Z
前端适配是个麻烦事。PC端要适配不同浏览器，移动端又要适配各种屏幕。而这一切的根源，要从「设备像素」和「逻辑像素」这对概念说起。
基础概念 设备像素（Device Pixel）是屏幕的物理像素 ，一块屏幕出厂时就固定的发光点数量。比如 iPhone 8 是 750 × 1334 像素，这是硬件决定的，改不了。
逻辑像素（CSS Pixel / Logical Pixel）是我们写代码时用的像素 。CSS 里的 width: 375px 指的就是逻辑像素。
为什么会有两套像素系统？因为手机屏幕太小了，如果 1px CSS 对应 1 个物理像素，文字和按钮会小到看不清。所以苹果在 iPhone 4 上提出了 Retina 概念，用一个逻辑像素对应多个物理像素。
DPR（Device Pixel Ratio） DPR 就是设备像素与逻辑像素的比值：
常见的 DPR 值：
设备
逻辑分辨率
物理分辨率
DPR
iPhone SE / 6/7/8
375 × 667
750 × 1334
2
iPhone 12 Pro
390 × 844
1170 × 2532
3
MacBook Pro Retina
1440 × 900
2880 × 1800
2
普通 1080p 显示器
1920 × 1080
1920 × 1080
1
DPR = 1 时，一个 CSS 像素就是一个物理像素；DPR = 2 时，一个 CSS 像素由 2×2 个物理像素渲染，所以画面更细腻。
由 DPR 引发的问题 1. 1px 边框变粗 ]]>
CSS-设备像素与逻辑像素
2026-05-22T05:08:32.107Z
Qiang
异步编程是JS中必备的一部分。由于JS是单线程，如果全部事件都顺序执行会阻塞进程。所以一些耗时较长的事件采用异步方式进行。这里记录一些《深入浅出Node.js》笔记，有些地方没有碰到过，不理解，后续完善。异步编程的一些问题： 异常处理 1 2 3 4 5 6 7 try { JSON .parse (json); } catch (e) { console .error (e); } finally { console .log ("finally" ); }
现在有一个异步方法：
1 2 3 4 5 6 7 8 const async = function (callback ) { process.nextTick (callback); } try { async (callback); } catch (e) { console .error (e); }
这里调用async()方法只能捕获async方法的异常，但是回调callback的异常却无法捕获
函数嵌套太深 1 2 3 4 5 6 7 8 9 10 11 12 13 connection.query (sql, (err, result ) => { if (err) { console .err (err) } else { connection.query (sql, (err, result ) => { if (err) { console .err (err) } else { ... } }) } })
阻塞代码 1 2 3 4 5 const start = new Date ();while (new Date () - start < 1000 ) { ··· }
多线程编程 异步转同步 异步编程解决方案 事件发布/订阅模式 1 2 3 4 5 6 emitter.on ('message' , function (msg ) { console .log (msg); }) emitter.emit ('message' , 'I\'m bat man!' );
事件发布/订阅没有同步、异步的概念，只要一发布、监听者立刻调用。
Promise/Defeered模式 Defeered: 延迟对象，暂不处理。
Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。它的特点：
Promise对象代表一个异步操作，只有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。 Promise只会从pending转化到fulfilled或者是rejected，不会逆转。转化成功后就不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。 基本用法 创建一个Pormise实例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function asyncTime ( return new Promise ((resolve, reject ) => { console .log ('promise start' ); setTimeout (() => { resolve ('time down' ) }, 5000 ); }); } asyncTime () .then ((res ) => { console .log (res); }) .catch ((error ) => { console .error (error); }) .finally (() => { console .log ('执行完成' ); })
输出结果：
1 2 3 promise start time down
Promise实例化后立即执行，输出”promise start”，5秒后执行成功，输出”time down”。
有几点需要注意：
resolve将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果作为参数传递出去。reject也可以将Promise对象的状态结束，但是是变成“失败”（即从 pending 变为 rejected)。 then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。一般then只用来接收resolve状态。rejected状态由catch捕获执行。 resolve()、reject()、then()和cacth()方法的返回值都是新的Promise对象。所以可以在后面接着使用then/catch，链式调用。 立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。 1 2 3 4 5 6 7 8 9 10 setTimeout (function ( console .log ('three' ); }, 0 ); Promise .resolve ().then (function ( console .log ('two' ); }); console .log ('one' );
链式调用 1 2 3 4 5 doSomething ().then (result =>doSomethingElse (value)) .then (newResult =>doThirdThing (newResult)) .then (finalResult =>console .log (`Got the final result: ${finalResult} ` )) .catch ((err ) => {console .error (err)});
通常，一遇到异常抛出，promise链就会停下来，直接调用链式中的catch处理程序。
单独使用Promise.resolve()和Promise.reject() Promise.resolve() 和 Promise.reject() 是手动创建一个已经resolve或者reject的promise快捷方法。以Promise.resolve()为例
1 2 3 4 5 Promise .resolve ('foo' )new Promise ((resolve ) => { resolve ('foo' ); })
如果Promise.resolve()参数是一个Promise对象，则不做任何修改，直接返回； 如果Promise.resolve()参数是一个不具有then方法的对象或根本就不是对象的参数，返回一个resolve状态的Promise对象 如果Promise.resolve()不带参数，返回一个resolve状态的Promise对象 Promise.reject()返回reject状态的Promise对象 Primse.all()和Promise.race() Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
1 const p = Promise .all ([p1, p2, p3]);
上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用Promise.resolve方法，将参数转为 Promise 实>例。p的状态由p1、p2、p3决定，分成两种情况：
只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。 Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
1 const p = Promise .race ([p1, p2, p3]);
上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
async函数 async函数跟Promise可以搭配使用。async函数有返回值时会返回一个Promise，后面可以跟then方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 async function test ( console .log ('start' ); try { await timer (); } catch (err) { console .log (err); } console .log ('end' ); } function timer ( return new Promise ((resolve ) => { setTimeout (() => { console .log ('timer middle' ); resolve (); }, 3000 ) }) } test ();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 async function test ( console .log ('start' ); await timer (); console .log ('end' ); } const timer = new Promise ((resolve ) => { console .log ('timer start' ); setTimeout (() => { console .log ('middle' ); resolve (); }, 3000 ); }) test ();
异步的并发限制和超时控制 异步解决方案成熟的第三方库有async、Step等。
Node中的异步调用有时需要控制并发数量，防止底层系统的性能出问题，一种思路是创建一个队列，每个异步调用顺序存入。设定最大并发数，如果当前活跃的异步调用数量小于最大并发数，直接取出执行，如果大于最大数量，则暂存在队列中，顺序取出调用。 超时控制可以给异步调用设置一个时间阈值，如果异步调用没有在规定时间内完成，则提示超时。 参考资料 《深入浅出Node.js》ECMAScript6入门——Promise对象
]]>
https://github.com/wz71014q/2019/05/23/js%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/
2019-05-23T12:00:00.000Z
异步编程是JS中必备的一部分。由于JS是单线程，如果全部事件都顺序执行会阻塞进程。所以一些耗时较长的事件采用异步方式进行。这里记录一些《深入浅出Node.js》笔记，有些地方没有碰到过，不理解，后续完善。
异步编程的一些问题：
异常处理
1 2 3 4 5 6 7 try { JSON .parse (json); } catch (e) { console .error (e); } finally { console .log ("finally" ); }
现在有一个异步方法：
1 2 3 4 5 6 7 8 const async = function (callback ) { process.nextTick (callback); } try { async (callback); } catch (e) { console .error (e); }
这里调用async()方法只能捕获async方法的异常，但是回调callback的异常却无法捕获
]]>
js基础之异步编程解决方案
2026-05-15T08:53:54.865Z
Qiang
多线程语言容易发生的一个问题是线程之间状态不同步。比如有两个线程A和B，A线程要对一个资源进行删除操作，B线程要对一个资源进行修改操作，这时候两个线程容易发生冲突。JS是单线程语言，貌似不会发送这种情况，但是真的如此吗？请看下面这个情况，这是在处理公司业务时碰到的，具体代码无法透漏：总结：多线程事件如框架组件内部数据更新、git协作开发等合作事件，最重要的是找出共享资源，理清楚操作方和他们之间的关系，再进行工作协调，保证每次只有一方在操作共享资源，保证所有状态同步。
]]>
https://github.com/wz71014q/2019/05/23/%E4%BA%92%E6%96%A5%E9%94%81/
2019-05-23T12:00:00.000Z
多线程语言容易发生的一个问题是线程之间状态不同步。比如有两个线程A和B，A线程要对一个资源进行删除操作，B线程要对一个资源进行修改操作，这时候两个线程容易发生冲突。JS是单线程语言，貌似不会发送这种情况，但是真的如此吗？请看下面这个情况，这是在处理公司业务时碰到的，具体代码]]>
互斥锁
2026-05-15T08:53:54.866Z
Qiang
二叉树是最常见的数据结构之一，很多复杂问题（二叉搜索树、堆、Trie）都是在二叉树基础上扩展的。本文总结二叉树的核心操作和常见题型。二叉树的遍历 遍历是二叉树最基本的操作，分为深度优先（DFS）和广度优先（BFS）两大类。
前序遍历（Preorder）：根 → 左 → 右 1 2 3 4 function preorder (root ) { if (!root) return []; return [root.val , ...preorder (root.left ), ...preorder (root.right )]; }
中序遍历（Inorder）：左 → 根 → 右 1 2 3 4 function inorder (root ) { if (!root) return []; return [...inorder (root.left ), root.val , ...inorder (root.right )]; }
中序遍历二叉搜索树（BST）会得到一个有序序列，这是一个很重要的性质。
后序遍历（Postorder）：左 → 右 → 根 1 2 3 4 function postorder (root ) { if (!root) return []; return [...postorder (root.left ), ...postorder (root.right ), root.val ]; }
层序遍历（Level Order）：逐层从左到右 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function levelOrder (root ) { if (!root) return []; const result = []; const queue = [root]; while (queue.length ) { const len = queue.length ; const level = []; for (let i = 0 ; i < len; i++) { const node = queue.shift (); level.push (node.val ); if (node.left ) queue.push (node.left ); if (node.right ) queue.push (node.right ); } result.push (level); } return result; }
DFS（Depth-First Search） DFS 指的是「一路走到头再回头」的搜索方式，二叉树的前序、中序、后序遍历都是 DFS 的具体形态。区别在于访问根节点的时机。
1 2 3 4 5 6 7 8 9 function dfs (node ) { if (!node) return ; dfs (node.left ); dfs (node.right ); }
DFS 也可以写成非递归（用栈模拟），核心思想是手动维护一个栈来模拟系统调用栈：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 function preorderIterative (root ) { if (!root) return []; const stack = [root]; const result = []; while (stack.length ) { const node = stack.pop (); result.push (node.val ); if (node.right ) stack.push (node.right ); if (node.left ) stack.push (node.left ); } return result; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function inorderIterative (root ) { const stack = []; const result = []; let node = root; while (stack.length || node) { while (node) { stack.push (node); node = node.left ; } node = stack.pop (); result.push (node.val ); node = node.right ; } return result; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function postorderIterative (root ) { if (!root) return []; const stack = [root]; const result = []; while (stack.length ) { const node = stack.pop (); result.push (node.val ); if (node.left ) stack.push (node.left ); if (node.right ) stack.push (node.right ); } return result.reverse (); }
三种非递归遍历总结：
遍历方式 栈用法 核心思路 前序 根压栈 → 弹出访问 → 右左压栈 右先入栈，左后出 中序 一路左压栈 → 弹出 → 转向右 用 while 走到底再回头 后序 根压栈 → 弹出记录 → 左右压栈 → 反转 前序变体 + reverse
BFS（Breadth-First Search） BFS 是「一层一层扫」的搜索方式，对应二叉树的层序遍历。BFS 通常用队列实现。
BFS 有两个常见变体：
逐层输出 ：上面 levelOrder 的例子，每一层一个数组求最短路径 ：BFS 首次到达目标节点时走过的路径一定最短1 2 3 4 5 6 7 8 9 10 11 function minDepth (root ) { if (!root) return 0 ; const queue = [[root, 1 ]]; while (queue.length ) { const [node, depth] = queue.shift (); if (!node.left && !node.right ) return depth; if (node.left ) queue.push ([node.left , depth + 1 ]); if (node.right ) queue.push ([node.right , depth + 1 ]); } }
序列化与反序列化 序列化是把二叉树转换成字符串（或数组），反序列化是把字符串还原回二叉树。主要用于数据传输和缓存。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function serialize (root ) { if (!root) return '#' ; return root.val + ',' + serialize (root.left ) + ',' + serialize (root.right ); } function deserialize (str ) { const list = str.split (',' ); function build ( const val = list.shift (); if (val === '#' ) return null ; const node = new TreeNode (Number (val)); node.left = build (); node.right = build (); return node; } return build (); }
也可以用层序遍历做序列化，结果更直观：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function serializeLevel (root ) { if (!root) return '[]' ; const queue = [root]; const result = []; while (queue.length ) { const node = queue.shift (); if (node) { result.push (node.val ); queue.push (node.left ); queue.push (node.right ); } else { result.push ('#' ); } } while (result[result.length - 1 ] === '#' ) result.pop (); return JSON .stringify (result); }
二叉树与链表的关系 二叉树和链表有很深的联系：
单链表可以看作只有右子树的二叉树 ——每个节点只有一个 next 指针，相当于二叉树节点只有 right child二叉搜索树中序遍历得到有序链表 ——这常被用来「展平」二叉搜索树链表 + 随机指针就是二叉树 ——每个节点有两个额外指针（left/right），就是二叉树结构1 2 3 4 5 6 7 8 9 10 11 12 13 function flatten (root ) { if (!root) return ; flatten (root.left ); flatten (root.right ); const right = root.right ; root.right = root.left ; root.left = null ; let node = root; while (node.right ) node = node.right ; node.right = right; }
这种联系在题目中经常出现，本质上都是把树结构转换成线性结构 来方便处理。
]]>
https://github.com/wz71014q/2019/05/23/%E7%AE%97%E6%B3%95-%E4%BA%8C%E5%8F%89%E6%A0%91%E6%80%BB%E7%BB%93/
2019-05-23T12:00:00.000Z
二叉树是最常见的数据结构之一，很多复杂问题（二叉搜索树、堆、Trie）都是在二叉树基础上扩展的。本文总结二叉树的核心操作和常见题型。
二叉树的遍历 遍历是二叉树最基本的操作，分为深度优先（DFS）和广度优先（BFS）两大类。
前序遍历（Preorder）：根 → 左 → 右 1 2 3 4 function preorder (root ) { if (!root) return []; return [root.val , ...preorder (root.left ), ...preorder (root.right )]; }
中序遍历（Inorder）：左 → 根 → 右 1 2 3 4 function inorder (root ) { if (!root) return []; return [...inorder (root.left ), root.val , ...inorder (root.right )]; }
算法——二叉树总结
2026-05-22T05:11:46.962Z
Qiang
动态规划（Dynamic Programming，DP）与递归常常可以一起使用。核心思想是：将大问题拆成小问题，先解决小问题，再根据小问题的解推导出大问题的解 。关键是要找到状态定义和状态转移方程。递归 递归是 DP 的基础——一个问题可以拆成若干个结构相同的子问题。比如爬楼梯：到第 n 级台阶，要么从 n-1 跨一步上来，要么从 n-2 跨两步上来。所以：
用递归直接写：
1 2 3 4 function climb (n ) { if (n <= 2 ) return n; return climb (n - 1 ) + climb (n - 2 ); }
但有大量重复计算——climb(5) 会计算 climb(3) 两次。DP 就是来消除这些重复的。
初始状态（Base Case） 递归需要终止条件，DP 需要初始状态。找初始状态就是问：问题最小到什么程度可以直接得出答案？
爬楼梯：f(1) = 1，f(2) = 2 最大子序和：dp[0] = nums[0]，第一个元素的最大子序和就是它自己 斐波那契：fib(0) = 0，fib(1) = 1 状态转移方程 这是 DP 的核心——当前状态怎么从前面的状态推导过来 。写好方程，代码就是照着翻译。
问题 状态定义 转移方程 爬楼梯 dp[i] 表示到第 i 阶的方法数dp[i] = dp[i-1] + dp[i-2]最大子序和 dp[i] 表示以 i 结尾的最大子序和dp[i] = max(nums[i], dp[i-1] + nums[i])斐波那契 dp[i] 表示第 i 个斐波那契数dp[i] = dp[i-1] + dp[i-2]
爬楼梯完整实现 1 2 3 4 5 6 7 8 function climbStairs (n ) { if (n <= 2 ) return n; const dp = [0 , 1 , 2 ]; for (let i = 3 ; i <= n; i++) { dp[i] = dp[i - 1 ] + dp[i - 2 ]; } return dp[n]; }
最大子序和完整实现 1 2 3 4 5 6 7 8 9 10 function maxSubArray (nums ) { if (!nums.length ) return 0 ; const dp = [nums[0 ]]; let max = dp[0 ]; for (let i = 1 ; i < nums.length ; i++) { dp[i] = Math .max (nums[i], dp[i - 1 ] + nums[i]); max = Math .max (max, dp[i]); } return max; }
状态压缩（空间优化） 很多 DP 问题中，当前状态只依赖前几个状态，不需要保留整个 dp 数组，用几个变量滚动更新即可。
1 2 3 4 5 6 7 8 9 function climbStairs (n ) { if (n <= 2 ) return n; let prev = 1 , curr = 2 ; for (let i = 3 ; i <= n; i++) { [prev, curr] = [curr, prev + curr]; } return curr; }
1 2 3 4 5 6 7 8 9 10 function maxSubArray (nums ) { if (!nums.length ) return 0 ; let prev = nums[0 ], max = prev; for (let i = 1 ; i < nums.length ; i++) { prev = Math .max (nums[i], prev + nums[i]); max = Math .max (max, prev); } return max; }
最优解 DP 求的是最优子结构 ——如果子问题是最优的，那么组合出来的父问题也是最优的。区分 DP 和贪心：
贪心 ：每一步选当前最优，不考虑未来DP ：枚举所有可能的状态，通过状态转移方程找到全局最优 比如爬楼梯求的是「方法数」，不是最优值，严格来说属于计数型 DP。求最优值的典型问题是最大子序和。
题目 爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶？
思路 ：到第 n 阶 = 到第 n-1 阶再跨 1 步 + 到第 n-2 阶再跨 2 步，即斐波那契数列。
1 2 3 4 5 6 7 8 function climbStairs (n ) { if (n <= 2 ) return n; let a = 1 , b = 2 ; for (let i = 3 ; i <= n; i++) { [a, b] = [b, a + b]; } return b; }
最大子序和 给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。
思路 ：对于每个位置 i，要么自己单独成子数组，要么加入前面的子数组。取较大的那个。
1 2 3 4 5 6 7 8 9 10 function maxSubArray (nums ) { if (!nums.length ) return 0 ; let prev = nums[0 ]; let max = prev; for (let i = 1 ; i < nums.length ; i++) { prev = Math .max (nums[i], prev + nums[i]); max = Math .max (max, prev); } return max; }
https://github.com/wz71014q/2019/05/23/%E7%AE%97%E6%B3%95-%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/
2019-05-23T12:00:00.000Z
动态规划（Dynamic Programming，DP）与递归常常可以一起使用。核心思想是：将大问题拆成小问题，先解决小问题，再根据小问题的解推导出大问题的解 。关键是要找到状态定义和状态转移方程。
递归 递归是 DP 的基础——一个问题可以拆成若干个结构相同的子问题。比如爬楼梯：到第 n 级台阶，要么从 n-1 跨一步上来，要么从 n-2 跨两步上来。所以：
算法——动态规划
2026-05-22T05:08:43.380Z
Qiang
《JS高级程序设计》中说JS的继承有原型链、构造函数、组合式、原型式、寄生式、寄生组合式继承，加上ES6的class继承，一共有7种方式。前6种最关键的是搞清楚构造函数、原型对象、原型链的关系，其他模式都是这些的组合。构造函数 构造函数也是函数，跟普通函数的没什么区别，但是可以用new()方法创建实例
e.g.
1 2 3 4 5 function Animal (name, legCount ) { this .name = name; this .legCount = legCount; } const cat = new Animal ('Tom' , 4 );
原型对象 每个函数都有一个prototype属性（对象没有这个属性），指向一个原型对象，即Animal.prototype( 这玩意是个对象，名字就叫Animal.prototye )
Animal.prototype默认有个constructor属性，这个对象的constructor属性指向该对象对应的构造函数，即Animal()。
1 2 3 4 5 6 console .log (Animal .prototype { constructor : ƒ Animal (name ,leg), __proto__ : Object }
注意：Animal()函数内部定义了name、age属性，但是Animal.prototype对象是没有这些属性的，只有默认的constructor属性，除非在原型上定义其他属性:
1 2 3 4 5 6 7 8 Animal .prototype speak = 'miao' console .log (Animal .prototype { constructor : ƒ Animal (name ,leg), speak : 'miao' , __proto__ : Object }
这时创建一个Animal实例：
1 const dog = new Animal ('light' , 4 );
dog对象有一个[[prototype]]属性，指向该实例对象的原型对象，[[prototype]]可以用__proto__访问，即dog.__proto__ = Animal.prototype
class 没有class之前，生成实例都是用构造函数, es6中引入了class概念，可以像C++等直接用class关键字来定义类
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 class Animal { species = 'bird' ; constructor (name, age ) { this .name = name; this .age = age; this .Height = 100 ; } speak ( return this .name + ', speak' ; } static voice ( return 'this is my voice' ; } get height () { return this .Height * 3 ; } set height (val ) { this .Height += val; } } const cat = new Animal ('Tom' , 18 );console .log (cat, cat.speak (), Animal .voice ());Animal { name : 'Tom' , age : 18 , Height : 100 } cat.__proto__ = { constructor : f Aniaml (name, age), speak : f speak ( height : 300 , get height : f ( set height : f (val ) {}, __proto__ : Object }
构造函数式继承 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function Person (name, age ) { this .name = name; this .age = age; this .hand = 'hand' ; } function Child (name, age ) { Person .call (this , name, age); } const tom = new Child ('Tom' , 10 );{ name = 'Tom' ; age = 10 ; hand = 'hand' ; }
原型链式继承 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 function Animal ( this .action = 'move' ; this .speak = 'speak' ; } Animal .prototype hasLeg = 'true' ;function Cat ( this .name = 'cat' ; } Cat .prototype new Animal ();Cat .prototype height = 50 ;const tom = new Cat ();{ name : 'cat' , __proto__ : Animal } { action : "move" , height : 50 , speak : "speak" , __proto__ : Object } { hasleg : 'true' , constructor : ƒ Animal (), __proto__ : Object }
class继承 class的继承有专门的语法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 class Animal { speak = 'bar' ; constructor ( this .name = 'Animal' ; this .age = 15 ; this .Height = 100 ; } } class Dog extends Animal { constructor (...args ) { super (...args); this .speak = 'bar' ; } dogSpeak ( return super .speak (); } } console .log (dog);
class的继承是将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。也就是只有先调用super，才能够使用this.
参考资料 《ECMAScript 6入门》– 阮一峰
]]>
https://github.com/wz71014q/2019/05/09/js%E5%9F%BA%E7%A1%80%E4%B9%8B%E7%BB%A7%E6%89%BF/
2019-05-09T12:00:00.000Z
《JS高级程序设计》中说JS的继承有原型链、构造函数、组合式、原型式、寄生式、寄生组合式继承，加上ES6的class继承，一共有7种方式。前6种最关键的是搞清楚构造函数、原型对象、原型链的关系，其他模式都是这些的组合。
构造函数 构造函数也是函数，跟普通函数的没什么区别，但是可以用new()方法创建实例
e.g.
1 2 3 4 5 function Animal (name, legCount ) { this .name = name; this .legCount = legCount; } const cat = new Animal ('Tom' , 4 );
原型对象 每个函数都有一个prototype属性（对象没有这个属性），指向一个原型对象，即Animal.prototype( 这玩意是个对象，名字就叫Animal.prototye )
Animal.prototype默认有个constructor属性，这个对象的constructor属性指向该对象对应的构造函数，即Animal()。
1 2 3 4 5 6 console .log (Animal .prototype { constructor : ƒ Animal (name ,leg), __proto__ : Object }
js基础之继承
2026-05-15T08:53:54.866Z
