写在最前

经过二次争取，终于转岗产品啦。
作为小白一枚(而且好像没人带我T^T)，决定给自己定好学习计划，就算野蛮生长也要长得壮壮实实~

产品经理到底是什么

这节是我后来加的，也在工作过程中不断修改，因为每个阶段自己对产品经理的定义都会有变化。因此我会强调，现阶段的我是如下理解产品经理的。

我将产品经理拆分成产品和经理两个词来解读。

产品本质上是解决某个问题的东西。这里面包含三点。

• “某个”说的是定位，要求定位清晰，找到明确的切入点；
• “问题”则可具体拆分成谁的问题（用户），问题的核心是什么（需求），以及是何时何地、何种条件下的问题（场景）；
• “东西”则是解决方案，需要输出具体的实物或服务来解决问题。

经理原意为负责经营管理的人，而这里的经理更多指的是要能够带领和鼓舞一个团队，让团队在高效的时间内推出产品。

综上，我对产品经理的理解是，带领产品团队，高效解决明确定位的用户问题，输出解决方案。

产品经理需要做什么

参考《产品经理入门指南》，产品经理的工作涉及到了以下多个方面。

产品经理需要具备的特征

• 拥有很强的综合能力
  包括但不限于以下这些——

  

• 对各领域专业知识要有自己的理解

• 精力、体力要非常充沛

• 热爱
  真正热爱这个职业，热爱互联网，热爱生活，有责任感，想要为这个世界/这个时代做点儿什么。

能力培养

产品能力

产品思维能力

产品经理需要能高效、快速解决生活中或工作中的复杂问题，提出合理的解决方案。而对于思维方式，可遵循以下几点来锻炼——

1. 搜集客观、准确的数据；
2. 通过数据得出结论；
3. 通过结论分析你的工作方法是否正确，是否需要优化；
4. 得出一个最好的处理方法，或者形成系统的工作方法。

市场能力

沟通能力

产品经理需要具有敏锐的观察和判断能力，能在产品谈判过程中根据现场情况进行决策，掌握谈判主动权。
在日常的工作中，努力做到以下两点——

1. 学习沟通技巧和表达能力；
2. 深刻理解并协助团队小伙伴，获得他们的信任(!important)。

典型举例：如何与RD（研发）有效沟通

• 眼观四路，耳听八方
  积攒各领域知识，把握行业动态及趋势，让程序员觉得你很厉害很靠谱。
• 混对圈子，积攒人脉
  和更优秀的程序员合作。
• 逻辑逻辑逻辑
  重要的事情说三遍，无论是口述的需求还是撰写的文档，文字和原型图的呈现都要有逻辑，把功能细节处理得无一遗漏。
• 勇于担当
  在老板责问为什么还没上线的时候，冲上前去说，“都是我的错，前几天又改了个需求”。
  在RD们被各种部门的需求同时袭击的时候，为他们安排最合理的优先级，并承诺担起一切后果（包括被某部门主管批斗责骂等）。
• 投其所好
  招到漂亮的实习生妹子给RD们养眼，如果可能的话，给他们加薪等等等等。

运营能力

项目管理与协调

产品项目团队意味着产品经理必须具备管理统筹能力。而团队中又会包括研发、运营、测试、设计等各种不同职位的人，又要求产品经理具有一定的综合能力。
这就要求产品经理具备管理能力、处理团队人际关系的能力、统筹大

技术转岗的优劣势

这个问题，是针对我自身来写的，一般技术转产品，会有以下一些优势和劣势——

而就我个人而言，因为有对设计交互的学习和自身的性格，对自己的感受度、审美能力和沟通能力还算比较自信，主要会对商业能力和用户理解力的缺陷上更加注重培养一些。
并且对于优势里提到的第4点，我个人认为虽然能考虑从到技术实施确实有优点，但对技术的深刻理解反而可能局限产品设计，因此有时倒觉得应该适当脱离掉自己的技术思维。

拓展

亚文化

整体流程

在一个采用 Scrum 的项目中，首先要将所有需要完成的工作列在一个 Product Backlog 中，项目开发过程中需求的改变也要写进去。

在每个 Sprint 开始之前，要召开一个 Sprint 计划会议。在这个会上，产品责任人（Product Owner）为 Product Backlog 中的各项功能需求确定优先级。

随后，Scrum 开发团队按照优先级，从 Product Backlog 中挑选出他们认为能在这个 Sprint 中完成的任务，并把这些任务从 Product Backlog 中挪到 Sprint Backlog 中去。

在 Sprint 的进行过程中，Scrum 团队每天都要举行一个简短的每日 Scrum 会议，以便团队成员了解开发进度。

一个 Sprint 结束之后，需要召开 Sprint 评审会议。开发团队在会上把这个 Sprint 的开发成果展示给大家。

另外需要有一个 Sprint 回顾会议，团队成员们会回顾刚刚过去的这个 Sprint，从中总结经验和教训。

产品 Backlog

产品 Backlog 指根据初始需求分解出的任务列表，包括功能性的和非功能性的所有功能，由 Product Owner 为 Product Backlog 中的任务确定优先级别，当开发团队开始某个任务的时候，再精确定义和分解这个任务。

例子

User Story

User Story 即为某个任务的描述，可采用通用公式：作为<某个角色>，我可以<做什么>，以完成<什么目的>。

更详细的实现细节需要在 Sprint 开始前确定下来。

Story Point

Story Point 即为任务的工作量。每一个任务都应让所有人一起参与工作量评估，直到大家的意见达成统一后确定。

Sprint 开始前

制定 Sprint Goal

Sprint Goal 用于让整个团队明确该 Sprint 最重要的是什么，必须是实实在在的。

确定 Sprint 周期

通常为两周 - 两个月，视具体情况而定。

Sprint 计划会议

把每个 Sprint 的要做的工作从 Product Backlog 中按照优先级顺序排序，确定需求，将任务进一步分解，如人员分工等。

团队成员的技能培训、环境搭建等是要在做 Sprint 计划时就考虑在内的。

每日 Scrum 会议

三个问题

每日的 Scrum 会议需回答三个问题——

• 昨天都做了什么
• 今天打算做什么
• 遇到哪些问题

这是团队成员之间的交流，也是相互的承诺，主要通过三个问题使同步团队信息，并不是用来向老板汇报工作进度的。

团队成员们遇到的问题可以在会上提出来，而有能力解决这些问题的人可以在会后帮助他们解决问题，使会议控制在15分钟内。

任务板

每日都需要对当前任务板进行准确的更新。

可通过燃尽图更好地观察项目情况。

Sprint 评审会议

Sprint 评审会议在 Sprint 结束时召开，由开发团队展示这个 Sprint 中完成的功能，长度为两个小时左右，不需要 PPT，一般是已经完成功能的 Demo，而且所有对该产品感兴趣的人都可以参加。

演示时不谈技术，单纯展示功能。

Sprint 回顾会议

Sprint 回顾会议由产品责任人、Scrum 团队和 Scrum Master 参加。Scrum Master 首先给大家看 Sprint Backlog，总结这个 Sprint，大家讨论在这个 Sprint 中发生的一些比较重要的事件。

与会人员轮流发言，每个人都有机会发表自己的意见：他认为哪些方面做得好、哪些方面需要改进、如何改进等。还要对比 Sprint Backlog 中各个 Story 的估计值与它们的实际完成时间，如果差距太大，就应该好好分析出现这种情况的原因。

在会议即将结束之前，Scrum Master 总结会上的讨论成果，即“团队如何才能在下个 Sprint 中做得更好”。

其他准备

• 使用工具
• 如何结合测试

今天被问到一个http header的问题，一脸懵逼，连问题本身都没理解。后来查了一下，才反应过来”原来是在问这个😨”。

其实本身是很基础的点，但之前确实没有太过关注。不过看了下，小小一串header还是可以涉及到很多方面的，赶紧整理了一波。

Accept

作用：指明浏览器可以接受的媒体类型。
常见的有text/html、text/javascript, */*(所有类型)等

补充：如果服务器无法返回对应类型的数据,服务器应该返回一个406错误(Not Acceptable)

Accept-Encoding：

作用：浏览器声明自己接收的编码方法，通常指定压缩方法（gzip，deflate等）。

注：这不是指字符编码

补充：http压缩过程

1. 浏览器发送request给Web服务器，header中使用Accept-Encoding:gzip告诉服务器，浏览器支持压缩；
2. Web服务器接到请求后，生成原始的response，其中有原始的Content-Type和Content-Length；
3. Web服务器通过Accept-Encoding:gzip，来对response进行编码， 编码后header中有Content-Type和Content-Length(压缩后的大小)， 并且增加了Content-Encoding:gzip，然后发送给浏览器。
4. 浏览器接到Response后，根据Content-Encoding:gzip来对response 进行解码。获取到原始response后，然后显示出网页。

补充：gzip是如何压缩的
简单来说，gzip压缩是在一个文本文件中找出类似的字符串，并临时替换他们，使整个文件变小。
这种形式的压缩对Web来说非常适合，因为HTML和CSS文件通常包含大量的重复的字符串，例如空格、标签。

Accept-Language

作用：浏览器声明自己接收的语言。
语言跟字符集的区别：中文是语言，中文有多种字符集，比如big5，gb2312，gbk等等；
例如：Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

Connection

• Connection: keep-alive
  当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接
• Connection: close
  代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭， 当客户端再次发送Request，需要重新建立TCP连接。

Host（必需）

作用：请求报头域主要用于指定被请求资源的主机和端口号，它通常从URL中提取出来。

Referer

作用：告诉服务器我是从哪个页面链接过来的。
服务器可以由此获得一些信息用于处理。比如从我主页上链接到一个朋友那里，他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。

User-Agent

作用：指明客户端使用的操作系统和浏览器的名称和版本。
例如： User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)

Cache-Control

我们网页的缓存控制是由HTTP头中的“Cache-control”来实现的，常见值有private、no-cache、max-age、must-revalidate等，默认为private。这几种值的作用是根据重新查看某一页面时不同的方式来区分的：

• 打开新窗口
  值为 private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。
  而如果指定了max-age值（单位为秒），那么在此值内的时间里就不会重新访问服务器。

• 在地址栏回车
  值为 private 或 must-revalidate 则只有第一次访问时会访问服务器，以后就不再访问。
  值为no-cache，那么每次都会访问。
  值为max-age，则在过期之前不会重复访问。

• 按后退按扭
  值为 private、must-revalidate、max-age，则不会重新访问。
  值为no-cache，则每次都重复访问。

• 按刷新按扭
  无论为何值，都会重复访问。

Cookie

作用：存储一些用户信息以便让服务器辨别用户身份。

If-Modified-Since

作用：把浏览器端缓存页面的最后修改时间发送到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。
如果时间一致，那么返回304，客户端就直接使用本地缓存文件。如果时间不一致，就会返回200和新的文件内容。客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示在浏览器中.

If-None-Match

作用：If-None-Match 和 ETag 一起工作，工作原理是在 HTTP Response 中添加 ETag 信息。当用户再次请求该资源时，将在 HTTP Request 中加入 If-None-Match 信息(ETag的值)。
如果服务器验证资源的 ETag 没有改变（该资源没有更新），将返回一个304状态告诉客户端使用本地缓存文件。否则将返回200状态和新的资源和Etag。

q=qvalue

作用：描述了客户端对于某种媒体类型的喜好系数，该值的范围是0-1。默认为1。
例如：Accept: text/plain; q=0.5, text/html, text/x-dvi; q=0.8, text/x-c
该句可理解为text/html 和 text/x-c 是最喜爱的媒体类型，但是如它们不存在，那么发送text/x-dvi 实体，但如果 text/x-dvi 也不存在，那么发送 text/plain 实体。

特点

• 微服务粒度
• 独立进程
• 围绕业务建模
• 轻量级通信（独立部署）
• 去中心化的管理

如何设计

整体设计

• 水平分层（先）
• 垂直业务拆分（在水平基础上）

每层设计

• 微服务（业务单元垂直拆分）
• 无状态化
• 独立进程、部署、运维

高可用

• 冗余
• 自动恢复

柔性设计

系统降级

拒绝部分请求

1. 拒绝老请求

• 减轻微服务请求处理数量
• 确保新请求正常响应
• RPC队列方式

1. 优先级请求方式

• 非核心请求直接丢弃

1. 随机拒绝方式

• 随机丢弃一定比例请求

关闭部分服务

围绕业务决定。

数据层降级

更新请求

• 持久到消息队列
• 只更新缓存

读请求

• 读缓存

数据补齐

• 消息队列->数据库（恢复）

实现

Spring Cloud

写在最前

在我心里，表格是个很神奇的玩意。初始看来简简单单、条条框框几笔，但真要设计实现起来，从信息的展示、操作的体验、场景的适用，需要注意很多细节。

工作一年多的时间里，从前端写到后台，对表格的需求量一直很大，这阵子准备重写我们后台的表格组件，说说自己的设计思路，给它来一波变形记~

变形前原貌

这次的变形记主角是用于后台的一款表格组件，供操作人员来查看筛选数据。

它主要分为上部的查询条件区域、中部的列表区域以及底部的分页区域，大致是长下面这样子的（为了保护当事人，我为它打上了部分马赛克嘻嘻）。

在先前的使用过程中，我首先觉得这个组件存在两个直观缺陷。

• 无用信息篇幅过大
  查询条件区域中的各个条件没有细分归类，粗暴地将需要的所有条件选项直接堆砌。而现实场景中一些选项不光不常用到，有时还导致该区域占用面积大，直接影响到下面列表的显示区域。

• 列表展现冗杂
  列表区域展现形式和查询区域类似，字段过多却不常用，占用篇幅过大。

变形前的思考

既然要变形，那当然是首先要改正原来的缺陷。不过只以查缺补漏的心态设计的话应该是不够的，顺便想了想，用户到底想要一个什么样的表格组件。

结合自身想法和用户平日反馈，总结了两个小目标。

• 高效的搜索
• 清晰的展示

形象设计

写这个段落标题的时候，突然觉得自己有种理发师的既视感，那就开始为客户构想一下新形象吧。

高效搜索

我将查询区域简化为一个搜索输入框+一个筛选按钮。

搜索输入框主要包含以下特征。

• 支持多字段模糊查询
  用户可在输入框中输入不同的字段相关信息进行搜索，而不是像以往那样每个字段对应一个输入框。达成由多化一的效果，增强了搜索的功能力度，同时节省了查询区域的占用面积。

• 外观遵循常规设计
  该搜索框与业界的常规设计保持一致，将搜索按钮以图标的形式放在输入框内部，在外观上避免与右侧筛选按钮重复，更加美观简洁。此种常规设计也保证了用户的直接理解。除了点击搜索图标外，也支持响应回车键搜索。

• 提供placeholder
  从产品设计上来说，输入框并不需要支持记录所有字段的搜索。用户最常用的名称/ID等字段已经能覆盖绝大多数搜索需求，其他需要且适合通过输入搜索的字段，在实际场景中并不多。因此在输入框内给用户提供可搜索的字段提示，在不影响用户体验的情况下，也从技术开发层面有效限制了字段。

筛选按钮看似孤零零一个人杵在那，实体部分其实会位于窗口右侧。

用户点击筛选按钮时，筛选窗口会从浏览器右侧弹出。其中包含上方的操作按钮区与下方的条件筛选区。

操作按钮在窗口采用固定布局，即使筛选窗口上下滚动时，按钮都固定在窗口，方便用户随时可以操作。

而筛选条件采用简单的表单部件展现筛选项。

之前因为过多查询条件占了太多地方，尤其在小窗口下，列表区域容易被挤成很小一道地方，常被操作人员吐槽。当时最直接的方案是如下图加了一个收缩功能，可以在不需要的时候将查询区域暂时最小化，从纵向上减少了占用面积。

然而之所以决定用右侧这种方式，首先是因为当查询区域没有最小化时，下方的列表区域还是会压榨下方列表区域的生存空间。其次是因为对于表格来说，重要字段一般位于列表前面几列，用户遵循了从左到右的查看模式。因此窗口从右侧弹出即使遮盖了部分列表内容，也不会造成太大的影响。

这个方式实际上模仿了淘宝的交互，在这个人人都是剁手党的时代，这种方式也十分符合大众的使用习惯。但不同点在于淘宝的重置和完成按钮位于页面下方，更符合移动端的使用方式，而此款组件往往用在PC端，更适合将按钮放在上方。

清晰展示

清晰展示主要是体现在列表区域。

针对该区域字段过多的问题，最简单的方法是直接不展示不重要的字段。这个方法看似轻易解决了问题，然而现实场景中，操作人员某时又需要查看所谓的不重要字段，这就产生了矛盾。于是我采用了下面这种方式。

这里的关键在于每行数据前面的”>”按钮，它用于展开每行数据的详细信息。列表主体只展示必要字段，其余字段默认隐藏，按下”>”时才显示给用户，解决了上文提出的矛盾点。

这个灵感来源于Elementui，个人觉得十分受用^o^

其他

在整个过程中，实际上我还是会考虑一些技术因素。

比如多字段模糊搜索是不是会影响搜索效率，又比如因为这实际上是一个组件的设计，采用的表单部件实际上只会是常用固定的几种，以方便代码配置。

最后还有一个分页，基本整体就是下面的形式（直接看图吧，小话痨感觉快写不动了T^T）。

写在最后

细细想来，之所以后台的表格组件做得粗糙，主要原因应该是后台产品基本面对的是企业内部，相比于2C的产品，对用户体验的注重程度上会偏低。

在开发过程中，也有对表格组件做过一两次优化，但之前更多停留在技术层面。因为本身是技术，还是容易受到技术思维的局限。另外也使用原先表格组件很长时间了，比较难跳出原来的模式。希望之后自己能通过学习和自我意识，在这方面逐步提高。

初次写这种产品相关的文章，诸多纰漏，欢迎大家来无情指正~~~（终于写完啦，溜了溜了）

回调地狱什么样

大概就是下面这个样——

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

N个回调函数组合成最后一麻麻的})，这就是回调地狱。

回调地狱，不约

扁平化！扁平化！扁平化！

第一版代码👇

1
2
3
4
5
6
7
8
9
10
11
12
13

var form = document.querySelector('form')
form.onsubmit = function (submitEvent) {
  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, function (err, response, body) {
    var statusMessage = document.querySelector('.status')
    if (err) return statusMessage.value = err
    statusMessage.value = body
  })
}

匿名函数起名字，函数声明移出来，biu~变身第一版代码👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

document.querySelector('form').onsubmit = formSubmit
function formSubmit (submitEvent) {
  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, postResponse)
}
function postResponse (err, response, body) {
  var statusMessage = document.querySelector('.status')
  if (err) return statusMessage.value = err
  statusMessage.value = body
}

模块化！模块化！模块化！

把下面这段代码单独放一个文件，比如叫formuploader.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

module.exports.submit = formSubmit
function formSubmit (submitEvent) {
  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, postResponse)
}
function postResponse (err, response, body) {
  var statusMessage = document.querySelector('.status')
  if (err) return statusMessage.value = err
  statusMessage.value = body
}

引入一下文件，又变身👇

1
2

var formUploader = require('formuploader')
document.querySelector('form').onsubmit = formUploader.submit

报错！报错！报错！

回调函数的特殊性质，决定了你有时比较难把握，其任务在哪一步发生了错误。因此建议处理每一次可能发生的报错。

1
2
3
4
5
6
7
8
9

var fs = require('fs')
fs.readFile('/Does/not/exist', handleFile)
function handleFile (error, file) {
    if (error) 
        return console.error('Uhoh, there was an error', error)
    // otherwise, continue on and use `file` in your code
}

Promise！Generator！Async！

这三者都属于更高级一些的解决方案，不过个人觉得打好基础再奔向高级会比较好一些~

写在最后

总结就是，我们切图仔很忙的，没时间去回调地狱玩。把代码写好，别让自己栽进去，也别让后期开发的小伙伴栽里面~

参考

• 大鱼的自我成长 — 回调地狱Callback Hell

数组去重

ES5

1
2
3
4
5

Array.prototype.distinct = function() {
    return this.filter(function(v, i) { 
        return this.indexOf(v) === i;
    }, this);
}

ES6

1
2
3

Array.prototype.distinct = function() {
    return Array.from(new Set(this));
}

哈希判断

1
2
3
4
5
6
7
8
9
10

Array.prototype.distinct = function() {
    var n = {}, r = []; // n为hash表，r为临时数组
    for (var i = 0; i < this.length; i++) {
        if (!n[this[i]]) { // 如果hash表中没有当前项
            n[this[i]] = true; // 存入hash表
            r.push(this[i]); // 把数组的当前项push到临时数组里面
        }
    }
    return r;
}

排序

sort函数

V8引擎中，sort函数给出了两种排序InsertionSort和QuickSort，数量小于10的数组使用InsertionSort，比10大的数组则使用QuickSort。

冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13

function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j+1]) { //相邻元素两两对比
                var temp = arr[j+1]; //元素交换
                arr[j+1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}

还有一个改进版。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function bubbleSort2(arr) {
    var i = arr.length - 1; //初始时,最后位置保持不变　　
    while (i > 0) {
        var pos= 0; // 每趟开始时,无记录交换
        for (var j = 0; j < i; j++){
            if (arr[j] > arr[j+1]) {
                pos = j; // 记录交换的位置
                var tmp = arr[j]; 
                arr[j] = arr[j+1];
                arr[j+1] = tmp;
　　　　　　  }
        }
        i = pos; // 为下一趟排序作准备
    }
    return arr;
}

选择排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function selectionSort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (var i = 0; i < len - 1; i++) {
        minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) { //寻找最小的数
                minIndex = j; //将最小数的索引保存
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}

插入排序

1
2
3
4
5
6
7
8
9
10
11
12

function insertionSort(array) {
    for (var i = 1; i < array.length; i++) {
        var key = array[i];
        var j = i - 1;
        while (array[j] > key) {
            array[j + 1] = array[j];
            j--;
        }
        array[j + 1] = key;
    }
    return array;
}

快速排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function quickSort(array, left, right) {
    if (left < right) {
        // x为本循环的末位值 i用作计数
        var x = array[right], 
            i = left - 1, 
            temp;
        for (var j = left; j <= right; j++) {
            if (array[j] <= x) {
                i++;
                temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
        }
        quickSort(array, left, i - 1);
        quickSort(array, i + 1, right);
    }、
    return array;
}

性能总结

二叉树

一言不合直接上代码~

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193

function BinaryTree (key) {
    let Node = function (key) { // 节点对象
        this.key = key;
        this.left = null;
        this.right= null;
    }
    let root = null; // 根
    // 插入节点
    let insertNode = function (node, newNode) {
        if (newNode.key < node.key) {
            if (node.left === null) {
                node.left = newNode;
            } else {
                insertNode(node.left, newNode);
            }
        } else {
            if (node.right === null) {
                node.right = newNode;
            } else {
                insertNode(node.right, newNode);
            }
        }
    };
    this.insert = function (key) {
        let newNode = new Node(key);
        if (root === null) { // 第一次
            root = newNode;
        } else {
            insertNode(root, newNode);
        }
    };
    // 中序遍历
    let inOrderTraverse = function (node, cb) {
        if (node !== null) {
            inOrderTraverse(node.left, cb); 
            cb(node.key);
            inOrderTraverse(node.right, cb); 
        }
    }
    this.inOrderTraverse = function (cb) {
       inOrderTraverse(root, cb); 
    }
    // 前序遍历（便于复制二叉树，效率高于直接插入的方式）
    let preOrderTraverse = function (node, cb) {
        if (node !== null) {
            cb(node.key);
            preOrderTraverse(node.left, cb); 
            preOrderTraverse(node.right, cb); 
        }
    }
    this.preOrderTraverse = function (cb) {
       preOrderTraverse(root, cb); 
    }
    // 后序遍历
    let postOrderTraverse = function (node, cb) {
        if (node !== null) {
            postOrderTraverse(node.left, cb); 
            postOrderTraverse(node.right, cb); 
            cb(node.key);
        }
    }
    this.postOrderTraverse = function (cb) {
       postOrderTraverse(root, cb); 
    }
    // 查找最小值
    let minNode = function (node) {
        if (node) {
            while (node && node.left !== null) {
                node = node.left;
            }
            return node.key;
        }
        return null;
    }
    this.min = function () {
        return minNode(root);
    }
    // 查找最大值
    let maxNode = function (node) {
        if (node) {
            while (node && node.right !== null) {
                node = node.right;
            }
            return node.key;
        }
        return null;
    }
    this.max = function () {
        return maxNode(root);
    }
    // 查找指定值
    let findNode = function (node, key) {
        if (node === null) {
            return false;
        }
        if (key < node.key) {
            return findNode(node.left, key);
        } else if (key > node.key) {
            return findNode(node.right, key);
        } else {
            return true;
        }
    }
    this.find = function (key) {
        return findNode(root, key);
    }
    // 删除节点
    let removeNode = function (node, key) {
        if (node === null) {
            return null;
        }
        if (key < node.key) {
            node.left = removeNode(node.left, key);
            return node;
        } else if (key > node.key) {
            node.right = removeNode(node.right, key);
            return node;
        } else {
            if (node.left === null && node.right === null) {
                node = null;
                return node;
            }
            if (node.left === null) {
                node = node.right;
                return node;
            } else if (node.right === null) {
                node = node.left;
                return node;
            }
            let aux = findMinNode(node.right);
            node.key = aux.key;
            node.right = removeNode(node.right, aux.key);
            return node;
        }
    }
    let findMinNode = function (node) {
        if (node) {
            while (node && node.left !== null) {
                node = node.left;
            }
            return node;
        }
        return null;
    }
    this.remove = function (key) {
        return removeNode(root, key);
    }
}
let nodes = [8, 3, 10, 1, 6, 14, 4, 7, 13];
let binaryTree = new BinaryTree();
nodes.forEach(function (key) {
    binaryTree.insert(key);
});
let cb = function (key) {
    console.log(key);
};
console.log('中序遍历');
binaryTree.inOrderTraverse(cb);
console.log('前序遍历');
binaryTree.preOrderTraverse(cb);
console.log('后序遍历');
binaryTree.postOrderTraverse(cb);
console.log('最小值', binaryTree.min());
console.log('最大值', binaryTree.max());
console.log(binaryTree.find(1));
console.log(binaryTree.find(100));

浏览器查找域名的IP地址

补充知识1：DNS优化

• DNS缓存
  具体有浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。
• DNS负载均衡

浏览器向服务器发送HTTP请求

补充知识2：cookie & sessionStorage & localStorage

共同点：都是保存在浏览器端，且同源的（session保存在服务端）。
区别见下表。

服务器处理请求并返回HTTP报文

当服务器进行返回时，若地址需要重定向，会返回状态码301。浏览器接收到后，会重新发送新的请求到重定向的地址。
服务器接收到请求后，即返回相应的HTML响应。

补充知识3：状态码

301 vs 302

两者都是重定向。

• 301(Moved Permanently):是在告诉搜索引擎，链接地址被永久的改变了。所有链向这个网站的链接都要被重定向到新的网站地址。
• 302(Moved Temporarily):暂时的重定向，搜索引擎会抓取新的内容而保留旧的网址。
  实际上，302重定向制造了重复内容，这也很好的解释了302劫持的原理。
  例如，一个不道德的人在他自己的网址A做一个302重定向到你的网址B。出于某种原因，Google搜索结果所显示的仍然是网址A，但是所用的网页内容却是你的网址B上的内容，这种情况就叫做网址URL劫持。

另外状态码303(See Other)和307(Temporary Redirect)都和302相似，但303明确表示客户端应采用GET方法获取资源，且301-302时几乎所有浏览器都会把POST改为GET请求，而307会遵照浏览器标准不进行修改。

200 vs 304

• 200(OK):请求正常处理。
• 304(Not Modified):资源已找到，但未符合条件请求，返回时不包含任何响应的主体部分。
  当客户第一次请求资源，服务器成功返回，这时状态码为200。所以，状态码为200的数据包往往包含用户从服务器获取的数据。
  而每个资源请求完成后，通常会被缓存在客户端，并会记录资源的有效时间和修改时间。当客户再次请求该资源，客户端首先从缓存中查找该资源。如果该资源存在，并且在有效期，则不请求服务器，就不会产生对应的请求数据包。
  如果不在有效期，客户端会请求服务器，重新获取。服务器会判断修改时间，如果没有修改过，就会返回状态码304，告诉客户端该资源仍然有效，客户端会直接使用缓存的资源。
  针对304的响应，渗透人员可以分析对应的请求包，获取资源路径。如果该资源不限制访问，就可以直接请求获取。否则，就需要进行Cookie劫持，进行获取。

其他常用状态码

浏览器解析渲染页面

步骤

当浏览器获得一个HTML文件后，会”自上而下”加载，并在加载过程中进行解析渲染。

• 浏览器将HTML文档的各标记转化为DOM节点，形成一棵DOM树；

• 同时将外部CSS以及样式元素中的样式数据，解析成CSS Rule Tree；

• 根据DOM树和CSSOM(CSS对象模型)来构造Rendering Tree（呈现树）。呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形，这些矩形的排列顺序就是它们将在屏幕上显示的顺序。也就是说，这时浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系；

  

• 呈现树构建完毕之后，进入布局处理阶段（Layout），计算出每个节点在屏幕中的确切位置。

• 绘制阶段（Painting），即遍历呈现树，将每个节点绘制出来。

  

两个概念

reflow回流

浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。
回流主要发生在

• 页面初始化
• 操作DOM
• 元素尺寸改变
• css属性改变

repaint重绘

如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。

考虑到性能，应尽量减少reflow和repaint。

一段可爱的描述

摘录自某大神博客（地址位于文章最后的参考）。

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2. 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4. 浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5. 浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
7. 浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞（style.display=”none”）。突然少了这么一个元素，浏览器不得不重新渲染这部分代码；
9. 终于等到了＜/html＞的到来，浏览器泪流满面……
10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；
11. 浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，”大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

意义

研究浏览器加载与渲染的过程，意义在于把握其中的细节，去更好更快地实现其过程。
对应整理了如下一些方法。

更少的HTTP请求

• 合并文件
• 雪碧图

减少DNS查询

由于DNS查找是需要时间的，而且它们通常都是只缓存一定的时间，所以应该尽可能地减少DNS查找的次数。
减少DNS查找次数，最理想的方法就是将所有的内容资源都放在同一个Domain下面，这样访问整个网站就只需要进行一次DNS查找，这样可以提高性能。
但理想总归是理想，上面的理想做法会带来另外一个问题，就是由于这些资源都在同一个域，而HTTP/1.1 中推荐客户端针对每个域只有一定数量的并行度（它的建议是2），那么就会出现下载资源时的排队现象，这样就会降低性能。
所以，折衷的做法是：建议在一个网站里面使用至少2个域，但不多于4个域来提供资源。

避免跳转

避免让浏览器发生重定向（301、302），尽量提供正确规范的跳转地址。

尽量使用GET请求

当使用XMLHttpRequest，POST会被浏览器实现为两步：首先发送头部，然后发送数据。所以使用GET最好，仅用一个TCP包发送（除非cookie太多）。

使用POST但不提交任何数据，和GET行为类似，但从语义上讲，获取数据应该用GET，提交数据到服务器用POST。

加Expires或者Cache-Control头部

• 静态组件：通过设置Expires头部来实现“永不过期”策略。
• 动态组件：用合适的Cache-Control头部来帮助浏览器进行有条件请求。

  如果设置了Expires头部，当组件更新后，必须更改文件名。

用没有cookie的域名提供组件

当浏览器请求静态图片并把cookie一起发送到服务器时，cookie此时对服务器没什么用处。所以这些cookie只是增加了网络流量，可以创建一个子域名来托管所有静态组件。
另外一个好处是，某些代理可能会阻止缓存待cookie的静态组件请求。

参考

• 席飞剑 — 浏览器加载和渲染html的顺序-css渲染效率的探究
• 陈希章@中国 - 优化网站设计（九）：减少DNS查找的次数

预加载

预加载可将图片预先加载到浏览器中，保证图片快速显示。
该方式适用于首屏轮播图、图库等场景，可通过设定恰当的预加载时机，起到很好的效果。

js实现

1
2
3
4

for (var i = imgs.length - 1; i >= 0; i--) {
    var imgObj = new Image();
    imgObj.src = imgs[i];
}

ajax实现

该方法利用DOM，不仅仅可以预加载图片，还能预加载CSS、JS。其优越之处在于JavaScript和CSS的加载不会影响到当前页面。

1
2
3
4
5
6
7
8
9
10
11
12
13

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000); // 1000毫秒是为了防止脚本挂起，而导致正常页面出现功能问题
};

懒加载

懒加载可将图片延时加载，通常使用于图片较多且分布于整个网页的场景下。

分类

懒加载可以分为——

• 延时加载
  使用setTimeout或setInterval进行加载延迟。
• 条件加载
  符合或者用户触发了某些条件，才开始异步加载。
• 可视区域加载
  仅加载用户可以看到的区域。

可视区域加载

实现原理是先把图片地址存储在img的自定义属性中，等到图片出现在可视区域内时，将自定义属性里的地址赋给src。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var imgs = document.querySelectorAll('img'); // 获取图片
var len = imgs.length; // 图片数量
var n = 0; // 存储图片加载到的位置，避免每次都从第一张图片开始遍历
window.onscroll = function() {
    var visibleH = document.documentElement.clientHeight; // 可视高度
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    for (var i = n; i < len; i++) {
        if (imgs[i].offsetTop < visibleH + scrollTop) {
            if (imgs[i].getAttribute('src') == '') {
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
            n = i + 1;
        }
    }
};

响应式图片

在逛XMind官网的时候无意中发现一个srcset属性。

1

<img src="src1.png" srcset="src2.png 2x, src3.png 3x" title="title-preview-zen-web" alt="img-preview-zen-web">

查阅了一下资料，发现该属性可以以最合适的src去匹配不同屏幕，2x/3x 表示目标屏幕的像素密度。

还有下面这种用法，400w/600w表示目标浏览器的宽度的限度，如浏览器宽度550w时，匹配600w的src。

1
2

<img src="source.jpg" width="100%"
  srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

参考

• 伯乐在线 — Javascript图片预加载详解

https

http的局限性

1. 明文传输；
2. 不验证身份（包括服务器和访问者）；
3. 没有数据完整性校验。

https机制

内容加密步骤

1. 使用非对称密钥加密方法来传输对称密钥（保证没有第三方可以获取到）
2. 第二步使用第一步中传输的对称密钥来进行消息加密（可使加密过程更加快速）

证书

证明通信双方的身份

完整性校验

保持数据的收发一致。

XSS

含义

维基百科这么解释——跨站脚本（Cross-site scripting，通常简称为XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。

我看完似懂非懂- -

又看了几种解释，才有了自己的思路。

比如有个坏人，在发帖的时候，发布了一段恶意的JavaScript代码(脚本注入)，而这个代码内容又请求了外部服务器(跨站)，就是所谓的XSS。

攻击方式

反射型

发出请求时，XSS代码出现在URL中，作为输入提交到服务端。服务器解析后响应，XSS代码随相应内容一起传回浏览器，最后浏览器解析执行XSS代码。

存储型

相较于反射型，存储型XSS提交的代码会存储在服务端，下次请求目标页面时不用再次提交。

防御措施

• 编码
  将用户输入的内容进行编码转义。

• 过滤（最重要）
  移除用户上传的DOM属性，如onerror等。
  移除用户上传的style、script、iframe节点等。

• 校正
  避免直接对HTML Entity解码。
  使用DOM Parse转换，校正不配对的DOM标签。

CSRF

含义

跨站请求伪造（Cross-site request forgery），通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。

攻击步骤

1. 登录受信任的网站A，并在本地生成cookie
2. 在不登出A的情况下，访问危险网站B

防御措施

总的思想在客户端页面增加伪随机值。

• Cookie Hashing 所有的表单都包含一个伪随机值
• 验证码
• 不同的表单包含一个不同的伪随机值