Repository: fairyly/front-end-summary
Branch: gh-pages
Commit: f975e081ac5e
Files: 245
Total size: 651.6 KB
Directory structure:
gitextract_5dpvnue0/
├── 1 移动端 适配.md
├── 1.0 web 前端基本素养.md
├── 1.0.0 代码规范.md
├── 1.1. 解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10.md
├── 1.1.0 统一代码风格---.editorconfig.md
├── 1.1.1 忽略提交文件---.gitignore.md
├── 1.1.2 语法检查---ESLint.md
├── 1.1.3 前端小团队建设.md
├── 1.1.4 提问的智慧.md
├── 2.0 html 代码规范.md
├── 2.1 TCP连接复用.md
├── 2.1 http 协议.md
├── 2.1 http2.0 详解.md
├── 2.1 https 协议全记录.md
├── 2.1.0 HTML 全局属性.md
├── 2.1.1 从输入URL到页面加载发生了什么.md
├── 2.1.2 把一个简单的div元素的属性都打印出来.md
├── 2.1.3 html中的b和strong标签有什么区别.md
├── 2.1.4 img标签的方方面面.md
├── 2.1.5 前端 performance.md
├── 2.1.6 HTTP URL最大长度.md
├── 2.1.7 文件上传中的content-type.md
├── 2.1.7.1 文件上传 Media Types.md
├── 2.1.7.2 文件上传 showOpenFilePicker.md
├── 2.1.8 innerHTML,innerText,textContent区别.md
├── 2.1.9 获取dom中最大的 zindex.md
├── 2.2.1 重绘和回流.md
├── 2.2.2 响应式图片 picture 使用.md
├── 2.2.3 白屏优化.md
├── 2.2.4 document.referrer.md
├── 3.0 css 代码规范.md
├── 3.0.1 BEM 规范.md
├── 3.0.2 SMACSS 规范.md
├── 3.0.3 通用公共 css.md
├── 3.1 渲染树构建、布局及绘制.md
├── 3.1 css到cssom 过程.md
├── 3.1.1 两列布局左边定宽，右边自适应.md
├── 3.1.1.1 左侧自适应,右侧自适应布局.md
├── 3.1.2 H5 页面在 ios 端滑动不流畅的问题.md
├── 3.1.3 移动端 ios scroll 滚动穿透.md
├── 3.1.4 安卓浏览器键盘输入改变弹出层的定位.md
├── 3.1.5 CSS中margin边界叠加问题及解决方案.md
├── 3.1.6 css clip-path 画聊天气泡.md
├── 3.1.7 css currentColor.md
├── 3.1.8 css flexbox.md
├── 3.1.8.1 flex-wrap不兼容解决方案.md
├── 3.1.9 css 属性选择器，伪类，伪元素.md
├── 3.2.1. 使用 css3 缩小字体不偏移.md
├── 3.2.2. css3字体缩放样式-webkit-text-size-adjust的用法.md
├── 3.2.3. CSS 变量.md
├── 3.2.4 安卓 line-height 问题.md
├── 3.2.5 css grid.md
├── 3.2.6 css mask遮罩.md
├── 3.2.7 flex布局当overflow时无法滑动到顶部.md
├── 3.2.8 CSS scroll-behavior.md
├── 3.2.9 一道css题.md
├── 3.3.1 深入浏览器理解CSS animations 和 transitions的性能问题.md
├── 3.3.2 CSS Paint API.md
├── 3.3.3 前端性能优化之 预加载 prefetch，Preload.md
├── 3.3.4 iPhoneX的适配.md
├── 3.3.5 CSS Modules (css 模块化).md
├── 3.3.6 CSS3混合模式mix-blend-mode +background-blend-mode.md
├── 3.3.7 img loading.md
├── 3.3.8 CSS Paint API.md
├── 3.3.9 打印 用到 color-adjust.md
├── 3.4.0 scroll-snap 滚动容器中的一个临时点.md
├── 3.4.1 margin-inline和margin-block.md
├── 3.4.2 font-feature-settings.md
├── 3.4.3 CSS 伪元素 ::backdrop.md
├── 3.4.4 :placeholder-shown伪类.md
├── 3.4.5 focus-within伪类.md
├── 3.4.6 box-decoration-break.md
├── 3.4.7 :focus-visible伪类.md
├── 3.4.8 backdrop-filter.md
├── 3.4.9 image-set 不同屏幕显示不同图片.md
├── 3.5.1 @supports使用.md
├── 3.5.2 overflow-y:auto 没超高度也出现了滚动条.md
├── 3.5.3 :root 使用.md
├── 3.5.4 新的 CSS 长宽比属性aspect-ratio.md
├── 3.5.5 css 循环放大缩小波纹.md
├── 3.5.6 css 获取前三个元素 nth-child.md
├── 3.5.7 图片加载失败处理.md
├── 3.5.8 object-fit.md
├── 3.5.9 scrollbar-gutter.md
├── 3.6.0. place-items.md
├── 4.0 javascript 代码规范.md
├── 4.0.1 JavaScript 开发者应懂的 33 个概念.md
├── 4.0.2 js 严格模式 'use strict'.md
├── 4.0.3 JavaScript 执行机制+运行原理.md
├── 4.0.4 session 、cookie、token的区别及联系.md
├── 4.0.4 禁止js访问cookie.md
├── 4.0.5 js 中 callee 与 caller 的区别.md
├── 4.0.6 Memoization 介绍.md
├── 4.0.7 getBoundingClientRect获取元素的大小及其相对于视口的位置.md
├── 4.0.8IntersectionObserver实现懒加载.md
├── 4.0.9.1 PC端事件.md
├── 4.0.9IntersectionObserver 触底-吸顶-动画.md
├── 4.1.0 const .md
├── 4.1.0.1 +new Date使用.md
├── 4.1.0.2 可视区域加载.md
├── 4.1.0.2.1(标题和导航联动) 可视区域监听IntersectionObserver.md
├── 4.1.0.3 缓存函数.md
├── 4.1.0.4 长列表性能优化.md
├── 4.1.0.6 长属性菜单优化.md
├── 4.1.1 移动端 js 拖拽实现.md
├── 4.1.1.1 前端性能优化总结.md
├── 4.1.2. call 和 apply .md
├── 4.1.3. this 在不同环境中指向.md
├── 4.1.3.1 JavaScript 的 this 原理.md
├── 4.1.4. 事件委托.md
├── 4.1.5. 浅拷贝和深拷贝.md
├── 4.1.5.1 深拷贝 structuredClone().md
├── 4.1.6 适用于 vue.js 和原生 js 的渐进式图片加载.md
├── 4.1.7 原型链和数据类型.md
├── 4.1.7.1 作用域链.md
├── 4.1.8 DOM 节点.md
├── 4.1.9 清空对象数组的方法.md
├── 4.2.0 Thunk 函数.md
├── 4.2.1 在总的列表数组对象中查找返回的对象中存在的字段.md
├── 4.2.2 数组分组小算法.md
├── 4.2.3 数字的千位分割.md
├── 4.2.3.1 判断一个字符串是数值.md
├── 4.2.4 数字，字符串，数组，对象的方法.md
├── 4.2.4.1 正则匹配相关.md
├── 4.2.4.2 常用正则匹配.md
├── 4.2.4.2 数字数组判断是否是连续.md
├── 4.2.4.3 计算一个字符串的宽度.md
├── 4.2.4.4 ==和===.md
├── 4.2.4.5 requestAnimationFrame 使用.md
├── 4.2.4.6 时分比较大小排序.md
├── 4.2.5 JS 中的柯里化(currying).md
├── 4.2.6 js 面向对象之公有、私有、静态属性和方法详解.md
├── 4.2.7 定时器.md
├── 4.2.8 for 循环中 onclick 问题.md
├── 4.2.9 js 短路求值.md
├── 4.3.0 执行 js 代码片段.md
├── 4.3.1 判断为 true 严谨写法.md
├── 4.3.2 多级菜单遍历判断子节点.md
├── 4.3.3 JavaScript 性能优化的小知识.md
├── 4.3.4 使用数组 splice 删除元素时的坑.md
├── 4.3.5 JS中document对象和window对象的区别.md
├── 4.3.6 自执行函数中暴露方法调用.md
├── 4.3.7 前端数组对象排序算法.md
├── 4.3.8 ios 需要点击2次才能跳转.md
├── 4.3.9 2017-12-11 遇到 ios bug.md
├── 4.4.1 新增元素使用 jQuery on()方法重复绑定的问题.md
├── 4.4.2 一年中的 周 范围计算.md
├── 4.4.3 BFC-块格式化上下文（block formatting context）.md
├── 4.4.4 函数封装写法.md
├── 4.4.5 字符串数组常用方法.md
├── 4.4.6 本地缓存与浏览器缓存区别.md
├── 4.4.7. 判断 js 中的数据类型的几种方法.md
├── 4.4.8 获取字符串长度（汉字算两个字符，字母数字算一个.md
├── 4.4.9-函数式编程.md
├── 4.5.0 易混淆的判断.md
├── 4.5.1 JavaScript 内存机制（堆栈池）.md
├── 4.5.2 forEach和map和for方法的区别.md
├── 4.5.3 json 数组对象中键值重复判断.md
├── 4.5.3.1 数组对象去重.md
├── 4.5.3.2 JS取出两个数组的不同或相同元素.md
├── 4.5.3.3 表格table json数据行到列的转换.md
├── 4.5.4 时间戳日期转换.md
├── 4.5.5 常用JS方法.md
├── 4.5.6 setTimeout、setInterval被遗忘的第三个参数.md
├── 4.5.6.1 关于setTimeout和Promise执行顺序问题.md
├── 4.5.6.2JS 异步解决方案的发展历程以及优缺点.md
├── 4.5.7 暂时性死区.md
├── 4.5.8 理解JS的节流、防抖及使用场景.md
├── 4.5.9 统计字符串中特定字符包含的个数.md
├── 4.6.0 网站优化懒加载技术--lazyload.md
├── 4.6.1 手写bind方法.md
├── 4.6.2 localeCompare.md
├── 4.6.3 表单可以跨域吗.md
├── 4.6.3.1 前端跨域.md
├── 4.6.4 jsonp为什么不支持post方法.md
├── 4.6.5 实现一个 promise.md
├── 4.6.6 将简单对象数组转换成父子结构（具有children属性）的对象.md
├── 4.6.7 100 100的 canvas 占多少内存.md
├── 4.6.8 console.time方法与console.timeEnd方法.md
├── 4.6.9 js 数组全排列.md
├── 4.6.9 判断一个数组是否包含另一个数组.md
├── 4.7.0 判断对象数组是否存在某个对象.md
├── 4.7.1 Math.max() 求数组最大数.md
├── 4.7.2 canvas getImageData() 方法.md
├── 4.7.3 二叉树的几种遍历方式.md
├── 4.7.4 将 arguments 对象转为数组.md
├── 4.7.5 script标签中defer和async属性的区别.md
├── 4.7.6 现在有一个函数A和函数B，请你实现B继承A.md
├── 4.7.7 ES6 --- rest 参数.md
├── 4.7.8 尾调用.md
├── 4.7.9 BigInt JavaScript 中的任意精度整数.md
├── 4.8.1 webpack 打包原理及优化.md
├── 4.8.1.1 webpack-dev-server是怎么跑起来?.md
├── 4.8.2 0.1 + 0.2 === 0.3及超大整数相加 .md
├── 4.8.2 骨架屏.md
├── 4.8.2.1 toFixed精度丢失解决.md
├── 4.8.2.1 去掉小数尾部零.md
├── 4.8.3 document.execCommand.md
├── 4.8.4 js正则替换日期格式.md
├── 4.8.5 react-router的实现原理.md
├── 4.8.6 写一个 Webpack Loader.md
├── 4.8.6.1 webpack 插件机制.md
├── 4.8.7 深入理解Babel原理及其使用.md
├── 4.8.8 垃圾回收机制.md
├── 4.8.9 React Native 的运行机制 和 Cordova PhoneGap 的运行机制.md
├── 4.9.0 交换两个变量（不止数字）.md
├── 4.9.1 Object.assign 实现.md
├── 4.9.2 JavaScript设计模式.md
├── 4.9.3 a标签target=”_blank”的安全问题 .md
├── 4.9.4 计算两个数组的交集.md
├── 4.9.5 request is not finished.md
├── 4.9.6 a.b.c.d和a['b']['c']['d']，哪个性能更高.md
├── 4.9.7 类型判定探索.md
├── 4.9.8 字符串和数组的扩展方法.md
├── 4.9.9 ~和~~ 运算符.md
├── 5.0 前端面试题.md
├── 5.1.0 2万5千字大厂面经.md
├── 5.1.1 前端面试题详细答案.md
├── 5.1.2 vuejs 前端面试题.md
├── 5.1.3 面试经验之谈.md
├── 5.1.4 前端面试.md
├── 5.1.5 剑指Offer.md
├── 5.1.6 写好一份简历.md
├── 5.1.7 leetCode 算法题.md
├── 5.1.8 招聘过程中询问未来的雇主的问题集合.md
├── 5.1.9 2018大厂高级前端面试题汇总.md
├── 5.2.0 这是一份能让你更好准备下一次面试的图谱.md
├── 5.2.1 经典面试100题.md
├── 5.2.1 高级前端进阶.md
├── 5.2.2 如何面试前端面试者.md
├── 5.2.3 ScriptOJ-国人开发的前端题库，可以用作评测系统.md
├── 5.2.4 线性顺序存储结构和链式存储结构有什么区别.md
├── 5.2.5 编程之法-面试和算法心得.md
├── 5.2.6 观察者模式.md
├── 5.2.7 大数据数组对分页.md
├── 5.2.8 平均分配问题.md
├── 5.3.0 js判断两个数组对象是否相同的方式 .md
├── 5.6.6 前端面试准备.md
├── 6.0 你不知道的五险一金.md
├── 6.0 双向数据绑定原理.md
├── 6.0.1 如何实现增量部署发布.md
├── README.md
├── html5与css3权威指南学习笔记.md
├── 你不知道的JavaScript(上).md
└── 你不知道的JavaScript(下).md
================================================
FILE CONTENTS
================================================
================================================
FILE: 1 移动端 适配.md
================================================
# 移动端 适配
**demo : https://github.com/HuJiaoHJ/h5-layout
## vw + rem 方案
- 1、设置 html font-size 为 10vw
```
html {
font-size: 10vw;
}
```
- 2、以750UI图为例，在 css 中，直接使用UI图上的长度值，单位设置为 px
```
.head {
width: 750px;
}
```
- 3、引入 postcss-pxtorem 插件，配置如下：
- https://github.com/HuJiaoHJ/h5-layout/blob/master/.postcssrc.js
```
require('postcss-pxtorem')({
rootValue: 75,
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
})
```
以上，就可以使用了 vw + rem 方案实现了移动端适配
## 1px border 问题
- 再谈Retina下1px的解决方案： https://www.w3cplus.com/css/fix-1px-for-retina.html
```
```
## 参考
- https://juejin.im/post/5b6575b0518825196b01fd85
- https://github.com/cuth/postcss-pxtorem#readme
- https://github.com/HuJiaoHJ/blog/issues/6
- vw ployfill: https://github.com/HuJiaoHJ/viewport-units-polyfill/blob/master/index.js
- 使用Flexible实现手淘H5页面的终端适配: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
- postcss-pxtorem： https://www.npmjs.com/package/postcss-pxtorem
- sublime 3 插件 cssrem： https://github.com/flashlizi/cssrem
================================================
FILE: 1.0 web 前端基本素养.md
================================================
# web 前端基本素养
---:: You are the owner of your career.
找一些比较准确的，你可以确定它真的足够全面的资料当作线索。
对 Web 平台的 API，用反射：
```
for(var p in window){console.log(p)}
```
浏览器里给出来的这个属性列表是不会骗人的，用这个东西作为线索
# 高效率工作与学习
## 合理利用搜索引擎
远离百度，拥抱谷歌，一般程序员 + google = 超级程序员。
掌握搜索引擎的高级用法，比如双引号(精确搜索) 站内搜索(site:) 通配符(星号) 文档类型(filetype:pdf)
## 选择合适工具
Dash， Alfred， Zeal， Wox， Everything， Emment， Markdown….
时间少，不被打断 coding 思路，从而提升效率。
## 做好时间管理
明确「最小可用时间」的概念
凡事都要列计划，计划之外无工作
利用好工具：便签，番茄工作法，forest；让自己更有压迫感.TED 公开课自行学习
## 阅读优质资源
阅读聚合筛选后的文章，比如稀土掘进，企业前端团队博客，其他个人专业博客等，订阅号，有道笔记。可以通过 RSS 订阅自己整合。
## 养成总结习惯
书写是为了更好的思考，可以通过书写进行知识的沉淀，刚开始先将工作学习中遇到的问题，选择的方案以及解决的方法记录下来。持续一段时间后，然后对这类事情进行挖掘再整理。转载收藏，网络存档， 自己的理解提炼主旨进一步再整理。
写博客进行知识沉淀。 搭建博客 （Hexo + Github page + 七牛）
## 正确的沟通方式
异步沟通，谨慎；语言组织；有迹可循；防止被人中途思路被打断，看似回复变慢，其实更加高效。
## 正确的提问
提问前做足够研究。（你做过足够的研究么，你尝试过搜索么，你试过 debug 么，仔细检查、避免低级错误）
在适当的地方提问（比如你在 stackoverflow，而非在百度知道， 国内 segmentfault， gitter（举例：Ant-design）， github 提issue）
直入主题，少说废话。精确描述问题。（提问的智慧）
用清晰、正确、精准并语法正确的语句。反面例子：(冰天雪地跪求解答，十万火急。)
使用明确、有意义的标题。
语法正确、格式清晰。
描述事实、而不是猜测。
要有具体场景，描述问题发生的环境
如果是业务bug提前demo，jsbin，jsfiddle， codepen 复现）并写下你自己尝试过的解决方法。
降低别人对问题理解的时间成本，对自己对问题提炼有帮助。有时候问题描述清楚，问题也就解决了。
## 编写优雅的代码
可读性目的：使别人理解它所需的时间最小化。
可读性代码就是一种艺术，优雅程度决定是否好的艺术品。
## 提高代码的可读性
风格统一
把信息装到名字里
注释言简意赅
简化循环和逻辑
参考AirBnb， Google， facebook
举例：
```
// bad
console.log(object.hasOwnProperty(key));
// good
console.log(Object.prototype.hasOwnProperty.call(object, key));
// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
/* or */
import has from 'has';
// ...
console.log(has.call(object, key));
```
## HOW
- 借助自动化工具（e: esLint， pre-commit）
- Code Review (不局限几天，一个人，结对互评也可以做)
* 一些新的 web 技术
- shadow DOM：隔离组件代码作用域
- Service Worker ：网络代理，数据缓存，离线应用，推送通知
- WebRTC：通过 JavaScript api 接口网页实时通讯
- PWA ：网页可以渐进式地变成 App 可以添加到主屏幕图标，具有 Service Worker 的能力
- Web Components ：组件化标准，只规范接口，而底层的实现是完全自由的。包括（HTML Templates、HTML Import、Custom Element、Shadow DOM）
- WebAssembly： Web 的二进制格式（一般的在 JavaScript 文档其实就是简单的文本文件，先是从服务器下载，然后由浏览器中的 JavaScript 引擎解析并编译）可以让不能用来开发 web 应用的语言来进行 web 开发
# 代码规范
参见 [编码规范 by @mdo](http://zoomzhao.github.io/code-guide/)
* 中英文之间留一个空格
* 代码注释
* 避免使用大长段代码
[前端工作流和规范](https://github.com/fairyly/html-demo/blob/gh-pages/WEB%E5%89%8D%E7%AB%AF%E5%B7%A5%E4%BD%9C%E6%B5%81%E5%92%8C%E8%A7%84%E8%8C%83.md)
================================================
FILE: 1.0.0 代码规范.md
================================================
# 代码规范
## Baidu EFE team
* [website](http://efe.baidu.com/)
* [GitHub](https://github.com/ecomfe)
- [Javascript编码规范](javascript-style-guide.md) [1.3]
- [Javascript编码规范 - ESNext补充篇](es-next-style-guide.md) [draft]
- [HTML编码规范](html-style-guide.md) [1.2]
- [CSS编码规范](css-style-guide.md) [1.2]
- [Less编码规范](less-code-style.md) [1.1]
- [E-JSON数据传输标准](e-json.md) [1.0]
- [模块和加载器规范](module.md) [1.1]
- [包结构规范](package.md) [1.1]
- [项目目录结构规范](directory.md) [1.1]
- [图表库标准](chart.md) [1.0]
- [react编码规范](react-style-guide.md) [draft]
## AlloyTeam
* [website](http://alloyteam.github.io/CodeGuide/)
* [GitHub](https://github.com/AlloyTeam/CodeGuide/tree/gh-pages)
* [GitHub-腾讯IVWEB前端工作流和规范](https://github.com/feflow)
* [git-commit-style-guide](https://github.com/feflow/git-commit-style-guide)
* [README规范](https://github.com/feflow/readme-style-guide)
* [eslint-config-ivweb](https://github.com/feflow/eslint-config-ivweb)
## google
* [website](https://opensource.google.com/)
* [Github](https://github.com/google)
* [Github-google styleguide](https://github.com/google/styleguide)
* [TypeScript style guide, formatter, and linter.](https://github.com/google/ts-style)
* [eslint-config-google](https://github.com/google/eslint-config-google)
## airbnb
* [GitHub](https://github.com/airbnb)
* [GitHub-JavaScript Style Guide](https://github.com/airbnb/javascript)
## 参考
- [JavaScript Style Guide, with linter & automatic code fixer](https://github.com/standard/standard)
- [website](https://standardjs.com/)
================================================
FILE: 1.1. 解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10.md
================================================
# 解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
* http://www.cnblogs.com/mfc-itblog/p/5949251.html
```
2. Google Chrome Frame也可以让IE用上Chrome的引擎:
创建html5时发现这么一句话，百度如下：
这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。
Google Chrome Frame（谷歌内嵌浏览器框架GCF）。
这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。
```
================================================
FILE: 1.1.0 统一代码风格---.editorconfig.md
================================================
# .editorconfig
## 1.了解
- 【通配符】
```
* 匹配除/之外的任意字符串
** 匹配任意字符串
? 匹配任意单个字符
[name] 匹配name中的任意一个单一字符
[!name] 匹配不存在name中的任意一个单一字符
{s1,s2,s3} 匹配给定的字符串中的任意一个(用逗号分隔)
{num1..num2} 匹配num1到num2之间的任意一个整数, 这里的num1和num2可以为正整数也可以为负整数
```
- 各个属性
```
indent_style 设置缩进风格(tab是硬缩进，space为软缩进)
indent_size 用一个整数定义的列数来设置缩进的宽度，如果indent_style为tab，则此属性默认为 tab_width
tab_width 用一个整数来设置tab缩进的列数。默认是indent_size
end_of_line 设置换行符，值为lf、cr和crlf
charset 设置编码，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用utf-8-bom
trim_trailing_whitespace 设为true表示会去除换行行首的任意空白字符。
insert_final_newline 设为true表示使文件以一个空白行结尾
root 表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件
```
## 2.使用
>有些编辑器则需要安装editorConfig插件，如ATOM、Sublime、VS Code等
- 项目目录创建 `.editorconfig` 文件
```
$ touch .editorconfig
```
- `.editorconfig` 常用内容设置：
```
# editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
tab_width = 2
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
```
================================================
FILE: 1.1.1 忽略提交文件---.gitignore.md
================================================
# .gitignore
```
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
```
## 参考
- [github/gitignore](https://github.com/github/gitignore)
================================================
FILE: 1.1.2 语法检查---ESLint.md
================================================
# ESLint
```
npm i eslint -g
eslint --init
eslint 会创建一个 .eslintrc.json 的配置文件，同时自动安装并添加相关的模块到 devDependencies。
这里我们使用 Standard 规范，其主要特点是不加分号。
```
- rules:
```
'rules': {
// no-var
'no-var': 'error',
// 要求或禁止 var 声明中的初始化
'init-declarations': 2,
// 强制使用单引号
'quotes': ['error', 'single'],
// 要求或禁止使用分号而不是 ASI
'semi': ['error', 'never'],
// 禁止不必要的分号
'no-extra-semi': 'error',
// 强制使用一致的换行风格
'linebreak-style': ['error', 'unix'],
// 空格2个
'indent': ['error', 2, {'SwitchCase': 1}],
// 指定数组的元素之间要以空格隔开(,后面)， never参数：[ 之前和 ] 之后不能带空格，always参数：[ 之前和 ] 之后必须带空格
'array-bracket-spacing': [2, 'never'],
// 在块级作用域外访问块内定义的变量是否报错提示
'block-scoped-var': 0,
// if while function 后面的{必须与if在同一行，java风格。
'brace-style': [2, '1tbs', {'allowSingleLine': true}],
// 双峰驼命名格式
'camelcase': 2,
// 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
'comma-dangle': [2, 'never'],
// 控制逗号前后的空格
'comma-spacing': [2, {'before': false, 'after': true}],
// 控制逗号在行尾出现还是在行首出现
'comma-style': [2, 'last'],
// 圈复杂度
'complexity': [2, 9],
// 以方括号取对象属性时，[ 后面和 ] 前面是否需要空格, 可选参数 never, always
'computed-property-spacing': [2, 'never'],
// TODO 关闭 强制方法必须返回值，TypeScript强类型，不配置
// 'consistent-return': 0
}
```
- vue demo:
ESLint的规则有三种级别：
- "off"或者0，不启用这个规则
- "warn"或者1，出现问题会有警告
- "error"或者2，出现问题会报错
vue-cli在init初始化时会询问是否需要添加ESLint，确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。
- .eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。
- .eslintrc.js是ESLint配置文件，用来设置插件、自定义规则、解析器等配置。
- 解析器(parser)：使用了babel-eslint，这个可以在package.json中找到，说明我们已经安装过该解析器了。
- 环境配置(env)：在浏览器中使用eslint。
- 继承(extends)：该配置文件继承了standard规则，具体规则自己看文档，看不懂有中文版的。
- 规则(rules)：
- arrow-parems 允许箭头函数参数使用括号,具体操作请看文档
- generator-star-spacing 允许方法之间加星号，如function * generator() {}。文档在此。特地查了下，发现这是ES6提供的生成器函数，回头学习下。
- no-debugger' 允许在开发环境下使用debugger。
常用规则：
```
'rules': {
"comma-dangle": ["error", "never"], //是否允许对象中出现结尾逗号
"no-cond-assign": 2, //条件语句的条件中不允许出现赋值运算符
"no-console": 2, //不允许出现console语句
"no-constant-condition": 2, //条件语句的条件中不允许出现恒定不变的量
"no-control-regex": 2, //正则表达式中不允许出现控制字符
"no-debugger": 2, //不允许出现debugger语句
"no-dupe-args": 2, //函数定义的时候不允许出现重复的参数
"no-dupe-keys": 2, //对象中不允许出现重复的键
"no-duplicate-case": 2, //switch语句中不允许出现重复的case标签
"no-empty": 2, //不允许出现空的代码块
"no-empty-character-class": 2, //正则表达式中不允许出现空的字符组
"no-ex-assign": 2, //在try catch语句中不允许重新分配异常变量
"no-extra-boolean-cast": 2, //不允许出现不必要的布尔值转换
"no-extra-parens": 0, //不允许出现不必要的圆括号
"no-extra-semi": 2, //不允许出现不必要的分号
"no-func-assign": 2, //不允许重新分配函数声明
"no-inner-declarations": ["error", "functions"], //不允许在嵌套代码块里声明函数
"no-invalid-regexp": 2, //不允许在RegExp构造函数里出现无效的正则表达式
"no-irregular-whitespace": 2, //不允许出现不规则的空格
"no-negated-in-lhs": 2, //不允许在in表达式语句中对最左边的运算数使用取反操作
"no-obj-calls": 2, //不允许把全局对象属性当做函数来调用
"no-regex-spaces": 2, //正则表达式中不允许出现多个连续空格
"quote-props": 2, //对象中的属性名是否需要用引号引起来
"no-sparse-arrays": 2, //数组中不允许出现空位置
"no-unreachable": 2, //在return，throw，continue，break语句后不允许出现不可能到达的语句
"use-isnan": 2, //要求检查NaN的时候使用isNaN()
"valid-jsdoc": ["error", {
"requireReturn": false,
"requireParamDescription": false,
"requireReturnDescription": true
}], //强制JSDoc注释
"valid-typeof": ["error", {
"requireStringLiterals": true
}], //在使用typeof表达式比较的时候强制使用有效的字符串
"block-scoped-var": 2, //将变量声明放在合适的代码块里
"complexity": 0, //限制条件语句的复杂度
"consistent-return": 2, //无论有没有返回值都强制要求return语句返回一个值
"curly": ["error", "all"], //强制使用花括号的风格
"default-case": 0, //在switch语句中需要有default语句
"dot-notation": ["error", {"allowKeywords": false, "allowPattern": ""}], //获取对象属性的时候使用点号
"eqeqeq": ["error", "smart"], //比较的时候使用严格等于
"no-alert": 1, //不允许使用alert，confirm，prompt语句
"no-caller": 2, //不允许使用arguments.callee和arguments.caller属性
"guard-for-in": 0, //监视for in循环，防止出现不可预料的情况
"no-div-regex": 2, //不能使用看起来像除法的正则表达式
"no-else-return": 0, //如果if语句有return，else里的return不用放在else里
"no-labels": ["error", {
"allowLoop": false,
"allowSwitch": false
}], //不允许标签语句
"no-eq-null": 2, //不允许对null用==或者!=
"no-eval": 2, //不允许使用eval()
"no-extend-native": 2, //不允许扩展原生对象
"no-extra-bind": 2, //不允许不必要的函数绑定
"no-fallthrough": 2, //不允许switch按顺序全部执行所有case
"no-floating-decimal": 2, //不允许浮点数缺失数字
"no-implied-eval": 2, //不允许使用隐式eval()
"no-iterator": 2, //不允许使用__iterator__属性
"no-lone-blocks": 2, //不允许不必要的嵌套代码块
"no-loop-func": 2, //不允许在循环语句中进行函数声明
"no-multi-spaces": 2, //不允许出现多余的空格
"no-multi-str": 2, //不允许用\来让字符串换行
"no-global-assign": 2, //不允许重新分配原生对象
"no-new": 2, //不允许new一个实例后不赋值或者不比较
"no-new-func": 2, //不允许使用new Function
"no-new-wrappers": 2, //不允许使用new String，Number和Boolean对象
"no-octal": 2, //不允许使用八进制字面值
"no-octal-escape": 2, //不允许使用八进制转义序列
"no-param-reassign": 0, //不允许重新分配函数参数"no-proto": 2, //不允许使用__proto__属性
"no-redeclare": 2, //不允许变量重复声明
"no-return-assign": 2, //不允许在return语句中使用分配语句
"no-script-url": 2, //不允许使用javascript:void(0)
"no-self-compare": 2, //不允许自己和自己比较
"no-sequences": 2, //不允许使用逗号表达式
"no-throw-literal": 2, //不允许抛出字面量错误 throw "error"
"no-unused-expressions": 2, //不允许无用的表达式
"no-void": 2, //不允许void操作符
"no-warning-comments": [1, {"terms": ["todo", "fixme", "any other term"]}], //不允许警告备注
"no-with": 2, //不允许使用with语句
"radix": 1, //使用parseInt时强制使用基数来指定是十进制还是其他进制
"vars-on-top": 0, //var必须放在作用域顶部
"wrap-iife": [2, "any"], //立即执行表达式的括号风格
"yoda": [2, "never", {"exceptRange": true}], //不允许在if条件中使用yoda条件
"strict": [2, "function"], //使用严格模式
"no-catch-shadow": 2, //不允许try catch语句接受的err变量与外部变量重名"no-delete-var": 2, //不允许使用delete操作符
"no-label-var": 2, //不允许标签和变量同名
"no-shadow": 2, //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2, //js关键字和保留字不能作为函数名或者变量名
"no-undef": 2, //不允许未声明的变量
"no-undef-init": 2, //不允许初始化变量时给变量赋值undefined
"no-undefined": 2, //不允许把undefined当做标识符使用
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}], //不允许有声明后未使用的变量或者参数
"no-use-before-define": [2, "nofunc"], //不允许在未定义之前就使用变量"indent": 2, //强制一致的缩进风格
"brace-style": [2, "1tbs", { "allowSingleLine": false}], //大括号风格
"camelcase": [2, {"properties": "never"}], //强制驼峰命名规则
"comma-style": [2, "last"], //逗号风格
"consistent-this": [0, "self"], //当获取当前环境的this是用一样的风格
"eol-last": 2, //文件以换行符结束
"func-names": 0, //函数表达式必须有名字
"func-style": 0, //函数风格，规定只能使用函数声明或者函数表达式
"key-spacing": [2, {"beforeColon": false, "afterColon": true}], //对象字面量中冒号的前后空格
"max-nested-callbacks": 0, //回调嵌套深度
"new-cap": [2, {"newIsCap": true, "capIsNew": false}], //构造函数名字首字母要大写
"new-parens": 2, //new时构造函数必须有小括号
"newline-after-var": 0, //变量声明后必须空一行
"no-array-constructor": 2, //不允许使用数组构造器
"no-inline-comments": 0, //不允许行内注释
"no-lonely-if": 0, //不允许else语句内只有if语句
"no-mixed-spaces-and-tabs": [2, "smart-tabs"], //不允许混用tab和空格
"no-multiple-empty-lines": [2, {"max": 2}], //空行最多不能超过两行
"no-nested-ternary": 2, //不允许使用嵌套的三目运算符
"no-new-object": 2, //禁止使用new Object()
"fun-call-spacing": 2, //函数调用时，函数名与()之间不能有空格
"no-ternary": 0, //不允许使用三目运算符
"no-trailing-spaces": 2, //一行最后不允许有空格
"no-underscore-dangle": 2, //不允许标识符以下划线开头
"no-extra-parens": 0, //不允许出现多余的括号
"one-var": 0, //强制变量声明放在一起
"operator-assignment": 0, //赋值运算符的风格
"padded-blocks": [2, "never"], //块内行首行尾是否空行
"quote-props": 0, //对象字面量中属性名加引号
"quotes": [1, "single", "avoid-escape"], //引号风格
"semi": [2, "always"], //强制语句分号结尾
"semi-spacing": [2, {"before": false, "after": true}], //分后前后空格
"sort-vars": 0, //变量声明时排序
"space-before-blocks": [2, "always"], //块前的空格
"space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], //函数定义时括号前的空格
"space-infix-ops": [2, {"int32Hint": true}], //操作符周围的空格
"keyword-spacing": 2, //关键字前后的空格
"space-unary-ops": [2, { "words": true, "nonwords": false}], //一元运算符前后不要加空格
"wrap-regex": 2, //正则表达式字面量用括号括起来
"no-var": 0, //使用let和const代替var
"generator-star-spacing": [2, "both"], //生成器函数前后空格
"max-depth": 0, //嵌套块深度
"max-len": 0, //一行最大长度，单位为字符
"max-params": 0, //函数最多能有多少个参数
"max-statements": 0, //函数内最多有几个声明
"no-bitwise": 0, //不允许使用位运算符
"no-plusplus": 0 //不允许使用++ --运算符
}
```
- .eslintrc.js
```
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
```
## 参考
- http://eslint.org/docs/rules/
- https://www.jb51.net/article/124945.htm
- https://www.jianshu.com/p/efb6fbed6fac
- https://github.com/babel/babel-eslint
## 参考
- https://eslint.org/
- 腾讯IVWEB前端工作流和规范: https://github.com/feflow
================================================
FILE: 1.1.3 前端小团队建设.md
================================================
# 前端小团队建设
## 参考
- [一些规范](https://mp.weixin.qq.com/s?__biz=MjM5NTEwMTAwNg==&mid=2650215305&idx=1&sn=c05c83f51813919c6ae7db50c9d89387&chksm=befe13a889899abe428cc6564fc9857e4403f7bd6245c7f9cf892fc69c10b8608a08d6c8a70f&mpshare=1&scene=23&srcid=092701H4FKxu5n1VcnK5M5jJ#rd)
================================================
FILE: 1.1.4 提问的智慧.md
================================================
# 提问的智慧
## 参考
- [issue: 提问的智慧](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md)
================================================
FILE: 2.0 html 代码规范.md
================================================
# html代码规范
* 缩进 以前说使用 **2** 个空格，现在一般使用 **4** 个空格；
* 在属性上，使用双引号 **“”**，不要使用单引号 **‘’**；
* 标签正确关闭；
* 在自动闭合标签结尾处使用斜线；
* 头部要声明 doctype :
* 指出页面的语言:
* 声明一个明确的字符编码:
* IE 兼容模式: 使用兼容性 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要，通常通过 edge mode 来通知 IE 使用最新的兼容模式
* 通常在引入 CSS 和 JavaScript 时不需要指明 type，css 放 head 头部
* 属性顺序： HTML 属性应该按照特定的顺序出现以保证易读性。尽量大部分用 class，少使用 id
- class
- id, name
- data-*
- src, for, type, href, value
- title, alt
- role, aria-*
```
Example link
```
* Boolean 属性指不需要声明取值的属性
================================================
FILE: 2.1 TCP连接复用.md
================================================
# TCP连接复用
>1. 负载均衡技术简介
现代企业信息化应用越来越多的采用B/S应用架构来承载企业的关键业务，因此，确保这些任务的可靠运行就变得日益重要。
随着越来越多的企业实施数据集中，应用的扩展性、安全性和可靠性也越来越受到企业的重视。
负载均衡技术通过设置虚拟服务器IP（VIP），将后端多台真实服务器的应用资源虚拟成一台高性能的应用服务器，
通过负载均衡算法，将大量来自客户端的应用请求分配到后端的服务器进行处理。
负载均衡设备持续的对服务器上的应用状态进行检查，并自动对无效的应用服务器进行隔离，实现了一个简单、扩展性强、可靠性高的应用解决方案。
解决了单台服务器处理性能不足，扩展性不够，可靠性较低的问题。
## 1. TCP连接复用（TCP Connection Reuse）
>TCP连接复用技术通过将前端多个客户的HTTP请求复用到后端与服务器建立的一个TCP连接上。
这种技术能够大大减小服务器的性能负载，减少与服务器之间新建TCP连接所带来的延时，
并最大限度的降低客户端对后端服务器的并发连接数请求，减少服务器的资源占用。
- TCP连接复用是将多个客户端的HTTP请求复用到一个服务器端TCP连接上，而HTTP复用则是一个客户端的多个HTTP请求通过一个TCP连接进行处理。
- 前者是负载均衡设备的独特功能；而后者是HTTP 1.1协议所支持的新功能，目前被大多数浏览器所支持。
SYN表示建立连接，
FIN表示关闭连接，
ACK表示响应，
PSH表示有 DATA数据传输，
RST表示连接重置。
## http 连接复用
主要的思路
在发送 http 的请求头中设置 Connection: keep-alive。
## 参考
- [TCP连接复用（TCP Connection Reuse）](http://blog.51cto.com/gaibianziji/1211940)
================================================
FILE: 2.1 http 协议.md
================================================
# http 协议
Hyper Text Transfer Protocol（超文本传输协议）
HTTP是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP是一个无状态的协议。
* http 状态值 ajax 的 readyState
- 0 － （未初始化）还没有调用send()方法
- 1 － （载入）已调用send()方法，正在发送请求
- 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
- 3 － （交互）正在解析响应内容
- 4 － （完成）响应内容解析完成，可以在客户端调用了
* http 状态码
```
1xx：请求收到，继续处理
2xx：操作成功收到，分析、接受
3xx：完成此请求必须进一步处理
4xx：请求包含一个错误语法或不能完成
5xx：服务器执行一个完全有效请求失
```
- 200, OK，访问正常
- 301, Moved Permanently，永久移动
- 302, Move temporarily，暂时移动
- 304, Not Modified，未修改
- 307, Temporary Redirect，暂时重定向
- 401, Unauthorized，未授权
- 403, Forbidden，禁止访问
- 404, Not Found，未发现指定网址
- 500, Internal Server Error，服务器发生错误
## HTTP报文
- HTTP请求报文由**请求行（request line）**、**请求头部（header）**、**空行**和**请求数据**四个部分组成
- HTTP响应报文由**状态行（status-line）**、**消息报头（header）**和**响应正文（response-body）**三个部分组成。
### 1.1 请求行
请求行由三部分组成：请求方法，请求URL（不包括域名），HTTP协议版本
请求方法比较多：GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT
## 1.2 请求头部
请求头部由关键字/值对组成，每行一对
```
User-Agent : 产生请求的浏览器类型
Accept : 客户端希望接受的数据类型，比如 Accept：text/xml（application/json）表示希望接受到的是xml（json）类型
Content-Type：发送端发送的实体数据的数据类型。
比如，Content-Type：text/html（application/json）表示发送的是html类型。
Host : 请求的主机名，允许多个域名同处一个IP地址，即虚拟主机
1.2.1 Content-Type
常见的Content-Type：
Content-Type
解释
text/html
html格式
text/plain
纯文本格式
text/css
CSS格式
text/javascript
js格式
image/gif
gif图片格式
image/jpeg
jpg图片格式
image/png
png图片格式
application/x-www-form-urlencoded
POST专用：普通的表单提交默认是通过这种方式。form表单数据被编码为key/value格式发送到服务器。
application/json
POST专用：用来告诉服务端消息主体是序列化后的 JSON 字符串
text/xml
POST专用：发送xml数据
multipart/form-data
POST专用：下面讲解
作者：Lxylona
链接：https://www.jianshu.com/p/0015277c6575
```
## 状态行
状态行也由三部分组成：服务器HTTP协议版本，响应状态码，状态码的文本描述
格式：HTTP-Version Status-Code Reason-Phrase CRLF
比如：HTTP/1.1 200 OK
状态码：由3位数字组成，第一个数字定义了响应的类别
- General:概括信息，浏览器自动生成概括，不是http协议内容。
```
Accept:告诉服务器能够发送的媒体类型。
Accept-Encoding:告诉服务器能发送哪些压缩格式。
Connection:客户端和服务器是否保持连接。
Host:接收请求的服务器的主机名和端口号。
Origin:请求的网站源信息。
Referer:提供了包含当前请求URI的文档的URL，告诉服务器自己的来源。
User-Agent:发送请求的客户端应用程序。
cookie：客户端的一些信息保存用户的登录状态等。
```
## 参考
- [HTTP请求及响应报文](https://www.jianshu.com/p/8e8b6a8048da)
- [HTTPS从认识到线上实战全记录](http://blog.haoji.me/https.html)
================================================
FILE: 2.1 http2.0 详解.md
================================================
# 2.1 http2.0 详解
- 新的二进制格式（Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。
- 多路复用（MultiPlexing），即连接共享，即每一个request都是是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id将request再归属到各自不同的服务端请求里面。
- 所有的请求都是通过一个 TCP 连接并发完成
- header压缩，如上文中所言，对前面提到过HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。
- 服务端推送（server push），同SPDY一样，HTTP2.0也具有server push功能。
## 参考
- []()
================================================
FILE: 2.1 https 协议全记录.md
================================================
# 2.1 https 协议全记录
>HTTPS全称Hyper Text Transfer Protocol over Secure Socket Layer，
直译过来就是通过SSL实现的超文本传输协议，简单来讲就是加密版的HTTP协议，也就是HTTP+SSL/TLS
>HTTP是明文传输的，因此使用HTTP协议传输隐私信息非常不安全，很容易在传输过程中被窃取，或者通信内容被人篡改冒充，使用HTTPS可以避免这些问题。
>实际上我们现在的HTTPS都是用的TLS协议，但是由于SSL出现的时间比较早，并且依旧被现在浏览器所支持，因此SSL依然是HTTPS的代名词。
上面一大段话是转载的，简单而言就是TLS是SSL的升级版，现在浏览器一般用的都是TLS
## 2.1.3 HTTPS的优点
- 从底层分析HTTPS有以下3大优点：
- 防窃听：信息被加密了，第三方拿不到密码，所以可以防窃听；
- 防篡改：还是因为信息被加密了，如果执意篡改的话，客户端无法解密不说，而且数据完整性校验这一关也过不了；
- 防冒充：防止攻击者冒充他人身份参与通信，比如HTTPS的双向认证；
- 从实际出发来看，HTTPS主要有以下优点：
- 防止私密信息泄露，防止信息被篡改；
- 有助于SEO，百度、谷歌均明确表示会优先收录、展示HTTPS站点的内容；
- 完全杜绝运营商HTTP劫持问题；
- 有效解决运营商DNS劫持问题，降低网站被劫持的风险;
- HTTPS的小绿锁表示可以提升用户对网站信任程度（当然不是说有小绿锁的都是安全的）;
- 可以有效防止山寨、镜像网站等；
- 为未来升级HTTP/2做准备，HTTP/2必须基于HTTPS部署；
## HTTPS的缺点
- 服务器性能下降，开启HTTPS会增加内存、CPU、网络带宽的开销，特别是非对称加密这一块；
- 访问速度下降，HTTP连接的建立需要3次握手，HTTPS还需要加上ssl的几次握手（具体是几次没去考究，有说是9次），当然下降主要是在第一次建立连接的时候，后面正常通信速度一般没啥变化；
- 除了握手部分外，所有信息传输之后浏览器和服务器都要进行加密解密，又是一笔额外的开销；
- 申请证书需要一笔花费，当然现在免费证书也很容易申请到，这个不算明显缺点；
>一句话概括就是：性能和速度下降，但是具体下降多少呢，这个不太好讲，可以延伸阅读：[HTTPS 要比 HTTP 多用多少服务器资源？](https://www.zhihu.com/question/21518760)
## 2.1.5. HTTPS原理
HTTPS主要分为单向认证和双向认证，99%的场景都只需要单向认证，
#### 2.1.5.2 单向认证
>具体过程如下：
浏览器访问一个https地址，同时向服务端发送支持的SSL协议版本、支持的加密算法、一个客户端生成的随机数（用于稍后生成”对话密钥”）等。
服务端给客户端返回要使用的SSL协议版本号、加密算法、一个服务器生成的随机数（也同样用于稍后生成”对话密钥”），另外还有一个最重要的，返回服务器端的证书，即公钥证书；
客户端收到服务器回应以后，首先验证证书是否合法，如果证书不是可信机构颁布、或者证书中的域名与实际域名不一致、或者证书已经过期、或者返回的公钥不能正确解开返回证书中的数字签名，就会向访问者显示一个警告，由其选择是否还要继续通信。如果证书没有问题，客户端就会从证书中取出服务器的公钥继续；
客户端向服务端发送自己所能支持的对称加密方案（注意是对称加密），供服务器端进行选择；
服务器端在客户端提供的加密方案中选择加密程度最高的加密方式；
服务器将选择好的加密方案通过明文方式返回给客户端；
客户端接收到服务端返回的加密方式后，使用该加密方式生成产生一个随机密钥（后续用作通信过程中对称加密的密钥），然后将该随机数用用证书中的公钥加密发给服务端；
服务器收到客户端返回的加密信息后，使用自己的私钥进行解密，获得最终的对称加密密钥。至此，客户端和服务端都得到一个随机密钥，并且这个密钥别人没法知道；
在接下来的会话中，服务器和客户端将会使用该密码进行对称加密解密，保证通信过程中信息的安全。
#### 2.1.5.4 双向认证
>双向认证和单向认证原理基本差不多，主要区别是除了客户端需要认证服务端以外，服务端对客户端也需要认证。什么场景下需要验证客户端呢？比如一些银行业务，银行会要求客户必须在电脑上插入它们签发的U盾之类的东西，或者安装什么控件，这里就类似客户端证书的概念，没有这个证书的人无法使用银行提供的业务。
- 参考：https://kyfxbl.iteye.com/blog/1910891
## 2.2 CA
2.2.1 何为CA
>CA(Certificate Authority)，即证书认证机构，它的作用就是提供证书（即服务器证书，由域名、公司信息、序列号和签名信息组成）加强服务端和客户端之间信息交互的安全性，以及证书运维相关服务。任何个体/组织都可以扮演 CA 的角色，难的是你要能得到全世界各大操作系统、浏览器等的默认信任，能得到他们的默认信任，你也可以自己开一家CA公司了，这类证书通常叫做根证书。浏览器默认信任的 CA 大厂商有很多，比如 Symantec赛门铁克、Comodo、Godaddy、GolbalSign(百度微博等都是它签发的) 和 Digicert。
## 2.3 SSL证书
### 2.3.1 证书的种类
SSL 证书按大类一般可分为DV SSL 、OV SSL、EV SSL证书，又叫域名型、企业型、增强型证书
### 2.3.2. 证书的格式
一般来说，主流的 Web 服务软件，通常都基于 OpenSSL 和 Java 两种基础密码库。
>
Tomcat、Weblogic、JBoss等Web服务软件，一般使用JDK自带的Keytool工具，生成Java Keystore（JKS）格式的证书文件。
Apache、Nginx等Web服务软件，一般使用OpenSSL工具提供的密码库，生成 .key、.crt等格式的证书文件。
IBM 的 Web 服务产品，如 Websphere、IBM Http Server（IHS）等，一般使用 IBM 产品自带的 iKeyman 工具，生成 KDB 格式的证书文件。
微软的IIS使用Windows自带的证书库生成pfx格式的证书文件。
## 3.1第一步，生成证书
>证书一般都是用openssl来生成，当然也可以用jdk自带的keytool来生成，但是最终还是要用openssl来转换格式，所以一般还是推荐用openssl来生成。
#### 3.1.2.1 安装openssl
首先当然还是安装openssl，这里我们只介绍Windows平台，Linux系统的请[参考这里](http://blog.haoji.me/linux-nginx.html#openssl--an-zhuang)，点击这里[下载Win64位的安装包](http://slproweb.com/products/Win32OpenSSL.html)
>安装很简单，安装完毕之后为了使用方便，建议配置一下环境变量：
## 3.1.2.2. 生成CA根证书
>我们先生成一个自己的CA根证书ca.crt，然后再用这个根证书生成服务端证书server.crt，有人会问，
为啥不直接生成服务端证书呢？因为这样做的话将来我们只要导入一个CA根证书，其它所有用它生成的证书都默认是可信任的，方便嘛！
好了，说了这么多废话，下面开始了：
```
# 生成CA私钥
openssl genrsa -out ca.key 1024
# 生成CA根证书，-day指定证书有效期
openssl req -new -x509 -key ca.key -out ca.crt -days 365
```
>就这么简单，第二步需要输入几个东西，虽然说乱填也可以，但建议按照提示来填，其中Common Name需要特别注意，
如果是生成CA证书的话，可以输入诸如My CA之类的，如果是生成服务端证书的话，必须输入网站的域名，可以输入泛域名，如*.haoji.me
### 3.1.2.3. 生成服务端证书
>和CA证书的生成不同的时，我们需要先生成一个csr证书请求文件文件(CSR,Cerificate Signing Request)，
有了这个文件之后再利用CA根证书生成最终的证书：
```
# 生成服务端私钥
openssl genrsa -out server.key 1024
# 生成证书请求文件
openssl req -new -key server.key -out server.csr
# 生成最终证书文件，-day指定证书有效期
openssl x509 -req -days 365 -sha256 -CA ca.crt -CAkey ca.key -CAcreateserial -in server.csr -out server.crt
```
以上证书在Chrome55下测试没问题，但是Chrome61下测试提示Subject Alternative Name missing错误：
```
The certificate for this site does not contain a Subject Alternative Name extension containing a domain name or IP address.
```
>提示必须指定DNS Name或者IP地址，而指定这个必须要用v3的证书。
生成v3证书只需要比上面多加2个参数-extfile openssl.cnf -extensions v3_req，但是多了一个额外的配置文件，
这个文件里面可以填很多东西（完整配置文件参考这里），我们这里仅仅需要指定subjectAltName即可。
先准备一个名为openssl.cnf的文件，内容如下：
```
[v3_req]
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost.com
DNS.2 = www.localhost.com
DNS.3 = www.test123.com
#IP.1 = 127.0.0.1
```
解释一下，这里的alt_names指的是最终可以访问的域名或者IP，所以，其实一个证书是可以多个网站同时使用的。被访问域名只要满足DNS和IP中的一个，其证书就是合法的。
然后再来重新生成证书，为了对大家产生误导，我们再来一遍完整的过程：
```
# 生成服务端私钥
openssl genrsa -out server.key 1024
# 生成证书请求文件
openssl req -new -key server.key -out server.csr
# 生成最终证书文件，-day指定证书有效期
openssl x509 -req -days 365 -sha256 -CA ca.crt -CAkey ca.key -CAcreateserial -extfile openssl.cnf -extensions v3_req -in server.csr -out server.crt
```
#### 3.1.2.4. 生成客户端证书
如果需要实现HTTPS双向认证，还要按照上述服务端一模一样的操作再生成一个client.crt和client.key，这里我们就不重述了，90%的场景都是不需要双向认证的。
#### 3.1.2.5. Windows导入证书
上述步骤执行完之后生成了如下文件：
我们只需要双击ca.crt导入这个自制根证书即可，以后只要是利用这个证书生成证书浏览器都会认为是可信任的，这让我想起了12306干的勾当，如果你能把你这个根证书推广到全世界的电脑和手机，那么你也可以成立一家CA公司专门卖证书了，哈哈。
导入的时候注意证书存储位置
## 参考
- [HTTPS从认识到线上实战全记录](http://blog.haoji.me/https.html)
- [SSL证书安装指引](https://cloud.tencent.com/document/product/400/4143)
- [Linux下nginx的安装部署和配置](http://blog.haoji.me/linux-nginx.html#openssl--an-zhuang)
================================================
FILE: 2.1.0 HTML 全局属性.md
================================================
# HTML 全局属性
## 1、accesskey
规定激活元素的快捷键
```
HTML
CSS
```
alt+或者alt+shift+
除了Opera几乎都支持
只有`,,