Coding-everyday

# 1. nginx, tomcat, apache 三者分别用来做什么，有何区别？

  1. Nginx和tomcat的区别
  • nginx常用做静态内容服务和代理服务器，直接外来请求转发给后面的应用服务器（tomcat，Django等），tomcat更多用来做一个应用容器，让java web app泡在里面的东西。
  • 严格意义上来讲，Apache和nginx应该叫做**HTTP Server，而tomcat是一个Application Server**是一个Servlet/JSO应用的容器。
  • 客户端通过HTTP Server访问服务器上存储的资源（HTML文件，图片文件等），HTTP Server只是把服务器上的文件如实通过HTTP协议传输给客户端。
  • 应用服务器往往是运行在HTTP Server的背后，执行应用，将动态的内容转化为静态的内容之后，通过HTTP Server分发到客户端。

注意：nginx只是把请求做了分发，不做处理！！！

  1. nginx 和 Apache 的区别
  • Apache是同步多进程模型，一个连接对应一个进程，而nginx是异步的，多个连接（万级别）可以对应一个进程。
  • nginx轻量级，抗并发，处理静态文件好
  • Apache超稳定，对PHP支持比较简单，nginx需要配合其他后端用，处理动态请求有优势
  • 建议使用前端nginx抗并发，后端apache集群，配合起来会更好

# 3. 后端任务

  1. 读写数据库
  2. 提供API

# 4. CTO往往由服务端工程师担任

  1. 需要设计整个公司的技术架构
  2. 全局考虑问题
  3. 掌握公司最重要的资产：数据（谁掌握数据，谁就有话语权）

# 5. 互联网常见架构：

  1. 双层结构：前端+服务端
  2. 三层结构：前端+后端+服务端。 这里服务端只负责操作数据，与业务无关，后端进行数据整合。

# 6. 前端架构

# 6.1.单页应用特点

  1. 所有内容都在前端生成
  2. JS承担更多的业务逻辑，后端只提供API
  3. 页面路由跳转不需要经过后端

backbone.js是比较早的单页应用类库

# 6.2.工程架构：

设计到的是模块化、工程化、自动化、规范化。

  1. 解放生产力（webpack）
  2. 围绕解决方案搭建环境
  3. 保证项目质量（代码规范，eslint）

参考资料：浅谈前端工程化 (opens new window)

# 6.3.项目架构

  1. 技术选型
  2. 数据解决方法（redux mobx）
  3. 整体代码风格（哪些数据存在redux中，哪些在state中）

# 7. 前端技术架构的演进

多页->单页->微服务

# 8. 微服务架构

将单个应用程序作为一套小型服务开发的方法，这些服务都是围绕业务构建的，可以独立部署，可以用不同编程语言编写，并使用不同的数据存储技术。

目的：有效的拆分应用，实现敏捷开发和部署

优点：

  1. 独立部署，灵活扩展
  2. 资源的有效隔离
  3. 团队组织架构调整，由水平架构转为垂直架构

缺点：

  1. 把原有的项目拆分成过个独立工程，增加了开发和测试的复杂度
  2. 需要保证不同服务之间数据的一致性

# 9. 单体架构

优点：集中管理，便于管理 缺点：

  1. 项目过于臃肿，难以维护
  2. 资源无法隔离，耦合性高
  3. 无法灵活扩展业务

面向服务架构SOA是一种粗粒度、松耦合的服务架构，强调的是异构系统之间的服务通信。

# 9.1.SOA和微服务架构的区别？

SOA强调异构系统之间的通信和解耦合，微服务架构强调的是系统按业务边界做细粒度的拆分和部署。

# 10. C/S架构和B/S架构区别

1、客户端要求

  • C/S客户端的计算机电脑配置要求较高。
  • B/S客户端的计算机电脑配置要求较低。

2、软件安装

  • C/S每一个客户端都必须安装和配置专用的软件。
  • B/S最大的优点就是不用安装任何专门的软件，只要有一个浏览器就可以。

3、软件升级和维护

  • C/S每一个客户端都要进行升级和维护。
  • B/S客户端不必安装及维护。

4、安全性 C/S一般面向相对固定的用户群，它可以对权限进行多层次校验，提供了更安全的存取模式，对信息安全的控制能力很强。一般高度机密的信息系统应采用C/S结构。

# 11. 1GB约等于10亿个Byte

10^3 = 1000 约等于 2^10 =1024。1GB是2^30个Byte，是2^33个bit，约等于10亿(10^9)个Byte。 1个IP地址4个字节，每个字节8位，共32位，全部覆盖他们需要2^32个数，也就是512MB。

# 12. 命令式编程和声明式编程

  1. 命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。
  2. 声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。

比如改变某个按钮颜色，jquery可以动态改变class来改变dom，而react可以改变state，而dom某个元素已经和state绑定，因此改变state也能改变dom

# 13. 谷歌浏览器页面提示翻译的原因

<html lang="zh-CN">，由en改为zh-CN（中文简体），或者是zh（中文）。如果为en的话，谷歌浏览器会显示翻译功能，

# 14. ie=edge的意思

<meta http-equiv="X-UA-Compatible" content="ie=edge">

中ie=edge表示强制以最新的IE浏览器模式渲染页面，IE11这个文档模式已经被弃用了

# 15. gt, lt, gte, lte的含义

gt就是greater than，lt就是less than，gte是大于等于，lte是小于等于

# 16. SSR相关

# 16.1.CSR（客户端渲染）过程：

  1. 浏览器发送请求
  2. 服务端返回HTML
  3. 浏览器发送bundle.js请求
  4. 服务器返回bundle.js
  5. 浏览器执行bundle.js中的React代码

# 16.2.React的SSR：

  1. 浏览器发送请求
  2. 服务器运行React代码生成页面
  3. 服务器返回页面

# 16.3.SSR和CSR对比：

  1. 网页源代码有内容的是SSR，没有的是CSR
  2. CSR通过JS加载html
  3. CSR：首屏时间问题、SEO问题
  4. SSR：消耗服务端性能

注意：在webpack.server.js中：

  • target: ‘node’，告诉webpack打包的是服务器端的代码，因为require(‘path’)这类在服务器端不会打包到bundle.js中，而在客户端会被打包到bundle.js中。
  • 需要安装webpack-node-externals，添加externals:[nodeExternals()]
  • 默认是’web’

# 16.4.Js解析：

  1. Babel-loader和babel-core一起安装，就像webpack和webpack-cli一起安装一样
  2. 要解析react代码，需要安装babel-preset-react包，并且添加option的preset选项 ‘react’
  3. 要支持最新es语法，需要安装babel-preset-stage-0包，并且添加option的preset选项stage-0

# 16.5.package.json中：

  1. 添加build脚本命令：’build’: ‘webpack –config webpack.server.js’，加上—watch参数，就会修改后自动重新打包，但是还是需要重启。
  2. 更好的做法是使用nodemon，但是需要开两个命令行，一个运行build一个运行dev：
"dev:start": "nodemon –watch build –exec node \"./build/bundle.js\""
  1. 更好的做法是全局安装npm-run-all，添加命令：
"dev": "npm-run-all –parallel dev:**"

# 16.6.同构的概念：

一套React代码，在服务器端执行一次，在客户端再执行一次，解析点击事件无效等问题

  1. 服务器路由用StaticRouter，客户端用的是BrowserRouter
  2. StaticRouter需要传递location和context，因为服务端不会感知到url变化，所以需要传递location

注意：

  • 只有第一个页面有服务端渲染，其他页面不会进行SSR
  • 使用redux，需要在客户端引用一次，在服务端也要引用一次
  • 如果想用同一套生成store的代码，需要注意不要直接生成store后导出导入，而是导出getStore方法，因为直接导出store会使得所有用户共用同一个`store``
  • ``componentDidMount`不会在服务端执行
  • window.context.state会拿到服务器渲染后的redux中的state，不会抖动

# 16.7.数据的注水和脱水：

  1. 数据的注水：服务端渲染时把数据注入到window.context中
  2. 数据的脱水：客户端渲染时从window.context中取数据

# 16.8.SEO策略

  1. 使用prerender预渲染解决SEO，不用SSR，即在被爬虫爬取的时候拉取html
  2. 如果是普通用户让他访问普通服务器react文件，如果是爬虫让他去预渲染服务器爬取
  3. 架一个nginx根据user-agent或者ip，判断是普通用户还是爬虫

注意： Meta中title和description主要作用是提升转化率，就是用户搜到了某个网站，想点进入的欲望。现在是搜索引擎是全文搜索，所以只靠写title和description不管用

网页内容不外乎三种：

  1. 文字
  2. 链接
  3. 多媒体（图片、视频等）

对应的SEO策略：

  1. 原创的文字
  2. 外部链接：别的网站链接到自己
  3. 内部链接指的是同一个域名页面之间的链接，内部链接也叫做站内链接

由于React是单页应用，可以使用React-helmet对每一个页面生成不同的title和description

# 17. { ...this.props }的含义

{ ...this.props }可以将父组件中的所有属性复制给子组件，比如Link组件改造下a标签，就可以获得父组件中的所有属性 比如：

  • 定义Link组件：
<a {...this.props}>{this.props.name}</a>
  • 使用Link组件：
<Link href = "http://www.lanou3g.com" name = "百度科技"/>

# 18. PWA:

PWA (Progressive Web Apps) 是一种Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，我们从英文缩写来看就能看出来，这是一个渐进式的 Web App，是通过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验。

总结：在不同网络情况下，都有较好的用户体验，并且渐进提升（没有网络=>弱网=>3G=>4G）。

特点：

  1. 可靠：在没有网络的环境中也能提供基本的页面访问，而不会出现“未连接到互联网”的页面。
  2. 快速：针对网页渲染及网络数据访问有较好优化。
  3. 融入（Engaging）：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性。

# 20. Worker

Web Worker代表一个后台任务，它容易被创建并向创建者发回消息。创建一个Worker只要简单的调用Worker()构造函数，指定一个脚本，在工作线程中执行。

Worker能够依序产生新（嵌套）的Worker，只要这些Worker有同源（origin）的父页面（注意：Blink暂时不支持嵌套Worker）

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

参考资料：Worker, MDN (opens new window)，Web Worker, 阮一峰 (opens new window)

# 21. jsconfig.json

能够省略很长的相对路径，类似使用别名

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

# 22. 前端性能监测Performance monitor

Performance monitor所在的位置较为隐蔽，需要以下几个步骤才能打开：

  1. 打开Chrome 开发者工具
  2. 按“Esc”，打开附加面板
  3. 点击选项按钮，打开选项菜单
  4. 选择“Performance monitor”

# 23. T+0

“T+0到账”指的就是在POS机清算业务中，指的就是工作日当天到账（一般为周一至周五10:00-18:00）

“T”代表trade，是指交易日、经营日，由于POS机清算业务中，银联结算都是在周一到周五等法定工作日，周末和节假日不属于T日（交易日）；

“+0”的含义是指资金清算时间为本日，而非实时到账；

“+1”的含义是指第二天/第二个工作日

# 24. 网络存储的方式

  1. 块存储（硬盘挂载在主机上）
  2. 文件存储(主机中的文件系统)
  3. 对象存储（不能直接打开、修改或删除文件，只能通过API，扁平化，不像文件存储有那么深的结构，对象名称就是域名地址）

# 25. 技术优化

  • iFrame 二次加载，多了一次请求，用来在广告比较好
  • 广告一般两种JS和iFrame，js如果出错影响页面正常显示，iFrame则不会。
  • BigPipe，按需加载，div textarea等占位符，鼠标滚动到时根据id属性再异步加载。

概念：

  1. 首屏时间： 到第一屏
  2. 白屏时间：从进入到head
  3. 可操作时间（针对模块）
  4. 连通率：用户能看到视频或听到声音（多为视频站点）

技术类对产品类的影响：

  • 白屏时间和连通率对跳出率有影响。
  • 可操时间与活跃用户相关

# 26. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms＝16.7ms

# 27. 扫描二维码登录网页是什么原理，前后两个事件是如何联系的？

核心过程应该是：浏览器获得一个临时 id，通过长连接等待客户端扫描带有此 id 的二维码后，从长连接中获得客户端上报给 server的帐号信息进行展示。并在客户端点击确认后，获得服务器授信的令牌，进行随后的信息交互过程。在超时、网络断开、其他设备上登录后，此前获得的令牌或丢失、或失效，对授权过程形成有效的安全防护。

# 28. 微信小程序

# 28.1.switchTab和navigateTo方法

微信小程序中，跳转的是TabBar的话，navigateTo和redirectTo无效，应该使用switchTab

wx.switchTab({    
  url: '/pages/index/index',
})

# 29. 使用Navicat连接阿里云服务器上的MySQL数据库

常规选项页面：主机名或ip地址填的就是localhost就行，ip地址是要你自己本地计算机的ip地址才行，不是服务器地址别搞错了。（因为走的是SSH，端口是22，而不是3306）

# 30. 百度云虚拟主机添加SSL证书

  • 如果用户已有证书，可以直接执行上传证书；用户可在【百度智能云管理控制台】->【用户账号】->【安全认证】->【证书管理】中进行添加除百度智能云外的其他证书。
  • 证书可以从阿里云免费申请，有效期一年。下载后一个是私钥(RSA PRIVATE KEY)，一个是证书内容(CERTIFICATE)。
  • 证书类型属于服务器证书。

# 31. 股票代码规则

  • 标的代码规则：均为6位数字
  • 股票标的规则：深圳00****、30****；上海6*****
  • ETF标的规则：51****、159***
  • 国债逆回购：204***、1318**

# 32. RN

RN从上到下可以分为Javascript层、C++层和Native层。

其中，C++层主要用于实现动态连结库(.so)，作为中间适配层桥接，实现js端与原生端的双向通信交互。

在RN的三层架构中，最核心的就是中间的C++层，C++层最核心的功能就是封装JavaScriptCore，用于执行对js的解析。

由于js代码是运行在独立的JS线程中，所以在js中不能处理耗时的操作，如fetch、图片加载和数据持久化等操作。

# 33. 天使投资人、ABC轮融资

  • 天使投资人(AI)：发生在公司初创期，是指公司有了产品初步的模样（原型），可以拿去见人了；有了初步的商业模式；积累了一些核心用户(天使用户）。这个时候一般就是要找天使投资人、天使投资机构了。投资量级一般在100万RMB到1000万RMB。

  • A轮融资：公司产品有了成熟模样，开始正常运作一段时间并有完整详细的商业及盈利模式，在行业内拥有一定地位和口碑。公司可能依旧处于亏损状态。资金来源一般是专业的风险投资机构（VC）。投资量级一般在1000万RMB到1亿RMB。

  • B轮融资：公司经过一轮烧钱后，获得较大发展。一些公司已经开始盈利。商业模式、盈利模式没有任何问题。可能需要推出新业务、拓展新领域。资金来源大多是上一轮的风险投资机构跟投、新的风投机构加入、私募股权投资机构（PE）加入。投资量级在2亿RMB以上。

  • C轮融资：公司非常成熟，离上市不远了。应该已经开始盈利，行业内基本前三把交椅。这轮除了拓展新业务，也有补全商业闭环、写好故事准备上市的意图。资金来源主要是PE，有些之前的VC也会选择跟投。投资量级：10亿RMB以上，一般C轮后就是上市了，也有公司选择融D轮，但不是很多。

# 34. 突发性能实例与通用型的区别

突发性能t5实例与通用型云服务器最显著的区别就是限制CPU计算性能，而阿里云其他通用型云服务器ECS是不限制CPU基准计算性能的

突发性能实例与通用型服务器最明显的区别就是突发性能实例会限制CPU的计算性能，例如：ecs.t5-c1m2.large这款突发性能t5实例，CPU使用率最大为15%，所以，突发性能实例适合不会持续高压力使用CPU的入门级用户；

而通用型实例则不限制CPU计算性能，如果对云服务器性能要求较高，建议不要选择突发性能实例。

  • 突发性能t5实例CPU积分消耗

  • 突发性能实例t5限制CPU计算性能，突发性能实例通过CPU实际使用率与基准CPU使用率差值的累计加权获取积分值，CPU积分消耗至0时，实例CPU性能被控制到基准运行。

# 35. 九宫格拼图游戏

  1. 先拼123,3是通过让原来右上角错误的box移到中央来复位的。
  2. 然后是4 和 7,这两是跟随的关系，让其中一个先去对方家里占着，然后另一个转到它后面。5 6 8不用单独拼，顺时针或逆时针转一圈就行

# 35.1. 如何判断随机的图片是否可解？

首先，原数组和随机出来的数组的逆序数的奇偶性要一致

比如，如果原数组是[0,1,2,3,4,5,6,7,8], 算出来的逆序数 为 0， 必须保证随机出来的数组的逆序数为偶数

另外，只有逆序数是偶数还不够，还需要逆序数+空格所在行+空格所在列 = 偶数

# 35.2. 如果随机出来的图片不可解，是不是要重新随机，直到它可解？

不用，因为又有大神发现， 只用调换该数组倒数第二、第三个数值， 就可以改变该数组逆序数的奇偶性。

# 36. 下单柜台面板

  1. 下单柜台面板，有三种状态，分别为激活中的、隐藏的和不显示的。
  2. 每次切换柜台就保存之前的数据到state中，提交的时候从state中提交，而不是从form中，因为一切换form就变了，form无法校验不显示的表单。

# 37. m3u8

现在很多视频网站都把整个视频文件拆分成一个个视频流文件（ts），这些视频流文件的下载地址会放在一个文件中，通常叫做*.m3u8。

# 38. 面试

如何学习基础知识？

  • 学习途径：网络博客、视频教程、培训班
  • 自测：是不是能独立解决问题

如何提升？

  • 目标：提升解决问题的能力
  • 方法：多看、多听、多做、多思考，不放过任何一个机会
  • 忌讳：自负、多问、懒散
  • 自测：是否能独立解决问题

# 38.1.面试注意事项

  1. 面试的时候一定要展现出基础、能力、潜力
  2. 刷题和看面经是为了查漏补缺，不是为了堵题

# 38.2.行为面试题怎么解答

STAR模型：situation，task，action，result

# 38.3.面试项目常见问题：

  1. 用到了哪些技术？
  2. 碰到了哪些技术难题？如何解决的？
  3. 项目最大的收获是什么？

# 38.4.面试官：你还有什么要问我的吗？

答：工作内容 、业务、技术栈、当前的团队、项目

# 39. 用户、角色、权限

  • 页面鉴权的正确方式是引入角色。
  • 用户属于某一个角色，他属于这个角色了，就拥有这个角色的权限了。

# 40. 抽象语法树

抽象语法树（abstract syntax code，AST）是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构。

# 41. 什么是WebAssembly

WebAssembly的名字带个汇编Assembly，所以我们从其名字上就能知道其意思是给Web使用的汇编语言，是通过Web执行低级二进制语法。

但是WebAssembly并不是直接用汇编语言，而提供了转换机制（LLVM IR），把高级别的语言（C，C++和Rust）编译为WebAssembly，以便有机会在浏览器中运行。主要是解决目前JS语言的效率问题，设计立足点为快速，内存安全和开放。

所以它其实是一种运行机制，一种新的字节码格式(.wasm)，而不是新的语言。

参考资料：

  1. WebAssembly, MDN (opens new window)
  2. WebAssembly 系列（二）：JavaScript Just-in-time (JIT) 工作原理 (opens new window)
  3. 图说 WebAssembly (opens new window)

# 37.1. react-transition-group

react-transition-group这个库，可以给react组件添加动画。

enter (force a reflow, 添加动画效果)=> enter-active =>(自定义timeout) enter-done

exit是一样的流程

transition不会继承

# 38. react-scripts其实就是create-rect-app

# 39. storybook

开发组件而不是Web应用常用的库

info-addon，最常用的addon，可以方便的生成说明文档。

react-docgen-typescript-loader，是docgen的ts版本loader，主要目的就是生成proptypes表格

JSDOC格式的注释才能被显示出来