Showing preview only (1,012K chars total). Download the full file or copy to clipboard to get everything.
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
```
<script>
(function () {
// 1px
var dpr = window.devicePixelRatio;
var isIPhone = window.navigator.appVersion.match(/iphone/gi);
var UA = window.navigator.userAgent;
var hacks = ['m1 note']; // 对 meizu 某型号进行hack，主要原因是 dpr为3，但是手机屏幕分辨率不够，会出现 1px border 过细的问题，这种问题主要出现在部分魅族手机上
var flag = false;
hacks.forEach(function (item) {
if (UA.indexOf(item) >= 0) {
flag = true;
return;
}
});
if (!isIPhone && flag) {
dpr = dpr >= 2 ? 2 : dpr;
}
var scale = 1 / dpr;
var metaEl = document.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover');
if (document.documentElement.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = document.createElement('div');
wrap.appendChild(metaEl);
document.write(wrap.innerHTML);
}
})();
</script>
```
## 参考
- 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) <span class="std-rec">[1.3]</span>
- [Javascript编码规范 - ESNext补充篇](es-next-style-guide.md) <span class="std-rec">[draft]</span>
- [HTML编码规范](html-style-guide.md) <span class="std-rec">[1.2]</span>
- [CSS编码规范](css-style-guide.md) <span class="std-rec">[1.2]</span>
- [Less编码规范](less-code-style.md) <span class="std-rec">[1.1]</span>
- [E-JSON数据传输标准](e-json.md) <span class="std-rec">[1.0]</span>
- [模块和加载器规范](module.md) <span class="std-rec">[1.1]</span>
- [包结构规范](package.md) <span class="std-rec">[1.1]</span>
- [项目目录结构规范](directory.md) <span class="std-rec">[1.1]</span>
- [图表库标准](chart.md) <span class="std-rec">[1.0]</span>
- [react编码规范](react-style-guide.md) <span class="std-rec">[draft]</span>
## 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的引擎:
<meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
创建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 : <!DOCTYPE html>
* 指出页面的语言: <html lang="en-us"> <html lang="zh-cmn-Hans">
* 声明一个明确的字符编码: <head> <meta charset="UTF-8"></head>
* IE 兼容模式: 使用兼容性 <meta> 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要，通常通过 edge mode 来通知 IE 使用最新的兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
* 通常在引入 CSS 和 JavaScript 时不需要指明 type，css 放 head 头部
* 属性顺序： HTML 属性应该按照特定的顺序出现以保证易读性。尽量大部分用 class，少使用 id
- class
- id, name
- data-*
- src, for, type, href, value
- title, alt
- role, aria-*
```
<a class="..." id="..." data-toggle="modal" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
```
* Boolean 属性指不需要声明取值的属性
<input type="checkbox" value="1" checked> <input type="text" disabled>
================================================
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
规定激活元素的快捷键
```
<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a><br />
<a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a>
```
alt+或者alt+shift+
除了Opera几乎都支持
只有`<a>,<area>,<button>,<input>,<label>,<legend>`以及`<textarea>`
## 2、class
规定元素的类名。
class 属性大多数用于指向样式表中的类，不过，也可以利用他通过 JavaScript 来改变带有指定 class 的 HTML 元素。
class 不能在以下HTML元素中使用：base,head,html,meta,param,script,style以及title
可以给 class 赋予多个 class，例如
```
<span class="left_menu important">
```
## 3、contenteditable 5
```
<p contenteditable="true">这是一个可编辑的段落。</p>
```
规定元素内容是否可编辑。
所有浏览器都支持
## 4、contextmenu 5
`contextmenu`当右键点击元素时，会出现上下文菜单。
`contextmenu`属性的值是要打开的`<menu>`元素的 id。
只有`FireFox`支持
语法
```
<element contextmenu="menu_id">
```
## 5、data-* 5
使用`data-*`属性来嵌入自定义数据
```
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
```
所有浏览器都支持
`data-*`用来存储页面或者应用程序的私有自定义数据。
`data-*`属性赋予我们所在 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据可以被页面的 javascript 所使用，以创建更好的用户体验（不进行 Ajax 调用或者服务端进行查询）。
`data-*`属性包括两部分：
属性名不应该包含任何的大写部分，并且在前缀 data- 之后必须有一个字符
属性值可以是任意字符串
所有浏览器都支持
## 6、dir
规定文本的方向
```
<p dir="rtl">Write this text right-to-left!</p>
``
在`<base>,<br>,<frame>,<frameset>,<hr>,<iframe>,<param>`以及`<script>`无效
左到右 右到左
```
<element dir="ltr|rtl">
```
## 7、draggable 5
```
<p draggable="true">这是一个可拖动的段落。</p>
```
IE8以前不支持
规定元素是否可以被拖动
链接和图像是默认可拖动的
值：
true、flase、auto浏览器默认
## 8、dropzone 5
拖动数据会产生被拖动数据的副本
所有浏览器都不支持
值：
copy：产生副本
move：拖动数据会导致被拖动数据被移动到新位置
link：拖动数据会产生指向原始数据的链接
## 9、hidden 5
隐藏控件
hidden 是个 boolean，如果设置该属性，他规定元素仍为或者不再相关
浏览器不应显示已规定 hidden 属性的元素
hidden 属性也可以用于防止用户查看元素，直到匹配某些条件，然后 javascript 可以删除复选框，使得元素可见
除了IE都支持
## 10、id
id属性规定HTML元素的唯一id。
id在HTML文档中必须是唯一的。
id属性可以作为链接锚，通过javascript或通过css为带有指定id的元素改变或者添加样式
## 11、lang
规定元素内部的语言
```
<p lang="fr">Ceci est un paragraphe.</p>
```
所有浏览器都支持
## 12、spellcheck 5
进行拼写检查的可编辑段落
```
<p contenteditable="true" spellcheck="true">这是一个段落。</p>
IE10,FireFox,Opera,chrome以及safari支持
```
对元素进行拼写和语法检查，可以对以下内容进行检查
input 的文本值 非密码
`<textarea> `元素中的文本
可编辑元素中的文本
值：true false
## 13、style
style规定元素的行内样式
style将覆盖任何全局的样式设定
## 14、tabindex
带有指定 tab 键顺序的链接
tabindex 属性规定元素的 tab 键控制次序。
除了 safari 都支持
以下元素支持 tabindex 属性，`<a>,<area>,<button>,<input>,<object>`以及`textarea`
语法
```
<element tabindex="number">
```
## 15、title
title 属性规定元素的基本信息。
这些信息会在鼠标移到元素上显示一段工具提示文本
title 经常与 form 以及 a 元素一起使用，已提供关于输入格式和链接目标的信息。
## 16、translate 5
是否翻译元素内容
规定不应翻译某些内容
```
<p translate="no">请勿翻译本段。</p>
<p>本段可被译为任意语言。</p>
```
所有主流浏览器都无法支持
提示：请使用 class=notranslate 替代
值：yes，no
## 参考
- [HTML 全局属性](https://blog.csdn.net/qq_30970807/article/details/53165935)
================================================
FILE: 2.1.1 从输入URL到页面加载发生了什么.md
================================================
# 从输入URL到页面加载发生了什么
* segmentdefault: [从输入URL到页面加载发生了什么](https://segmentfault.com/a/1190000006879700)
```
总体来说分为以下几个过程:
DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束
```
## 通常经过
1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、ajax查询
- 其中，步骤2的具体过程是：
- 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
- 操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)；
- 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
- ISP缓存：若上述均失败，继续向ISP搜索。
## “三次握手”的过程是，
>发送端先发送一个带有SYN（synchronize）标志的数据包给接收端，在一定的延迟时间内等待接收的回复。
接收端收到数据包后，传回一个带有SYN/ACK标志的数据包以示传达确认信息。
接收方收到后再发送一个带有ACK标志的数据包给接收端以示握手成功。
在这个过程中，如果发送端在规定延迟时间内没有收到回复则默认接收方没有收到请求，而再次发送，直到收到回复为止。
- 第一次
- 第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。
- 第二次
- 第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
- 第三次
- 第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
完成三次握手，客户端与服务器开始传送数据，在上述过程中，还有一些重要的概念：
- SYN：同步序列编号（Synchronize Sequence Numbers）。
- ACK (Acknowledgement）即是确认字符
## 参考
- [从输入url到页面展示到底发生了什么](https://www.jianshu.com/p/23b388f8e5aa)
- [从输入URL到页面展示的详细过程](https://blog.csdn.net/wlk2064819994/article/details/79756669)
- [从输入URL到浏览器显示页面发生了什么](https://www.cnblogs.com/kongxy/p/4615226.html)
- [一个页面从输入URL到页面加载显示完成，这个过程都发生什么？](https://www.cnblogs.com/WaTa/p/5477374.html)
================================================
FILE: 2.1.2 把一个简单的div元素的属性都打印出来.md
================================================
# 把一个简单的div元素的属性都打印出来
```
var docu = document.createElement('div')
var str = '';
for(var key in docu){
str += key+'';
}
"aligntitlelangtranslatedirdatasethiddentabIndexaccessKeydraggablespellcheckautocapitalizecontentEditableisContentEditableinputModeoffsetParentoffsetTopoffsetLeftoffsetWidthoffsetHeightstyleinnerTextouterTextonabortonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncuechangeondblclickondragondragendondragenterondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusoninputoninvalidonkeydownonkeypressonkeyuponloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponmousewheelonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonseekedonseekingonselectonstalledonsubmitonsuspendontimeupdateontoggleonvolumechangeonwaitingonwheelonauxclickongotpointercaptureonlostpointercaptureonpointerdownonpointermoveonpointeruponpointercancelonpointeroveronpointeroutonpointerenteronpointerleavenonceclickfocusblurnamespaceURIprefixlocalNametagNameidclassNameclassListslotattributesshadowRootassignedSlotinnerHTMLouterHTMLscrollTopscrollLeftscrollWidthscrollHeightclientTopclientLeftclientWidthclientHeightonbeforecopyonbeforecutonbeforepasteoncopyoncutonpasteonsearchonselectstartpreviousElementSiblingnextElementSiblingchildrenfirstElementChildlastElementChildchildElementCountonwebkitfullscreenchangeonwebkitfullscreenerrorsetPointerCapturereleasePointerCapturehasPointerCapturehasAttributesgetAttributeNamesgetAttributegetAttributeNSsetAttributesetAttributeNSremoveAttributeremoveAttributeNShasAttributehasAttributeNSgetAttributeNodegetAttributeNodeNSsetAttributeNodesetAttributeNodeNSremoveAttributeNodeclosestmatcheswebkitMatchesSelectorattachShadowgetElementsByTagNamegetElementsByTagNameNSgetElementsByClassNameinsertAdjacentElementinsertAdjacentTextinsertAdjacentHTMLrequestPointerLockgetClientRectsgetBoundingClientRectscrollIntoViewscrollIntoViewIfNeededanimatebeforeafterreplaceWithremoveprependappendquerySelectorquerySelectorAllwebkitRequestFullScreenwebkitRequestFullscreenattributeStyleMapscrollscrollToscrollBycreateShadowRootgetDestinationInsertionPointscomputedStyleMapELEMENT_NODEATTRIBUTE_NODETEXT_NODECDATA_SECTION_NODEENTITY_REFERENCE_NODEENTITY_NODEPROCESSING_INSTRUCTION_NODECOMMENT_NODEDOCUMENT_NODEDOCUMENT_TYPE_NODEDOCUMENT_FRAGMENT_NODENOTATION_NODEDOCUMENT_POSITION_DISCONNECTEDDOCUMENT_POSITION_PRECEDINGDOCUMENT_POSITION_FOLLOWINGDOCUMENT_POSITION_CONTAINSDOCUMENT_POSITION_CONTAINED_BYDOCUMENT_POSITION_IMPLEMENTATION_SPECIFICnodeTypenodeNamebaseURIisConnectedownerDocumentparentNodeparentElementchildNodesfirstChildlastChildpreviousSiblingnextSiblingnodeValuetextContenthasChildNodesgetRootNodenormalizecloneNodeisEqualNodeisSameNodecompareDocumentPositioncontainslookupPrefixlookupNamespaceURIisDefaultNamespaceinsertBeforeappendChildreplaceChildremoveChildaddEventListenerremoveEventListenerdispatchEvent"
```
## 参考
- https://github.com/livoras/blog/issues/13
================================================
FILE: 2.1.3 html中的b和strong标签有什么区别.md
================================================
# html中的`<b>`和`<strong>`有什么区别
两者虽然在网页中显示效果一样，但实际目的不同。
`<b>`这个标签对应 `bold`，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式／风格需求；
`<strong>`这个标签意思是加强，表示该文本比较重要，提醒读者／终端注意。为了达到这个目的，浏览器等终端将其加粗显示；
总结：`<b>`为了加粗而加粗，`<strong>`为了标明重点而加粗。
<b></b>标签的加粗只是为了加粗
<strong></strong>标签加粗是为了突出重点
在网页中使用<strong></strong>突出的内容更容易被网页搜索蜘蛛搜索到。
=====================================
- title与h1的区别:
定义：title是网站标题，h1是文章主题
作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；
h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的
- b与strong,i与em的区别:
但从视觉上效果观看b与strong、i与em是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签
建议：为了符合CSS3的规范，b应尽量少用而改用strong ,i应尽量少用而改用em
- img中的alt与title属性区别:
alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方
title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover
- src与href的区别:
href，.是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。
src是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用
src通常用作“拿取”（引入），href 用作 “连结前往”（引用）
---------------------
## 参考
- [HTML 元素 <b> 和 <strong> 有什么区别](https://www.zhihu.com/question/20961933)
- [title与h1、b与strong、i与em、img的alt与title、src与href有什么区别？](https://blog.csdn.net/vivian_1122/article/details/80235052)
================================================
FILE: 2.1.4 img标签的方方面面.md
================================================
# IMG>标签的方方面面
## 问题1：如果在一个页面上插入<img>标签，有哪些属性是必需的？
答案是src和alt。
## 问题2：<img>标签在HTML和XHTML中有什么区别？
在 HTML 中，<img> 标签没有结束标签。例如：
```
<img src=" http://www.w3school.com.cn/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" >
```
在 XHTML 中，<img> 标签必须被正确地关闭。
```
<img src=" http://www.w3school.com.cn/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
```
## 问题3：在一个页面上插入<img>标签，为什么说最好要使用height和width属性？
您在浏览网页的时候，可能会遇到这种情况：随着页面中的图像加载并成功显示，页面上的内容会随之发生不规律的移动，影响您的阅读。这种情况就是因为页面上的图像没有定义height和width属性而导致的。
如果没有定义图片的height和width属性，那么浏览器为了能够显示每一个加载的图像，它需要先下载图像，然后解析出图像的高度和宽度，并在显示窗口留出相应的屏幕空间，这样就会导致浏览器不断地重新计算/调整页面的布局，这可能会延迟文档的显示，并导致页面重绘。
因此，笔者建议使用<img>的 height 和 width 属性来指定图像的尺寸。这样的话，浏览器在下载图像之前就为其预留出了空间，从而可以加速文档的显示，还可以避免文档内容的移动而引起页面重绘。
## 问题4：<img>标签的onload/onerror/onabort事件，在什么情况下会被触发？
onload: 事件会在图像加载完成后立即发生。
onerror: 事件会在文档或图像加载过程中发生错误时被触发。
onabort: 事件会在图像加载被中断时发生。例如用户单击了浏览器的Stop按钮，或者在图像下载的过程中。
## 参考
- [IMG>标签的方方面面](http://www.cnblogs.com/hencehong/archive/2012/10/06/something_interesting_about_image.html)
================================================
FILE: 2.1.5 前端 performance.md
================================================
# performance
>Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能，包括 Navigation Timing API和高分辨率时间数据。
- [caniuse](https://caniuse.com/#feat=nav-timing)
## performance
>Chrome 浏览器控制台中执行 window.performance ,看到
```
performance： {
// memory 是非标准属性，只在 Chrome 有
memory: {
jsHeapSizeLimit: 2181038080, // JS 对象（包括V8引擎内部对象）占用的内存，一定小于 totalJSHeapSize
totalJSHeapSize: 31213287, // 可使用的内存
usedJSHeapSize: 25468639 // 内存大小限制
},
navigation: {
redirectCount: 0, // 如果有重定向的话，页面通过几次重定向跳转而来
type: 0 // 0 即 TYPE_NAVIGATENEXT 正常进入的页面（非刷新、非重定向等）
// 1 即 TYPE_RELOAD 通过 window.location.reload() 刷新的页面
// 2 即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面（历史记录）
// 255 即 TYPE_UNDEFINED 非以上方式进入的页面
},
onresourcetimingbufferfull: null,
timeOrigin: 1555038706939.7961,
timing: {
connectEnd: 1555038706941,
connectStart: 1555038706941,
domComplete: 1555038712474,
domContentLoadedEventEnd: 1555038708147,
domContentLoadedEventStart: 1555038708146,
domInteractive: 1555038708146,
domLoading: 1555038707812,
domainLookupEnd: 1555038706941,
domainLookupStart: 1555038706941,
fetchStart: 1555038706941,
loadEventEnd: 1555038712482,
loadEventStart: 1555038712474,
navigationStart: 1555038706939,
redirectEnd: 0,
redirectStart: 0,
requestStart: 1555038706943,
responseEnd: 1555038708125,
responseStart: 1555038707802,
secureConnectionStart: 0,
unloadEventEnd: 1555038707807,
unloadEventStart: 1555038707807
// 注释解析
// 在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，如果无前一个网页 unload ，则与 fetchStart 值相等
navigationStart: 1441112691935,
// 前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0
unloadEventStart: 0,
// 和 unloadEventStart 相对应，返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
unloadEventEnd: 0,
// 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0
redirectStart: 0,
// 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为 0
redirectEnd: 0,
// 浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前
fetchStart: 1441112692155,
// DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
domainLookupStart: 1441112692155,
// DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
domainLookupEnd: 1441112692155,
// HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等
// 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
connectStart: 1441112692155,
// HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等
// 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间
// 注意这里握手结束，包括安全连接建立完成、SOCKS 授权通过
connectEnd: 1441112692155,
// HTTPS 连接开始的时间，如果不是安全连接，则值为 0
secureConnectionStart: 0,
// HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存
// 连接错误重连时，这里显示的也是新建立连接的时间
requestStart: 1441112692158,
// HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
responseStart: 1441112692686,
// HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
responseEnd: 1441112692687,
// 开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关事件
domLoading: 1441112692690,
// 完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出 readystatechange 相关事件
// 注意只是 DOM 树解析完成，这时候并没有开始加载网页内的资源
domInteractive: 1441112693093,
// DOM 解析完成后，网页内资源加载开始的时间
// 在 DOMContentLoaded 事件抛出前发生
domContentLoadedEventStart: 1441112693093,
// DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）
domContentLoadedEventEnd: 1441112693101,
// DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件
domComplete: 1441112693214,
// load 事件发送给文档，也即 load 回调函数开始执行的时间
// 注意如果没有绑定 load 事件，值为 0
loadEventStart: 1441112693214,
// load 事件的回调函数执行完毕的时间
loadEventEnd: 1441112693215
}
}
```
## 参考
- [MDN-performance](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/performance)
- [alloyteam.com/2015/09/explore-performance/](http://www.alloyteam.com/2015/09/explore-performance/)
================================================
FILE: 2.1.6 HTTP URL最大长度.md
================================================
# 2.1.6 HTTP URL最大长度
>HTTP RFC2616协议没有规定URL的最大长度，但规定服务器如果不能处理太长的URL，就得返回414状态码（Request-URI Too Long）。
>HTTP RFC2616协议指出，某些旧的客户端或代理，可能无法处理超过255个字节的URI。
>既然HTTP协议没有规定URL的最大长度，那么URL的最大长度与用户的浏览器有关，同时和服务器能够处理的最大长度URL有关。
>站点地图协议（sitemap protocol），限制URL的长度是2048，如果你想让搜索引擎能够搜索到你，2048是最大极限了。
>Google最大能抓取和索引2047个字节的URL，但是，用户点击的时候会返回414，经过测试，Google的SERP连接，最大不能超过1855个字符，超过这个数，用户点击则返回414。
>IE8的URL的最大URL长度是2083个字节，其中路径部分（Path）最大长度是2048个字节。IE9也有类似限制，IE10也只接受2083个字节。虽然点击URL长度比这个长的连接依然可以工作，但地址栏只显示前2083个字节。
有网友测试了个浏览器和服务器支持的最大URL长度，附表如下：
| 浏览器 | URL最大限制|
| --:| --:|
IE | URL最大限制是2083个字节，Path长度最大是2048字节（Get请求）。
Firefox | 65536
Safari | 80000以上
Opera | 190000字节以上
Chrome | 8182字节
Apache Server | 8192字节
IIS |16384字节
Perl HTTP::Daemon | 至少8000字节
## 参考
- [HTTP URL最大长度](https://blog.csdn.net/woxueliuyun/article/details/41866611)
================================================
FILE: 2.1.7 文件上传中的content-type.md
================================================
# 2.1.7 文件上传中的content-type
## application/x-www-form-urlencoded
>在最开始的请求方式中，请求参数都是放在url中，表单提交的时候，都是以key=&value=的方式写在url后面。这也是浏览器表单提交的默认方式。
## multipart/form-data
>此种方式多用于**文件上传**，表单数据都保存在http的正文部分，各个表单项之间用boundary分开；
- 使用FormData，在构造这个对象的时候，把表单的对象，作为一个参数放进去，就可以了，然后FormData，就会得到这个表单对象里面的所有的参数，
甚至我们在表单中，都不需要声明enctype ="multipart/form-data" ，就可以直接提交。
## application/json
>现在越来越多的应用使用application/json,用来告诉服务端消息主体是序列化的json字符串。
由于json规范的流行，各大浏览器都开始原生支持JSON.stringfy
================================================
FILE: 2.1.7.1 文件上传 Media Types.md
================================================
# 2.1.7.1 文件上传 Media Types
1d-interleaved-parityfec application/1d-interleaved-parityfec [RFC6015]
3gpdash-qoe-report+xml application/3gpdash-qoe-report+xml [_3GPP][Ozgur_Oyman]
3gppHal+json application/3gppHal+json [_3GPP][Ulrich_Wiehe]
3gppHalForms+json application/3gppHalForms+json [_3GPP][Ulrich_Wiehe]
3gpp-ims+xml application/3gpp-ims+xml [_3GPP][John_M_Meredith]
A2L application/A2L [ASAM][Thomas_Thomsen]
activemessage application/activemessage [Ehud_Shapiro]
activity+json application/activity+json [W3C][Benjamin_Goering]
alto-costmap+json application/alto-costmap+json [RFC7285]
alto-costmapfilter+json application/alto-costmapfilter+json [RFC7285]
alto-directory+json application/alto-directory+json [RFC7285]
alto-endpointprop+json application/alto-endpointprop+json [RFC7285]
alto-endpointpropparams+json application/alto-endpointpropparams+json [RFC7285]
alto-endpointcost+json application/alto-endpointcost+json [RFC7285]
alto-endpointcostparams+json application/alto-endpointcostparams+json [RFC7285]
alto-error+json application/alto-error+json [RFC7285]
alto-networkmapfilter+json application/alto-networkmapfilter+json [RFC7285]
alto-networkmap+json application/alto-networkmap+json [RFC7285]
alto-updatestreamcontrol+json application/alto-updatestreamcontrol+json [RFC8895]
alto-updatestreamparams+json application/alto-updatestreamparams+json [RFC8895]
AML application/AML [ASAM][Thomas_Thomsen]
andrew-inset application/andrew-inset [Nathaniel_Borenstein]
applefile application/applefile [Patrik_Faltstrom]
ATF application/ATF [ASAM][Thomas_Thomsen]
ATFX application/ATFX [ASAM][Thomas_Thomsen]
atom+xml application/atom+xml [RFC4287][RFC5023]
atomcat+xml application/atomcat+xml [RFC5023]
atomdeleted+xml application/atomdeleted+xml [RFC6721]
atomicmail application/atomicmail [Nathaniel_Borenstein]
atomsvc+xml application/atomsvc+xml [RFC5023]
atsc-dwd+xml application/atsc-dwd+xml [ATSC]
atsc-dynamic-event-message application/atsc-dynamic-event-message [ATSC]
atsc-held+xml application/atsc-held+xml [ATSC]
atsc-rdt+json application/atsc-rdt+json [ATSC]
atsc-rsat+xml application/atsc-rsat+xml [ATSC]
ATXML application/ATXML [ASAM][Thomas_Thomsen]
auth-policy+xml application/auth-policy+xml [RFC4745]
bacnet-xdd+zip application/bacnet-xdd+zip [ASHRAE][Dave_Robin]
batch-SMTP application/batch-SMTP [RFC2442]
beep+xml application/beep+xml [RFC3080]
calendar+json application/calendar+json [RFC7265]
calendar+xml application/calendar+xml [RFC6321]
call-completion application/call-completion [RFC6910]
CALS-1840 application/CALS-1840 [RFC1895]
captive+json application/captive+json [RFC8908]
cbor application/cbor [RFC8949]
cbor-seq application/cbor-seq [RFC8742]
cccex application/cccex [_3GPP]
ccmp+xml application/ccmp+xml [RFC6503]
ccxml+xml application/ccxml+xml [RFC4267]
CDFX+XML application/CDFX+XML [ASAM][Thomas_Thomsen]
cdmi-capability application/cdmi-capability [RFC6208]
cdmi-container application/cdmi-container [RFC6208]
cdmi-domain application/cdmi-domain [RFC6208]
cdmi-object application/cdmi-object [RFC6208]
cdmi-queue application/cdmi-queue [RFC6208]
cdni application/cdni [RFC7736]
CEA application/CEA [ASAM][Thomas_Thomsen]
cea-2018+xml application/cea-2018+xml [Gottfried_Zimmermann]
cellml+xml application/cellml+xml [RFC4708]
cfw application/cfw [RFC6230]
clr application/clr [IMS_Global][Andy_Miller]
clue_info+xml application/clue_info+xml [RFC8846]
clue+xml application/clue+xml [RFC8847]
cms application/cms [RFC7193]
cnrp+xml application/cnrp+xml [RFC3367]
coap-group+json application/coap-group+json [RFC7390]
coap-payload application/coap-payload [RFC8075]
commonground application/commonground [David_Glazer]
conference-info+xml application/conference-info+xml [RFC4575]
cpl+xml application/cpl+xml [RFC3880]
cose application/cose [RFC-ietf-cose-rfc8152bis-struct-15]
cose-key application/cose-key [RFC-ietf-cose-rfc8152bis-struct-15]
cose-key-set application/cose-key-set [RFC-ietf-cose-rfc8152bis-struct-15]
csrattrs application/csrattrs [RFC7030]
csta+xml application/csta+xml [Ecma_International_Helpdesk]
CSTAdata+xml application/CSTAdata+xml [Ecma_International_Helpdesk]
csvm+json application/csvm+json [W3C][Ivan_Herman]
cwt application/cwt [RFC8392]
cybercash application/cybercash [Donald_E._Eastlake_3rd]
dash+xml application/dash+xml [Thomas_Stockhammer][ISO-IEC_JTC1]
dashdelta application/dashdelta [David_Furbeck]
davmount+xml application/davmount+xml [RFC4709]
dca-rft application/dca-rft [Larry_Campbell]
DCD application/DCD [ASAM][Thomas_Thomsen]
dec-dx application/dec-dx [Larry_Campbell]
dialog-info+xml application/dialog-info+xml [RFC4235]
dicom application/dicom [RFC3240]
dicom+json application/dicom+json [DICOM_Standards_Committee][David_Clunie][James_F_Philbin]
dicom+xml application/dicom+xml [DICOM_Standards_Committee][David_Clunie][James_F_Philbin]
DII application/DII [ASAM][Thomas_Thomsen]
DIT application/DIT [ASAM][Thomas_Thomsen]
dns application/dns [RFC4027]
dns+json application/dns+json [RFC8427]
dns-message application/dns-message [RFC8484]
dots+cbor application/dots+cbor [RFC8782]
dskpp+xml application/dskpp+xml [RFC6063]
dssc+der application/dssc+der [RFC5698]
dssc+xml application/dssc+xml [RFC5698]
dvcs application/dvcs [RFC3029]
ecmascript application/ecmascript [RFC4329]
EDI-consent application/EDI-consent [RFC1767]
EDIFACT application/EDIFACT [RFC1767]
EDI-X12 application/EDI-X12 [RFC1767]
efi application/efi [UEFI_Forum][Samer_El-Haj-Mahmoud]
elm+json application/elm+json [HL7][Bryn_Rhodes]
elm+xml application/elm+xml [HL7][Bryn_Rhodes]
EmergencyCallData.cap+xml application/EmergencyCallData.cap+xml [RFC8876]
EmergencyCallData.Comment+xml application/EmergencyCallData.Comment+xml [RFC7852]
EmergencyCallData.Control+xml application/EmergencyCallData.Control+xml [RFC8147]
EmergencyCallData.DeviceInfo+xml application/EmergencyCallData.DeviceInfo+xml [RFC7852]
EmergencyCallData.eCall.MSD application/EmergencyCallData.eCall.MSD [RFC8147]
EmergencyCallData.ProviderInfo+xml application/EmergencyCallData.ProviderInfo+xml [RFC7852]
EmergencyCallData.ServiceInfo+xml application/EmergencyCallData.ServiceInfo+xml [RFC7852]
EmergencyCallData.SubscriberInfo+xml application/EmergencyCallData.SubscriberInfo+xml [RFC7852]
EmergencyCallData.VEDS+xml application/EmergencyCallData.VEDS+xml [RFC8148]
emma+xml application/emma+xml [W3C][http://www.w3.org/TR/2007/CR-emma-20071211/#media-type-registration][ISO-IEC_JTC1]
emotionml+xml application/emotionml+xml [W3C][Kazuyuki_Ashimura]
encaprtp application/encaprtp [RFC6849]
epp+xml application/epp+xml [RFC5730]
epub+zip application/epub+zip [International_Digital_Publishing_Forum][William_McCoy]
eshop application/eshop [Steve_Katz]
example application/example [RFC4735]
exi application/exi [W3C][http://www.w3.org/TR/2009/CR-exi-20091208/#mediaTypeRegistration]
expect-ct-report+json application/expect-ct-report+json [RFC-ietf-httpbis-expect-ct-08]
fastinfoset application/fastinfoset [ITU-T_ASN.1_Rapporteur][ISO-IEC_JTC1_SC6_ASN.1_Rapporteur]
fastsoap application/fastsoap [ITU-T_ASN.1_Rapporteur][ISO-IEC_JTC1_SC6_ASN.1_Rapporteur]
fdt+xml application/fdt+xml [RFC6726]
fhir+json application/fhir+json [HL7][Grahame_Grieve]
fhir+xml application/fhir+xml [HL7][Grahame_Grieve]
fits application/fits [RFC4047]
flexfec application/flexfec [RFC8627]
font-sfnt - DEPRECATED in favor of font/sfnt application/font-sfnt [Levantovsky][ISO-IEC_JTC1][RFC8081]
font-tdpfr application/font-tdpfr [RFC3073]
font-woff - DEPRECATED in favor of font/woff application/font-woff [W3C][RFC8081]
framework-attributes+xml application/framework-attributes+xml [RFC6230]
geo+json application/geo+json [RFC7946]
geo+json-seq application/geo+json-seq [RFC8142]
geopackage+sqlite3 application/geopackage+sqlite3 [OGC][Scott_Simmons]
geoxacml+xml application/geoxacml+xml [OGC][Scott_Simmons]
gltf-buffer application/gltf-buffer [Khronos][Saurabh_Bhatia]
gml+xml application/gml+xml [OGC][Clemens_Portele]
gzip application/gzip [RFC6713]
H224 application/H224 [RFC4573]
held+xml application/held+xml [RFC5985]
http application/http [RFC7230]
hyperstudio application/hyperstudio [Michael_Domino]
ibe-key-request+xml application/ibe-key-request+xml [RFC5408]
ibe-pkg-reply+xml application/ibe-pkg-reply+xml [RFC5408]
ibe-pp-data application/ibe-pp-data [RFC5408]
iges application/iges [Curtis_Parks]
im-iscomposing+xml application/im-iscomposing+xml [RFC3994]
index application/index [RFC2652]
index.cmd application/index.cmd [RFC2652]
index.obj application/index.obj [RFC2652]
index.response application/index.response [RFC2652]
index.vnd application/index.vnd [RFC2652]
inkml+xml application/inkml+xml [Kazuyuki_Ashimura]
IOTP application/IOTP [RFC2935]
ipfix application/ipfix [RFC5655]
ipp application/ipp [RFC8010]
ISUP application/ISUP [RFC3204]
its+xml application/its+xml [W3C][ITS-IG-W3C]
javascript application/javascript [RFC4329]
jf2feed+json application/jf2feed+json [W3C][Ivan_Herman]
jose application/jose [RFC7515]
jose+json application/jose+json [RFC7515]
jrd+json application/jrd+json [RFC7033]
jscalendar+json application/jscalendar+json [RFC-ietf-calext-jscalendar-32]
json application/json [RFC8259]
json-patch+json application/json-patch+json [RFC6902]
json-seq application/json-seq [RFC7464]
jwk+json application/jwk+json [RFC7517]
jwk-set+json application/jwk-set+json [RFC7517]
jwt application/jwt [RFC7519]
kpml-request+xml application/kpml-request+xml [RFC4730]
kpml-response+xml application/kpml-response+xml [RFC4730]
ld+json application/ld+json [W3C][Ivan_Herman]
lgr+xml application/lgr+xml [RFC7940]
link-format application/link-format [RFC6690]
load-control+xml application/load-control+xml [RFC7200]
lost+xml application/lost+xml [RFC5222]
lostsync+xml application/lostsync+xml [RFC6739]
lpf+zip application/lpf+zip [W3C][Ivan_Herman]
LXF application/LXF [ASAM][Thomas_Thomsen]
mac-binhex40 application/mac-binhex40 [Patrik_Faltstrom]
macwriteii application/macwriteii [Paul_Lindner]
mads+xml application/mads+xml [RFC6207]
marc application/marc [RFC2220]
marcxml+xml application/marcxml+xml [RFC6207]
mathematica application/mathematica [Wolfram]
mathml+xml application/mathml+xml [W3C][http://www.w3.org/TR/MathML3/appendixb.html]
mathml-content+xml application/mathml-content+xml [W3C][http://www.w3.org/TR/MathML3/appendixb.html]
mathml-presentation+xml application/mathml-presentation+xml [W3C][http://www.w3.org/TR/MathML3/appendixb.html]
mbms-associated-procedure-description+xml application/mbms-associated-procedure-description+xml [_3GPP]
mbms-deregister+xml application/mbms-deregister+xml [_3GPP]
mbms-envelope+xml application/mbms-envelope+xml [_3GPP]
mbms-msk-response+xml application/mbms-msk-response+xml [_3GPP]
mbms-msk+xml application/mbms-msk+xml [_3GPP]
mbms-protection-description+xml application/mbms-protection-description+xml [_3GPP]
mbms-reception-report+xml application/mbms-reception-report+xml [_3GPP]
mbms-register-response+xml application/mbms-register-response+xml [_3GPP]
mbms-register+xml application/mbms-register+xml [_3GPP]
mbms-schedule+xml application/mbms-schedule+xml [_3GPP][Eric_Turcotte]
mbms-user-service-description+xml application/mbms-user-service-description+xml [_3GPP]
mbox application/mbox [RFC4155]
media_control+xml application/media_control+xml [RFC5168]
media-policy-dataset+xml application/media-policy-dataset+xml [RFC6796]
mediaservercontrol+xml application/mediaservercontrol+xml [RFC5022]
merge-patch+json application/merge-patch+json [RFC7396]
metalink4+xml application/metalink4+xml [RFC5854]
mets+xml application/mets+xml [RFC6207]
MF4 application/MF4 [ASAM][Thomas_Thomsen]
mikey application/mikey [RFC3830]
mipc application/mipc [NCGIS][Bryan_Blank]
mmt-aei+xml application/mmt-aei+xml [ATSC]
mmt-usd+xml application/mmt-usd+xml [ATSC]
mods+xml application/mods+xml [RFC6207]
moss-keys application/moss-keys [RFC1848]
moss-signature application/moss-signature [RFC1848]
mosskey-data application/mosskey-data [RFC1848]
mosskey-request application/mosskey-request [RFC1848]
mp21 application/mp21 [RFC6381][David_Singer]
mp4 application/mp4 [RFC4337][RFC6381]
mpeg4-generic application/mpeg4-generic [RFC3640]
mpeg4-iod application/mpeg4-iod [RFC4337]
mpeg4-iod-xmt application/mpeg4-iod-xmt [RFC4337]
mrb-consumer+xml application/mrb-consumer+xml [RFC6917]
mrb-publish+xml application/mrb-publish+xml [RFC6917]
msc-ivr+xml application/msc-ivr+xml [RFC6231]
msc-mixer+xml application/msc-mixer+xml [RFC6505]
msword application/msword [Paul_Lindner]
mud+json application/mud+json [RFC8520]
multipart-core application/multipart-core [RFC8710]
mxf application/mxf [RFC4539]
n-quads application/n-quads [W3C][Eric_Prudhommeaux]
n-triples application/n-triples [W3C][Eric_Prudhommeaux]
nasdata application/nasdata [RFC4707]
news-checkgroups application/news-checkgroups [RFC5537]
news-groupinfo application/news-groupinfo [RFC5537]
news-transmission application/news-transmission [RFC5537]
nlsml+xml application/nlsml+xml [RFC6787]
node application/node [Node.js_TSC]
nss application/nss [Michael_Hammer]
oauth-authz-req+jwt application/oauth-authz-req+jwt [RFC-ietf-oauth-jwsreq-34]
ocsp-request application/ocsp-request [RFC6960]
ocsp-response application/ocsp-response [RFC6960]
octet-stream application/octet-stream [RFC2045][RFC2046]
ODA application/ODA [RFC1494]
odm+xml application/odm+xml [CDISC][Sam_Hume]
ODX application/ODX [ASAM][Thomas_Thomsen]
oebps-package+xml application/oebps-package+xml [RFC4839]
ogg application/ogg [RFC5334][RFC7845]
opc-nodeset+xml application/opc-nodeset+xml [OPC_Foundation]
oscore application/oscore [RFC8613]
oxps application/oxps [Ecma_International_Helpdesk]
p2p-overlay+xml application/p2p-overlay+xml [RFC6940]
parityfec application/parityfec [RFC3009]
passport application/passport [RFC8225]
patch-ops-error+xml application/patch-ops-error+xml [RFC5261]
pdf application/pdf [RFC8118]
PDX application/PDX [ASAM][Thomas_Thomsen]
pem-certificate-chain application/pem-certificate-chain [RFC8555]
pgp-encrypted application/pgp-encrypted [RFC3156]
pgp-keys application/pgp-keys [RFC3156]
pgp-signature application/pgp-signature [RFC3156]
pidf-diff+xml application/pidf-diff+xml [RFC5262]
pidf+xml application/pidf+xml [RFC3863]
pkcs10 application/pkcs10 [RFC5967]
pkcs7-mime application/pkcs7-mime [RFC8551][RFC7114]
pkcs7-signature application/pkcs7-signature [RFC8551]
pkcs8 application/pkcs8 [RFC5958]
pkcs8-encrypted application/pkcs8-encrypted [RFC8351]
pkcs12 application/pkcs12 [IETF]
pkix-attr-cert application/pkix-attr-cert [RFC5877]
pkix-cert application/pkix-cert [RFC2585]
pkix-crl application/pkix-crl [RFC2585]
pkix-pkipath application/pkix-pkipath [RFC6066]
pkixcmp application/pkixcmp [RFC2510]
pls+xml application/pls+xml [RFC4267]
poc-settings+xml application/poc-settings+xml [RFC4354]
postscript application/postscript [RFC2045][RFC2046]
ppsp-tracker+json application/ppsp-tracker+json [RFC7846]
problem+json application/problem+json [RFC7807]
problem+xml application/problem+xml [RFC7807]
provenance+xml application/provenance+xml [W3C][Ivan_Herman]
prs.alvestrand.titrax-sheet application/prs.alvestrand.titrax-sheet [Harald_T._Alvestrand]
prs.cww application/prs.cww [Khemchart_Rungchavalnont]
prs.cyn application/prs.cyn [Cynthia_Revström]
prs.hpub+zip application/prs.hpub+zip [Giulio_Zambon]
prs.nprend application/prs.nprend [Jay_Doggett]
prs.plucker application/prs.plucker [Bill_Janssen]
prs.rdf-xml-crypt application/prs.rdf-xml-crypt [Toby_Inkster]
prs.xsf+xml application/prs.xsf+xml [Maik_Stührenberg]
pskc+xml application/pskc+xml [RFC6030]
pvd+json application/pvd+json [RFC8801]
rdf+xml application/rdf+xml [RFC3870]
route-apd+xml application/route-apd+xml [ATSC]
route-s-tsid+xml application/route-s-tsid+xml [ATSC]
route-usd+xml application/route-usd+xml [ATSC]
QSIG application/QSIG [RFC3204]
raptorfec application/raptorfec [RFC6682]
rdap+json application/rdap+json [RFC-ietf-regext-rfc7483bis-05]
reginfo+xml application/reginfo+xml [RFC3680]
relax-ng-compact-syntax application/relax-ng-compact-syntax [http://www.jtc1sc34.org/repository/0661.pdf]
remote-printing application/remote-printing [RFC1486][Marshall_Rose]
reputon+json application/reputon+json [RFC7071]
resource-lists-diff+xml application/resource-lists-diff+xml [RFC5362]
resource-lists+xml application/resource-lists+xml [RFC4826]
rfc+xml application/rfc+xml [RFC7991]
riscos application/riscos [Nick_Smith]
rlmi+xml application/rlmi+xml [RFC4662]
rls-services+xml application/rls-services+xml [RFC4826]
rpki-ghostbusters application/rpki-ghostbusters [RFC6493]
rpki-manifest application/rpki-manifest [RFC6481]
rpki-publication application/rpki-publication [RFC8181]
rpki-roa application/rpki-roa [RFC6481]
rpki-updown application/rpki-updown [RFC6492]
rtf application/rtf [Paul_Lindner]
rtploopback application/rtploopback [RFC6849]
rtx application/rtx [RFC4588]
samlassertion+xml application/samlassertion+xml [OASIS_Security_Services_Technical_Committee_SSTC]
samlmetadata+xml application/samlmetadata+xml [OASIS_Security_Services_Technical_Committee_SSTC]
sarif-external-properties+json application/sarif-external-properties+json [OASIS][David_Keaton][Michael_C._Fanning]
sarif+json application/sarif+json [OASIS][Michael_C._Fanning][Laurence_J._Golding]
sbe application/sbe [FIX_Trading_Community][Donald_L._Mendelson]
sbml+xml application/sbml+xml [RFC3823]
scaip+xml application/scaip+xml [SIS][Oskar_Jonsson]
scim+json application/scim+json [RFC7644]
scvp-cv-request application/scvp-cv-request [RFC5055]
scvp-cv-response application/scvp-cv-response [RFC5055]
scvp-vp-request application/scvp-vp-request [RFC5055]
scvp-vp-response application/scvp-vp-response [RFC5055]
sdp application/sdp [RFC8866]
secevent+jwt application/secevent+jwt [RFC8417]
senml-etch+cbor application/senml-etch+cbor [RFC8790]
senml-etch+json application/senml-etch+json [RFC8790]
senml-exi application/senml-exi [RFC8428]
senml+cbor application/senml+cbor [RFC8428]
senml+json application/senml+json [RFC8428]
senml+xml application/senml+xml [RFC8428]
sensml-exi application/sensml-exi [RFC8428]
sensml+cbor application/sensml+cbor [RFC8428]
sensml+json application/sensml+json [RFC8428]
sensml+xml application/sensml+xml [RFC8428]
sep-exi application/sep-exi [Robby_Simpson][ZigBee]
sep+xml application/sep+xml [Robby_Simpson][ZigBee]
session-info application/session-info [_3GPP][Frederic_Firmin]
set-payment application/set-payment [Brian_Korver]
set-payment-initiation application/set-payment-initiation [Brian_Korver]
set-registration application/set-registration [Brian_Korver]
set-registration-initiation application/set-registration-initiation [Brian_Korver]
SGML application/SGML [RFC1874]
sgml-open-catalog application/sgml-open-catalog [Paul_Grosso]
shf+xml application/shf+xml [RFC4194]
sieve application/sieve [RFC5228]
simple-filter+xml application/simple-filter+xml [RFC4661]
simple-message-summary application/simple-message-summary [RFC3842]
simpleSymbolContainer application/simpleSymbolContainer [_3GPP]
sipc application/sipc [NCGIS][Bryan_Blank]
slate application/slate [Terry_Crowley]
smil - OBSOLETED in favor of application/smil+xml application/smil [RFC4536]
smil+xml application/smil+xml [RFC4536]
smpte336m application/smpte336m [RFC6597]
soap+fastinfoset application/soap+fastinfoset [ITU-T_ASN.1_Rapporteur][ISO-IEC_JTC1_SC6_ASN.1_Rapporteur]
soap+xml application/soap+xml [RFC3902]
sparql-query application/sparql-query [W3C][http://www.w3.org/TR/2007/CR-rdf-sparql-query-20070614/#mediaType]
sparql-results+xml application/sparql-results+xml [W3C][http://www.w3.org/TR/2007/CR-rdf-sparql-XMLres-20070925/#mime]
spirits-event+xml application/spirits-event+xml [RFC3910]
sql application/sql [RFC6922]
srgs application/srgs [RFC4267]
srgs+xml application/srgs+xml [RFC4267]
sru+xml application/sru+xml [RFC6207]
ssml+xml application/ssml+xml [RFC4267]
stix+json application/stix+json [OASIS][Chet_Ensign]
swid+xml application/swid+xml [ISO-IEC_JTC1][David_Waltermire][Ron_Brill]
tamp-apex-update application/tamp-apex-update [RFC5934]
tamp-apex-update-confirm application/tamp-apex-update-confirm [RFC5934]
tamp-community-update application/tamp-community-update [RFC5934]
tamp-community-update-confirm application/tamp-community-update-confirm [RFC5934]
tamp-error application/tamp-error [RFC5934]
tamp-sequence-adjust application/tamp-sequence-adjust [RFC5934]
tamp-sequence-adjust-confirm application/tamp-sequence-adjust-confirm [RFC5934]
tamp-status-query application/tamp-status-query [RFC5934]
tamp-status-response application/tamp-status-response [RFC5934]
tamp-update application/tamp-update [RFC5934]
tamp-update-confirm application/tamp-update-confirm [RFC5934]
taxii+json application/taxii+json [OASIS][Chet_Ensign]
td+json application/td+json [W3C][Matthias_Kovatsch]
tei+xml application/tei+xml [RFC6129]
TETRA_ISI application/TETRA_ISI [ETSI][Miguel_Angel_Reina_Ortega]
thraud+xml application/thraud+xml [RFC5941]
timestamp-query application/timestamp-query [RFC3161]
timestamp-reply application/timestamp-reply [RFC3161]
timestamped-data application/timestamped-data [RFC5955]
tlsrpt+gzip application/tlsrpt+gzip [RFC8460]
tlsrpt+json application/tlsrpt+json [RFC8460]
tnauthlist application/tnauthlist [RFC8226]
trickle-ice-sdpfrag application/trickle-ice-sdpfrag [RFC8840]
trig application/trig [W3C][W3C_RDF_Working_Group]
ttml+xml application/ttml+xml [W3C][W3C_Timed_Text_Working_Group]
tve-trigger application/tve-trigger [Linda_Welsh]
tzif application/tzif [RFC8536]
tzif-leap application/tzif-leap [RFC8536]
ulpfec application/ulpfec [RFC5109]
urc-grpsheet+xml application/urc-grpsheet+xml [Gottfried_Zimmermann][ISO-IEC_JTC1]
urc-ressheet+xml application/urc-ressheet+xml [Gottfried_Zimmermann][ISO-IEC_JTC1]
urc-targetdesc+xml application/urc-targetdesc+xml [Gottfried_Zimmermann][ISO-IEC_JTC1]
urc-uisocketdesc+xml application/urc-uisocketdesc+xml [Gottfried_Zimmermann]
vcard+json application/vcard+json [RFC7095]
vcard+xml application/vcard+xml [RFC6351]
vemmi application/vemmi [RFC2122]
vnd.1000minds.decision-model+xml application/vnd.1000minds.decision-model+xml [Franz_Ombler]
vnd.3gpp.5gnas application/vnd.3gpp.5gnas [_3GPP][Jones_Lu_Yunjie]
vnd.3gpp.access-transfer-events+xml application/vnd.3gpp.access-transfer-events+xml [Frederic_Firmin]
vnd.3gpp.bsf+xml application/vnd.3gpp.bsf+xml [John_M_Meredith]
vnd.3gpp.GMOP+xml application/vnd.3gpp.GMOP+xml [Frederic_Firmin]
vnd.3gpp.gtpc application/vnd.3gpp.gtpc [_3GPP][Yang_Yong]
vnd.3gpp.interworking-data application/vnd.3gpp.interworking-data [Frederic_Firmin]
vnd.3gpp.lpp application/vnd.3gpp.lpp [_3GPP][Jones_Lu_Yunjie]
vnd.3gpp.mc-signalling-ear application/vnd.3gpp.mc-signalling-ear [Tim_Woodward]
vnd.3gpp.mcdata-affiliation-command+xml application/vnd.3gpp.mcdata-affiliation-command+xml [Frederic_Firmin]
vnd.3gpp.mcdata-info+xml application/vnd.3gpp.mcdata-info+xml [Frederic_Firmin]
vnd.3gpp.mcdata-payload application/vnd.3gpp.mcdata-payload [Frederic_Firmin]
vnd.3gpp.mcdata-service-config+xml application/vnd.3gpp.mcdata-service-config+xml [Frederic_Firmin]
vnd.3gpp.mcdata-signalling application/vnd.3gpp.mcdata-signalling [Frederic_Firmin]
vnd.3gpp.mcdata-ue-config+xml application/vnd.3gpp.mcdata-ue-config+xml [Frederic_Firmin]
vnd.3gpp.mcdata-user-profile+xml application/vnd.3gpp.mcdata-user-profile+xml [Frederic_Firmin]
vnd.3gpp.mcptt-affiliation-command+xml application/vnd.3gpp.mcptt-affiliation-command+xml [Frederic_Firmin]
vnd.3gpp.mcptt-floor-request+xml application/vnd.3gpp.mcptt-floor-request+xml [Frederic_Firmin]
vnd.3gpp.mcptt-info+xml application/vnd.3gpp.mcptt-info+xml [Frederic_Firmin]
vnd.3gpp.mcptt-location-info+xml application/vnd.3gpp.mcptt-location-info+xml [Frederic_Firmin]
vnd.3gpp.mcptt-mbms-usage-info+xml application/vnd.3gpp.mcptt-mbms-usage-info+xml [Frederic_Firmin]
vnd.3gpp.mcptt-service-config+xml application/vnd.3gpp.mcptt-service-config+xml [Frederic_Firmin]
vnd.3gpp.mcptt-signed+xml application/vnd.3gpp.mcptt-signed+xml [Frederic_Firmin]
vnd.3gpp.mcptt-ue-config+xml application/vnd.3gpp.mcptt-ue-config+xml [Frederic_Firmin]
vnd.3gpp.mcptt-ue-init-config+xml application/vnd.3gpp.mcptt-ue-init-config+xml [Frederic_Firmin]
vnd.3gpp.mcptt-user-profile+xml application/vnd.3gpp.mcptt-user-profile+xml [Frederic_Firmin]
vnd.3gpp.mcvideo-affiliation-command+xml application/vnd.3gpp.mcvideo-affiliation-command+xml [Frederic_Firmin]
vnd.3gpp.mcvideo-affiliation-info+xml - OBSOLETED in favor of application/vnd.3gpp.mcvideo-info+xml application/vnd.3gpp.mcvideo-affiliation-info+xml [Frederic_Firmin]
vnd.3gpp.mcvideo-info+xml application/vnd.3gpp.mcvideo-info+xml [Frederic_Firmin]
vnd.3gpp.mcvideo-location-info+xml application/vnd.3gpp.mcvideo-location-info+xml [Frederic_Firmin]
vnd.3gpp.mcvideo-mbms-usage-info+xml application/vnd.3gpp.mcvideo-mbms-usage-info+xml [Frederic_Firmin]
vnd.3gpp.mcvideo-service-config+xml application/vnd.3gpp.mcvideo-service-config+xml [Frederic_Firmin]
vnd.3gpp.mcvideo-transmission-request+xml application/vnd.3gpp.mcvideo-transmission-request+xml [Frederic_Firmin]
vnd.3gpp.mcvideo-ue-config+xml application/vnd.3gpp.mcvideo-ue-config+xml [Frederic_Firmin]
vnd.3gpp.mcvideo-user-profile+xml application/vnd.3gpp.mcvideo-user-profile+xml [Frederic_Firmin]
vnd.3gpp.mid-call+xml application/vnd.3gpp.mid-call+xml [Frederic_Firmin]
vnd.3gpp.ngap application/vnd.3gpp.ngap [_3GPP][Yang_Yong]
vnd.3gpp.pfcp application/vnd.3gpp.pfcp [_3GPP][Bruno_Landais]
vnd.3gpp.pic-bw-large application/vnd.3gpp.pic-bw-large [John_M_Meredith]
vnd.3gpp.pic-bw-small application/vnd.3gpp.pic-bw-small [John_M_Meredith]
vnd.3gpp.pic-bw-var application/vnd.3gpp.pic-bw-var [John_M_Meredith]
vnd.3gpp-prose-pc3ch+xml application/vnd.3gpp-prose-pc3ch+xml [Frederic_Firmin]
vnd.3gpp-prose+xml application/vnd.3gpp-prose+xml [Frederic_Firmin]
vnd.3gpp.s1ap application/vnd.3gpp.s1ap [_3GPP][Yang_Yong]
vnd.3gpp.sms application/vnd.3gpp.sms [John_M_Meredith]
vnd.3gpp.sms+xml application/vnd.3gpp.sms+xml [Frederic_Firmin]
vnd.3gpp.srvcc-ext+xml application/vnd.3gpp.srvcc-ext+xml [Frederic_Firmin]
vnd.3gpp.SRVCC-info+xml application/vnd.3gpp.SRVCC-info+xml [Frederic_Firmin]
vnd.3gpp.state-and-event-info+xml application/vnd.3gpp.state-and-event-info+xml [Frederic_Firmin]
vnd.3gpp.ussd+xml application/vnd.3gpp.ussd+xml [Frederic_Firmin]
vnd.3gpp-v2x-local-service-information application/vnd.3gpp-v2x-local-service-information [Frederic_Firmin]
vnd.3gpp2.bcmcsinfo+xml application/vnd.3gpp2.bcmcsinfo+xml [Andy_Dryden]
vnd.3gpp2.sms application/vnd.3gpp2.sms [AC_Mahendran]
vnd.3gpp2.tcap application/vnd.3gpp2.tcap [AC_Mahendran]
vnd.3lightssoftware.imagescal application/vnd.3lightssoftware.imagescal [Gus_Asadi]
vnd.3M.Post-it-Notes application/vnd.3M.Post-it-Notes [Michael_OBrien]
vnd.accpac.simply.aso application/vnd.accpac.simply.aso [Steve_Leow]
vnd.accpac.simply.imp application/vnd.accpac.simply.imp [Steve_Leow]
vnd.acucobol application/vnd.acucobol [Dovid_Lubin]
vnd.acucorp application/vnd.acucorp [Dovid_Lubin]
vnd.adobe.flash.movie application/vnd.adobe.flash.movie [Henrik_Andersson]
vnd.adobe.formscentral.fcdt application/vnd.adobe.formscentral.fcdt [Chris_Solc]
vnd.adobe.fxp application/vnd.adobe.fxp [Robert_Brambley][Steven_Heintz]
vnd.adobe.partial-upload application/vnd.adobe.partial-upload [Tapani_Otala]
vnd.adobe.xdp+xml application/vnd.adobe.xdp+xml [John_Brinkman]
vnd.adobe.xfdf application/vnd.adobe.xfdf [Roberto_Perelman]
vnd.aether.imp application/vnd.aether.imp [Jay_Moskowitz]
vnd.afpc.afplinedata application/vnd.afpc.afplinedata [Jörg_Palmer]
vnd.afpc.afplinedata-pagedef application/vnd.afpc.afplinedata-pagedef [Jörg_Palmer]
vnd.afpc.cmoca-cmresource application/vnd.afpc.cmoca-cmresource [Jörg_Palmer]
vnd.afpc.foca-charset application/vnd.afpc.foca-charset [Jörg_Palmer]
vnd.afpc.foca-codedfont application/vnd.afpc.foca-codedfont [Jörg_Palmer]
vnd.afpc.foca-codepage application/vnd.afpc.foca-codepage [Jörg_Palmer]
vnd.afpc.modca application/vnd.afpc.modca [Jörg_Palmer]
vnd.afpc.modca-cmtable application/vnd.afpc.modca-cmtable [Jörg_Palmer]
vnd.afpc.modca-formdef application/vnd.afpc.modca-formdef [Jörg_Palmer]
vnd.afpc.modca-mediummap application/vnd.afpc.modca-mediummap [Jörg_Palmer]
vnd.afpc.modca-objectcontainer application/vnd.afpc.modca-objectcontainer [Jörg_Palmer]
vnd.afpc.modca-overlay application/vnd.afpc.modca-overlay [Jörg_Palmer]
vnd.afpc.modca-pagesegment application/vnd.afpc.modca-pagesegment [Jörg_Palmer]
vnd.ah-barcode application/vnd.ah-barcode [Katsuhiko_Ichinose]
vnd.ahead.space application/vnd.ahead.space [Tor_Kristensen]
vnd.airzip.filesecure.azf application/vnd.airzip.filesecure.azf [Daniel_Mould][Gary_Clueit]
vnd.airzip.filesecure.azs application/vnd.airzip.filesecure.azs [Daniel_Mould][Gary_Clueit]
vnd.amadeus+json application/vnd.amadeus+json [Patrick_Brosse]
vnd.amazon.mobi8-ebook application/vnd.amazon.mobi8-ebook [Kim_Scarborough]
vnd.americandynamics.acc application/vnd.americandynamics.acc [Gary_Sands]
vnd.amiga.ami application/vnd.amiga.ami [Kevin_Blumberg]
vnd.amundsen.maze+xml application/vnd.amundsen.maze+xml [Mike_Amundsen]
vnd.android.ota application/vnd.android.ota [Greg_Kaiser]
vnd.anki application/vnd.anki [Kerrick_Staley]
vnd.anser-web-certificate-issue-initiation application/vnd.anser-web-certificate-issue-initiation [Hiroyoshi_Mori]
vnd.antix.game-component application/vnd.antix.game-component [Daniel_Shelton]
vnd.apache.thrift.binary application/vnd.apache.thrift.binary [Roger_Meier]
vnd.apache.thrift.compact application/vnd.apache.thrift.compact [Roger_Meier]
vnd.apache.thrift.json application/vnd.apache.thrift.json [Roger_Meier]
vnd.api+json application/vnd.api+json [Steve_Klabnik]
vnd.aplextor.warrp+json application/vnd.aplextor.warrp+json [Oleg_Uryutin]
vnd.apothekende.reservation+json application/vnd.apothekende.reservation+json [Adrian_Föder]
vnd.apple.installer+xml application/vnd.apple.installer+xml [Peter_Bierman]
vnd.apple.keynote application/vnd.apple.keynote [Manichandra_Sajjanapu]
vnd.apple.mpegurl application/vnd.apple.mpegurl [RFC8216]
vnd.apple.numbers application/vnd.apple.numbers [Manichandra_Sajjanapu]
vnd.apple.pages application/vnd.apple.pages [Manichandra_Sajjanapu]
vnd.arastra.swi - OBSOLETED in favor of application/vnd.aristanetworks.swi application/vnd.arastra.swi [Bill_Fenner]
vnd.aristanetworks.swi application/vnd.aristanetworks.swi [Bill_Fenner]
vnd.artisan+json application/vnd.artisan+json [Brad_Turner]
vnd.artsquare application/vnd.artsquare [Christopher_Smith]
vnd.astraea-software.iota application/vnd.astraea-software.iota [Christopher_Snazell]
vnd.audiograph application/vnd.audiograph [Horia_Cristian_Slusanschi]
vnd.autopackage application/vnd.autopackage [Mike_Hearn]
vnd.avalon+json application/vnd.avalon+json [Ben_Hinman]
vnd.avistar+xml application/vnd.avistar+xml [Vladimir_Vysotsky]
vnd.balsamiq.bmml+xml application/vnd.balsamiq.bmml+xml [Giacomo_Guilizzoni]
vnd.banana-accounting application/vnd.banana-accounting [José_Del_Romano]
vnd.bbf.usp.error application/vnd.bbf.usp.error [Broadband_Forum]
vnd.bbf.usp.msg application/vnd.bbf.usp.msg [Broadband_Forum]
vnd.bbf.usp.msg+json application/vnd.bbf.usp.msg+json [Broadband_Forum]
vnd.balsamiq.bmpr application/vnd.balsamiq.bmpr [Giacomo_Guilizzoni]
vnd.bekitzur-stech+json application/vnd.bekitzur-stech+json [Jegulsky]
vnd.bint.med-content application/vnd.bint.med-content [Heinz-Peter_Schütz]
vnd.biopax.rdf+xml application/vnd.biopax.rdf+xml [Pathway_Commons]
vnd.blink-idb-value-wrapper application/vnd.blink-idb-value-wrapper [Victor_Costan]
vnd.blueice.multipass application/vnd.blueice.multipass [Thomas_Holmstrom]
vnd.bluetooth.ep.oob application/vnd.bluetooth.ep.oob [Mike_Foley]
vnd.bluetooth.le.oob application/vnd.bluetooth.le.oob [Mark_Powell]
vnd.bmi application/vnd.bmi [Tadashi_Gotoh]
vnd.bpf application/vnd.bpf [NCGIS][Bryan_Blank]
vnd.bpf3 application/vnd.bpf3 [NCGIS][Bryan_Blank]
vnd.businessobjects application/vnd.businessobjects [Philippe_Imoucha]
vnd.byu.uapi+json application/vnd.byu.uapi+json [Brent_Moore]
vnd.cab-jscript application/vnd.cab-jscript [Joerg_Falkenberg]
vnd.canon-cpdl application/vnd.canon-cpdl [Shin_Muto]
vnd.canon-lips application/vnd.canon-lips [Shin_Muto]
vnd.capasystems-pg+json application/vnd.capasystems-pg+json [Yüksel_Aydemir]
vnd.cendio.thinlinc.clientconf application/vnd.cendio.thinlinc.clientconf [Peter_Astrand]
vnd.century-systems.tcp_stream application/vnd.century-systems.tcp_stream [Shuji_Fujii]
vnd.chemdraw+xml application/vnd.chemdraw+xml [Glenn_Howes]
vnd.chess-pgn application/vnd.chess-pgn [Kim_Scarborough]
vnd.chipnuts.karaoke-mmd application/vnd.chipnuts.karaoke-mmd [Chunyun_Xiong]
vnd.ciedi application/vnd.ciedi [Hidekazu_Enjo]
vnd.cinderella application/vnd.cinderella [Ulrich_Kortenkamp]
vnd.cirpack.isdn-ext application/vnd.cirpack.isdn-ext [Pascal_Mayeux]
vnd.citationstyles.style+xml application/vnd.citationstyles.style+xml [Rintze_M._Zelle]
vnd.claymore application/vnd.claymore [Ray_Simpson]
vnd.cloanto.rp9 application/vnd.cloanto.rp9 [Mike_Labatt]
vnd.clonk.c4group application/vnd.clonk.c4group [Guenther_Brammer]
vnd.cluetrust.cartomobile-config application/vnd.cluetrust.cartomobile-config [Gaige_Paulsen]
vnd.cluetrust.cartomobile-config-pkg application/vnd.cluetrust.cartomobile-config-pkg [Gaige_Paulsen]
vnd.coffeescript application/vnd.coffeescript [Devyn_Collier_Johnson]
vnd.collabio.xodocuments.document application/vnd.collabio.xodocuments.document [Alexey_Meandrov]
vnd.collabio.xodocuments.document-template application/vnd.collabio.xodocuments.document-template [Alexey_Meandrov]
vnd.collabio.xodocuments.presentation application/vnd.collabio.xodocuments.presentation [Alexey_Meandrov]
vnd.collabio.xodocuments.presentation-template application/vnd.collabio.xodocuments.presentation-template [Alexey_Meandrov]
vnd.collabio.xodocuments.spreadsheet application/vnd.collabio.xodocuments.spreadsheet [Alexey_Meandrov]
vnd.collabio.xodocuments.spreadsheet-template application/vnd.collabio.xodocuments.spreadsheet-template [Alexey_Meandrov]
vnd.collection.doc+json application/vnd.collection.doc+json [Irakli_Nadareishvili]
vnd.collection+json application/vnd.collection+json [Mike_Amundsen]
vnd.collection.next+json application/vnd.collection.next+json [Ioseb_Dzmanashvili]
vnd.comicbook-rar application/vnd.comicbook-rar [Kim_Scarborough]
vnd.comicbook+zip application/vnd.comicbook+zip [Kim_Scarborough]
vnd.commerce-battelle application/vnd.commerce-battelle [David_Applebaum]
vnd.commonspace application/vnd.commonspace [Ravinder_Chandhok]
vnd.coreos.ignition+json application/vnd.coreos.ignition+json [Alex_Crawford]
vnd.cosmocaller application/vnd.cosmocaller [Steve_Dellutri]
vnd.contact.cmsg application/vnd.contact.cmsg [Frank_Patz]
vnd.crick.clicker application/vnd.crick.clicker [Andrew_Burt]
vnd.crick.clicker.keyboard application/vnd.crick.clicker.keyboard [Andrew_Burt]
vnd.crick.clicker.palette application/vnd.crick.clicker.palette [Andrew_Burt]
vnd.crick.clicker.template application/vnd.crick.clicker.template [Andrew_Burt]
vnd.crick.clicker.wordbank application/vnd.crick.clicker.wordbank [Andrew_Burt]
vnd.criticaltools.wbs+xml application/vnd.criticaltools.wbs+xml [Jim_Spiller]
vnd.cryptii.pipe+json application/vnd.cryptii.pipe+json [Fränz_Friederes]
vnd.crypto-shade-file application/vnd.crypto-shade-file [Connor_Horman]
vnd.cryptomator.encrypted application/vnd.cryptomator.encrypted [Sebastian_Stenzel]
vnd.cryptomator.vault application/vnd.cryptomator.vault [Sebastian_Stenzel]
vnd.ctc-posml application/vnd.ctc-posml [Bayard_Kohlhepp]
vnd.ctct.ws+xml application/vnd.ctct.ws+xml [Jim_Ancona]
vnd.cups-pdf application/vnd.cups-pdf [Michael_Sweet]
vnd.cups-postscript application/vnd.cups-postscript [Michael_Sweet]
vnd.cups-ppd application/vnd.cups-ppd [Michael_Sweet]
vnd.cups-raster application/vnd.cups-raster [Michael_Sweet]
vnd.cups-raw application/vnd.cups-raw [Michael_Sweet]
vnd.curl application/vnd.curl [Robert_Byrnes]
vnd.cyan.dean.root+xml application/vnd.cyan.dean.root+xml [Matt_Kern]
vnd.cybank application/vnd.cybank [Nor_Helmee]
vnd.cyclonedx+json application/vnd.cyclonedx+json [Patrick_Dwyer]
vnd.cyclonedx+xml application/vnd.cyclonedx+xml [Patrick_Dwyer]
vnd.d2l.coursepackage1p0+zip application/vnd.d2l.coursepackage1p0+zip [Viktor_Haag]
vnd.d3m-dataset application/vnd.d3m-dataset [Mi_Tar]
vnd.d3m-problem application/vnd.d3m-problem [Mi_Tar]
vnd.dart application/vnd.dart [Anders_Sandholm]
vnd.data-vision.rdz application/vnd.data-vision.rdz [James_Fields]
vnd.datapackage+json application/vnd.datapackage+json [Paul_Walsh]
vnd.dataresource+json application/vnd.dataresource+json [Paul_Walsh]
vnd.dbf application/vnd.dbf [Mi_Tar]
vnd.debian.binary-package application/vnd.debian.binary-package [Charles_Plessy]
vnd.dece.data application/vnd.dece.data [Michael_A_Dolan]
vnd.dece.ttml+xml application/vnd.dece.ttml+xml [Michael_A_Dolan]
vnd.dece.unspecified application/vnd.dece.unspecified [Michael_A_Dolan]
vnd.dece.zip application/vnd.dece.zip [Michael_A_Dolan]
vnd.denovo.fcselayout-link application/vnd.denovo.fcselayout-link [Michael_Dixon]
vnd.desmume.movie application/vnd.desmume.movie [Henrik_Andersson]
vnd.dir-bi.plate-dl-nosuffix application/vnd.dir-bi.plate-dl-nosuffix [Yamanaka]
vnd.dm.delegation+xml application/vnd.dm.delegation+xml [Axel_Ferrazzini]
vnd.dna application/vnd.dna [Meredith_Searcy]
vnd.document+json application/vnd.document+json [Tom_Christie]
vnd.dolby.mobile.1 application/vnd.dolby.mobile.1 [Steve_Hattersley]
vnd.dolby.mobile.2 application/vnd.dolby.mobile.2 [Steve_Hattersley]
vnd.doremir.scorecloud-binary-document application/vnd.doremir.scorecloud-binary-document [Erik_Ronström]
vnd.dpgraph application/vnd.dpgraph [David_Parker]
vnd.dreamfactory application/vnd.dreamfactory [William_C._Appleton]
vnd.drive+json application/vnd.drive+json [Keith_Kester]
vnd.dtg.local application/vnd.dtg.local [Ali_Teffahi]
vnd.dtg.local.flash application/vnd.dtg.local.flash [Ali_Teffahi]
vnd.dtg.local.html application/vnd.dtg.local.html [Ali_Teffahi]
vnd.dvb.ait application/vnd.dvb.ait [Peter_Siebert][Michael_Lagally]
vnd.dvb.dvbisl+xml application/vnd.dvb.dvbisl+xml [Emily_DUBS]
vnd.dvb.dvbj application/vnd.dvb.dvbj [Peter_Siebert][Michael_Lagally]
vnd.dvb.esgcontainer application/vnd.dvb.esgcontainer [Joerg_Heuer]
vnd.dvb.ipdcdftnotifaccess application/vnd.dvb.ipdcdftnotifaccess [Roy_Yue]
vnd.dvb.ipdcesgaccess application/vnd.dvb.ipdcesgaccess [Joerg_Heuer]
vnd.dvb.ipdcesgaccess2 application/vnd.dvb.ipdcesgaccess2 [Jerome_Marcon]
vnd.dvb.ipdcesgpdd application/vnd.dvb.ipdcesgpdd [Jerome_Marcon]
vnd.dvb.ipdcroaming application/vnd.dvb.ipdcroaming [Yiling_Xu]
vnd.dvb.iptv.alfec-base application/vnd.dvb.iptv.alfec-base [Jean-Baptiste_Henry]
vnd.dvb.iptv.alfec-enhancement application/vnd.dvb.iptv.alfec-enhancement [Jean-Baptiste_Henry]
vnd.dvb.notif-aggregate-root+xml application/vnd.dvb.notif-aggregate-root+xml [Roy_Yue]
vnd.dvb.notif-container+xml application/vnd.dvb.notif-container+xml [Roy_Yue]
vnd.dvb.notif-generic+xml application/vnd.dvb.notif-generic+xml [Roy_Yue]
vnd.dvb.notif-ia-msglist+xml application/vnd.dvb.notif-ia-msglist+xml [Roy_Yue]
vnd.dvb.notif-ia-registration-request+xml application/vnd.dvb.notif-ia-registration-request+xml [Roy_Yue]
vnd.dvb.notif-ia-registration-response+xml application/vnd.dvb.notif-ia-registration-response+xml [Roy_Yue]
vnd.dvb.notif-init+xml application/vnd.dvb.notif-init+xml [Roy_Yue]
vnd.dvb.pfr application/vnd.dvb.pfr [Peter_Siebert][Michael_Lagally]
vnd.dvb.service application/vnd.dvb.service [Peter_Siebert][Michael_Lagally]
vnd.dxr application/vnd.dxr [Michael_Duffy]
vnd.dynageo application/vnd.dynageo [Roland_Mechling]
vnd.dzr application/vnd.dzr [Carl_Anderson]
vnd.easykaraoke.cdgdownload application/vnd.easykaraoke.cdgdownload [Iain_Downs]
vnd.ecip.rlp application/vnd.ecip.rlp [Wei_Tang]
vnd.ecdis-update application/vnd.ecdis-update [Gert_Buettgenbach]
vnd.ecowin.chart application/vnd.ecowin.chart [Thomas_Olsson]
vnd.ecowin.filerequest application/vnd.ecowin.filerequest [Thomas_Olsson]
vnd.ecowin.fileupdate application/vnd.ecowin.fileupdate [Thomas_Olsson]
vnd.ecowin.series application/vnd.ecowin.series [Thomas_Olsson]
vnd.ecowin.seriesrequest application/vnd.ecowin.seriesrequest [Thomas_Olsson]
vnd.ecowin.seriesupdate application/vnd.ecowin.seriesupdate [Thomas_Olsson]
vnd.efi.img application/vnd.efi.img [UEFI_Forum][Fu_Siyuan]
vnd.efi.iso application/vnd.efi.iso [UEFI_Forum][Fu_Siyuan]
vnd.emclient.accessrequest+xml application/vnd.emclient.accessrequest+xml [Filip_Navara]
vnd.enliven application/vnd.enliven [Paul_Santinelli_Jr.]
vnd.enphase.envoy application/vnd.enphase.envoy [Chris_Eich]
vnd.eprints.data+xml application/vnd.eprints.data+xml [Tim_Brody]
vnd.epson.esf application/vnd.epson.esf [Shoji_Hoshina]
vnd.epson.msf application/vnd.epson.msf [Shoji_Hoshina]
vnd.epson.quickanime application/vnd.epson.quickanime [Yu_Gu]
vnd.epson.salt application/vnd.epson.salt [Yasuhito_Nagatomo]
vnd.epson.ssf application/vnd.epson.ssf [Shoji_Hoshina]
vnd.ericsson.quickcall application/vnd.ericsson.quickcall [Paul_Tidwell]
vnd.espass-espass+zip application/vnd.espass-espass+zip [Marcus_Ligi_Büschleb]
vnd.eszigno3+xml application/vnd.eszigno3+xml [Szilveszter_Tóth]
vnd.etsi.aoc+xml application/vnd.etsi.aoc+xml [Shicheng_Hu]
vnd.etsi.asic-s+zip application/vnd.etsi.asic-s+zip [Miguel_Angel_Reina_Ortega]
vnd.etsi.asic-e+zip application/vnd.etsi.asic-e+zip [Miguel_Angel_Reina_Ortega]
vnd.etsi.cug+xml application/vnd.etsi.cug+xml [Shicheng_Hu]
vnd.etsi.iptvcommand+xml application/vnd.etsi.iptvcommand+xml [Shicheng_Hu]
vnd.etsi.iptvdiscovery+xml application/vnd.etsi.iptvdiscovery+xml [Shicheng_Hu]
vnd.etsi.iptvprofile+xml application/vnd.etsi.iptvprofile+xml [Shicheng_Hu]
vnd.etsi.iptvsad-bc+xml application/vnd.etsi.iptvsad-bc+xml [Shicheng_Hu]
vnd.etsi.iptvsad-cod+xml application/vnd.etsi.iptvsad-cod+xml [Shicheng_Hu]
vnd.etsi.iptvsad-npvr+xml application/vnd.etsi.iptvsad-npvr+xml [Shicheng_Hu]
vnd.etsi.iptvservice+xml application/vnd.etsi.iptvservice+xml [Miguel_Angel_Reina_Ortega]
vnd.etsi.iptvsync+xml application/vnd.etsi.iptvsync+xml [Miguel_Angel_Reina_Ortega]
vnd.etsi.iptvueprofile+xml application/vnd.etsi.iptvueprofile+xml [Shicheng_Hu]
vnd.etsi.mcid+xml application/vnd.etsi.mcid+xml [Shicheng_Hu]
vnd.etsi.mheg5 application/vnd.etsi.mheg5 [Miguel_Angel_Reina_Ortega][Ian_Medland]
vnd.etsi.overload-control-policy-dataset+xml application/vnd.etsi.overload-control-policy-dataset+xml [Miguel_Angel_Reina_Ortega]
vnd.etsi.pstn+xml application/vnd.etsi.pstn+xml [Jiwan_Han][Thomas_Belling]
vnd.etsi.sci+xml application/vnd.etsi.sci+xml [Shicheng_Hu]
vnd.etsi.simservs+xml application/vnd.etsi.simservs+xml [Shicheng_Hu]
vnd.etsi.timestamp-token application/vnd.etsi.timestamp-token [Miguel_Angel_Reina_Ortega]
vnd.etsi.tsl+xml application/vnd.etsi.tsl+xml [Shicheng_Hu]
vnd.etsi.tsl.der application/vnd.etsi.tsl.der [Shicheng_Hu]
vnd.evolv.ecig.profile application/vnd.evolv.ecig.profile [James_Bellinger]
vnd.evolv.ecig.settings application/vnd.evolv.ecig.settings [James_Bellinger]
vnd.evolv.ecig.theme application/vnd.evolv.ecig.theme [James_Bellinger]
vnd.eudora.data application/vnd.eudora.data [Pete_Resnick]
vnd.exstream-empower+zip application/vnd.exstream-empower+zip [Bill_Kidwell]
vnd.exstream-package application/vnd.exstream-package [Bill_Kidwell]
vnd.ezpix-album application/vnd.ezpix-album [ElectronicZombieCorp]
vnd.ezpix-package application/vnd.ezpix-package [ElectronicZombieCorp]
vnd.f-secure.mobile application/vnd.f-secure.mobile [Samu_Sarivaara]
vnd.fastcopy-disk-image application/vnd.fastcopy-disk-image [Thomas_Huth]
vnd.fdf application/vnd.fdf [Steve_Zilles]
vnd.fdsn.mseed application/vnd.fdsn.mseed [Chad_Trabant]
vnd.fdsn.seed application/vnd.fdsn.seed [Chad_Trabant]
vnd.ffsns application/vnd.ffsns [Holstage]
vnd.ficlab.flb+zip application/vnd.ficlab.flb+zip [Steve_Gilberd]
vnd.filmit.zfc application/vnd.filmit.zfc [Harms_Moeller]
vnd.fints application/vnd.fints [Ingo_Hammann]
vnd.firemonkeys.cloudcell application/vnd.firemonkeys.cloudcell [Alex_Dubov]
vnd.FloGraphIt application/vnd.FloGraphIt [Dick_Floersch]
vnd.fluxtime.clip application/vnd.fluxtime.clip [Marc_Winter]
vnd.font-fontforge-sfd application/vnd.font-fontforge-sfd [George_Williams]
vnd.framemaker application/vnd.framemaker [Mike_Wexler]
vnd.frogans.fnc - OBSOLETE application/vnd.frogans.fnc [OP3FT][Alexis_Tamas]
vnd.frogans.ltf - OBSOLETE application/vnd.frogans.ltf [OP3FT][Alexis_Tamas]
vnd.fsc.weblaunch application/vnd.fsc.weblaunch [Derek_Smith]
vnd.fujifilm.fb.docuworks application/vnd.fujifilm.fb.docuworks [Kazuya_Iimura]
vnd.fujifilm.fb.docuworks.binder application/vnd.fujifilm.fb.docuworks.binder [Kazuya_Iimura]
vnd.fujifilm.fb.docuworks.container application/vnd.fujifilm.fb.docuworks.container [Kazuya_Iimura]
vnd.fujifilm.fb.jfi+xml application/vnd.fujifilm.fb.jfi+xml [Keitaro_Ishida]
vnd.fujitsu.oasys application/vnd.fujitsu.oasys [Nobukazu_Togashi]
vnd.fujitsu.oasys2 application/vnd.fujitsu.oasys2 [Nobukazu_Togashi]
vnd.fujitsu.oasys3 application/vnd.fujitsu.oasys3 [Seiji_Okudaira]
vnd.fujitsu.oasysgp application/vnd.fujitsu.oasysgp [Masahiko_Sugimoto]
vnd.fujitsu.oasysprs application/vnd.fujitsu.oasysprs [Masumi_Ogita]
vnd.fujixerox.ART4 application/vnd.fujixerox.ART4 [Fumio_Tanabe]
vnd.fujixerox.ART-EX application/vnd.fujixerox.ART-EX [Fumio_Tanabe]
vnd.fujixerox.ddd application/vnd.fujixerox.ddd [Masanori_Onda]
vnd.fujixerox.docuworks application/vnd.fujixerox.docuworks [Takatomo_Wakibayashi]
vnd.fujixerox.docuworks.binder application/vnd.fujixerox.docuworks.binder [Takashi_Matsumoto]
vnd.fujixerox.docuworks.container application/vnd.fujixerox.docuworks.container [Kiyoshi_Tashiro]
vnd.fujixerox.HBPL application/vnd.fujixerox.HBPL [Fumio_Tanabe]
vnd.fut-misnet application/vnd.fut-misnet [Jann_Pruulman]
vnd.futoin+cbor application/vnd.futoin+cbor [Andrey_Galkin]
vnd.futoin+json application/vnd.futoin+json [Andrey_Galkin]
vnd.fuzzysheet application/vnd.fuzzysheet [Simon_Birtwistle]
vnd.genomatix.tuxedo application/vnd.genomatix.tuxedo [Torben_Frey]
vnd.gentics.grd+json application/vnd.gentics.grd+json [Philipp_Gortan]
vnd.geo+json (OBSOLETED by [RFC7946] in favor of application/geo+json) application/vnd.geo+json [Sean_Gillies]
vnd.geocube+xml - OBSOLETED by request application/vnd.geocube+xml [Francois_Pirsch]
vnd.geogebra.file application/vnd.geogebra.file [GeoGebra][Yves_Kreis]
vnd.geogebra.slides application/vnd.geogebra.slides [GeoGebra][Michael_Borcherds][Markus_Hohenwarter]
vnd.geogebra.tool application/vnd.geogebra.tool [GeoGebra][Yves_Kreis]
vnd.geometry-explorer application/vnd.geometry-explorer [Michael_Hvidsten]
vnd.geonext application/vnd.geonext [Matthias_Ehmann]
vnd.geoplan application/vnd.geoplan [Christian_Mercat]
vnd.geospace application/vnd.geospace [Christian_Mercat]
vnd.gerber application/vnd.gerber [Thomas_Weyn]
vnd.globalplatform.card-content-mgt application/vnd.globalplatform.card-content-mgt [Gil_Bernabeu]
vnd.globalplatform.card-content-mgt-response application/vnd.globalplatform.card-content-mgt-response [Gil_Bernabeu]
vnd.gmx - DEPRECATED application/vnd.gmx [Christian_V._Sciberras]
vnd.google-earth.kml+xml application/vnd.google-earth.kml+xml [Michael_Ashbridge]
vnd.google-earth.kmz application/vnd.google-earth.kmz [Michael_Ashbridge]
vnd.gov.sk.e-form+xml application/vnd.gov.sk.e-form+xml [Peter_Biro][Stefan_Szilva]
vnd.gov.sk.e-form+zip application/vnd.gov.sk.e-form+zip [Peter_Biro][Stefan_Szilva]
vnd.gov.sk.xmldatacontainer+xml application/vnd.gov.sk.xmldatacontainer+xml [Peter_Biro][Stefan_Szilva]
vnd.grafeq application/vnd.grafeq [Jeff_Tupper]
vnd.gridmp application/vnd.gridmp [Jeff_Lawson]
vnd.groove-account application/vnd.groove-account [Todd_Joseph]
vnd.groove-help application/vnd.groove-help [Todd_Joseph]
vnd.groove-identity-message application/vnd.groove-identity-message [Todd_Joseph]
vnd.groove-injector application/vnd.groove-injector [Todd_Joseph]
vnd.groove-tool-message application/vnd.groove-tool-message [Todd_Joseph]
vnd.groove-tool-template application/vnd.groove-tool-template [Todd_Joseph]
vnd.groove-vcard application/vnd.groove-vcard [Todd_Joseph]
vnd.hal+json application/vnd.hal+json [Mike_Kelly]
vnd.hal+xml application/vnd.hal+xml [Mike_Kelly]
vnd.HandHeld-Entertainment+xml application/vnd.HandHeld-Entertainment+xml [Eric_Hamilton]
vnd.hbci application/vnd.hbci [Ingo_Hammann]
vnd.hc+json application/vnd.hc+json [Jan_Schütze]
vnd.hcl-bireports application/vnd.hcl-bireports [Doug_R._Serres]
vnd.hdt application/vnd.hdt [Javier_D._Fernández]
vnd.heroku+json application/vnd.heroku+json [Wesley_Beary]
vnd.hhe.lesson-player application/vnd.hhe.lesson-player [Randy_Jones]
vnd.hp-HPGL application/vnd.hp-HPGL [Bob_Pentecost]
vnd.hp-hpid application/vnd.hp-hpid [Aloke_Gupta]
vnd.hp-hps application/vnd.hp-hps [Steve_Aubrey]
vnd.hp-jlyt application/vnd.hp-jlyt [Amir_Gaash]
vnd.hp-PCL application/vnd.hp-PCL [Bob_Pentecost]
vnd.hp-PCLXL application/vnd.hp-PCLXL [Bob_Pentecost]
vnd.httphone application/vnd.httphone [Franck_Lefevre]
vnd.hydrostatix.sof-data application/vnd.hydrostatix.sof-data [Allen_Gillam]
vnd.hyper-item+json application/vnd.hyper-item+json [Mario_Demuth]
vnd.hyper+json application/vnd.hyper+json [Irakli_Nadareishvili]
vnd.hyperdrive+json application/vnd.hyperdrive+json [Daniel_Sims]
vnd.hzn-3d-crossword application/vnd.hzn-3d-crossword [James_Minnis]
vnd.ibm.afplinedata - OBSOLETED in favor of vnd.afpc.afplinedata application/vnd.ibm.afplinedata [Roger_Buis]
vnd.ibm.electronic-media application/vnd.ibm.electronic-media [Bruce_Tantlinger]
vnd.ibm.MiniPay application/vnd.ibm.MiniPay [Amir_Herzberg]
vnd.ibm.modcap - OBSOLETED in favor of application/vnd.afpc.modca application/vnd.ibm.modcap [Reinhard_Hohensee]
vnd.ibm.rights-management application/vnd.ibm.rights-management [Bruce_Tantlinger]
vnd.ibm.secure-container application/vnd.ibm.secure-container [Bruce_Tantlinger]
vnd.iccprofile application/vnd.iccprofile [Phil_Green]
vnd.ieee.1905 application/vnd.ieee.1905 [Purva_R_Rajkotia]
vnd.igloader application/vnd.igloader [Tim_Fisher]
vnd.imagemeter.folder+zip application/vnd.imagemeter.folder+zip [Dirk_Farin]
vnd.imagemeter.image+zip application/vnd.imagemeter.image+zip [Dirk_Farin]
vnd.immervision-ivp application/vnd.immervision-ivp [Mathieu_Villegas]
vnd.immervision-ivu application/vnd.immervision-ivu [Mathieu_Villegas]
vnd.ims.imsccv1p1 application/vnd.ims.imsccv1p1 [Lisa_Mattson]
vnd.ims.imsccv1p2 application/vnd.ims.imsccv1p2 [Lisa_Mattson]
vnd.ims.imsccv1p3 application/vnd.ims.imsccv1p3 [Lisa_Mattson]
vnd.ims.lis.v2.result+json application/vnd.ims.lis.v2.result+json [Lisa_Mattson]
vnd.ims.lti.v2.toolconsumerprofile+json application/vnd.ims.lti.v2.toolconsumerprofile+json [Lisa_Mattson]
vnd.ims.lti.v2.toolproxy.id+json application/vnd.ims.lti.v2.toolproxy.id+json [Lisa_Mattson]
vnd.ims.lti.v2.toolproxy+json application/vnd.ims.lti.v2.toolproxy+json [Lisa_Mattson]
vnd.ims.lti.v2.toolsettings+json application/vnd.ims.lti.v2.toolsettings+json [Lisa_Mattson]
vnd.ims.lti.v2.toolsettings.simple+json application/vnd.ims.lti.v2.toolsettings.simple+json [Lisa_Mattson]
vnd.informedcontrol.rms+xml application/vnd.informedcontrol.rms+xml [Mark_Wahl]
vnd.infotech.project application/vnd.infotech.project [Charles_Engelke]
vnd.infotech.project+xml application/vnd.infotech.project+xml [Charles_Engelke]
vnd.informix-visionary - OBSOLETED in favor of application/vnd.visionary application/vnd.informix-visionary [Christopher_Gales]
vnd.innopath.wamp.notification application/vnd.innopath.wamp.notification [Takanori_Sudo]
vnd.insors.igm application/vnd.insors.igm [Jon_Swanson]
vnd.intercon.formnet application/vnd.intercon.formnet [Tom_Gurak]
vnd.intergeo application/vnd.intergeo [Yves_Kreis_2]
vnd.intertrust.digibox application/vnd.intertrust.digibox [Luke_Tomasello]
vnd.intertrust.nncp application/vnd.intertrust.nncp [Luke_Tomasello]
vnd.intu.qbo application/vnd.intu.qbo [Greg_Scratchley]
vnd.intu.qfx application/vnd.intu.qfx [Greg_Scratchley]
vnd.iptc.g2.catalogitem+xml application/vnd.iptc.g2.catalogitem+xml [Michael_Steidl]
vnd.iptc.g2.conceptitem+xml application/vnd.iptc.g2.conceptitem+xml [Michael_Steidl]
vnd.iptc.g2.knowledgeitem+xml application/vnd.iptc.g2.knowledgeitem+xml [Michael_Steidl]
vnd.iptc.g2.newsitem+xml application/vnd.iptc.g2.newsitem+xml [Michael_Steidl]
vnd.iptc.g2.newsmessage+xml application/vnd.iptc.g2.newsmessage+xml [Michael_Steidl]
vnd.iptc.g2.packageitem+xml application/vnd.iptc.g2.packageitem+xml [Michael_Steidl]
vnd.iptc.g2.planningitem+xml application/vnd.iptc.g2.planningitem+xml [Michael_Steidl]
vnd.ipunplugged.rcprofile application/vnd.ipunplugged.rcprofile [Per_Ersson]
vnd.irepository.package+xml application/vnd.irepository.package+xml [Martin_Knowles]
vnd.is-xpr application/vnd.is-xpr [Satish_Navarajan]
vnd.isac.fcs application/vnd.isac.fcs [Ryan_Brinkman]
vnd.jam application/vnd.jam [Brijesh_Kumar]
vnd.iso11783-10+zip application/vnd.iso11783-10+zip [Frank_Wiebeler]
vnd.japannet-directory-service application/vnd.japannet-directory-service [Kiyofusa_Fujii]
vnd.japannet-jpnstore-wakeup application/vnd.japannet-jpnstore-wakeup [Jun_Yoshitake]
vnd.japannet-payment-wakeup application/vnd.japannet-payment-wakeup [Kiyofusa_Fujii]
vnd.japannet-registration application/vnd.japannet-registration [Jun_Yoshitake]
vnd.japannet-registration-wakeup application/vnd.japannet-registration-wakeup [Kiyofusa_Fujii]
vnd.japannet-setstore-wakeup application/vnd.japannet-setstore-wakeup [Jun_Yoshitake]
vnd.japannet-verification application/vnd.japannet-verification [Jun_Yoshitake]
vnd.japannet-verification-wakeup application/vnd.japannet-verification-wakeup [Kiyofusa_Fujii]
vnd.jcp.javame.midlet-rms application/vnd.jcp.javame.midlet-rms [Mikhail_Gorshenev]
vnd.jisp application/vnd.jisp [Sebastiaan_Deckers]
vnd.joost.joda-archive application/vnd.joost.joda-archive [Joost]
vnd.jsk.isdn-ngn application/vnd.jsk.isdn-ngn [Yokoyama_Kiyonobu]
vnd.kahootz application/vnd.kahootz [Tim_Macdonald]
vnd.kde.karbon application/vnd.kde.karbon [David_Faure]
vnd.kde.kchart application/vnd.kde.kchart [David_Faure]
vnd.kde.kformula application/vnd.kde.kformula [David_Faure]
vnd.kde.kivio application/vnd.kde.kivio [David_Faure]
vnd.kde.kontour application/vnd.kde.kontour [David_Faure]
vnd.kde.kpresenter application/vnd.kde.kpresenter [David_Faure]
vnd.kde.kspread application/vnd.kde.kspread [David_Faure]
vnd.kde.kword application/vnd.kde.kword [David_Faure]
vnd.kenameaapp application/vnd.kenameaapp [Dirk_DiGiorgio-Haag]
vnd.kidspiration application/vnd.kidspiration [Jack_Bennett]
vnd.Kinar application/vnd.Kinar [Hemant_Thakkar]
vnd.koan application/vnd.koan [Pete_Cole]
vnd.kodak-descriptor application/vnd.kodak-descriptor [Michael_J._Donahue]
vnd.las application/vnd.las [NCGIS][Bryan_Blank]
vnd.las.las+json application/vnd.las.las+json [Rob_Bailey]
vnd.las.las+xml application/vnd.las.las+xml [Rob_Bailey]
vnd.laszip application/vnd.laszip [NCGIS][Bryan_Blank]
vnd.leap+json application/vnd.leap+json [Mark_C_Fralick]
vnd.liberty-request+xml application/vnd.liberty-request+xml [Brett_McDowell]
vnd.llamagraphics.life-balance.desktop application/vnd.llamagraphics.life-balance.desktop [Catherine_E._White]
vnd.llamagraphics.life-balance.exchange+xml application/vnd.llamagraphics.life-balance.exchange+xml [Catherine_E._White]
vnd.logipipe.circuit+zip application/vnd.logipipe.circuit+zip [Victor_Kuchynsky]
vnd.loom application/vnd.loom [Sten_Linnarsson]
vnd.lotus-1-2-3 application/vnd.lotus-1-2-3 [Paul_Wattenberger]
vnd.lotus-approach application/vnd.lotus-approach [Paul_Wattenberger]
vnd.lotus-freelance application/vnd.lotus-freelance [Paul_Wattenberger]
vnd.lotus-notes application/vnd.lotus-notes [Michael_Laramie]
vnd.lotus-organizer application/vnd.lotus-organizer [Paul_Wattenberger]
vnd.lotus-screencam application/vnd.lotus-screencam [Paul_Wattenberger]
vnd.lotus-wordpro application/vnd.lotus-wordpro [Paul_Wattenberger]
vnd.macports.portpkg application/vnd.macports.portpkg [James_Berry]
vnd.mapbox-vector-tile application/vnd.mapbox-vector-tile [Blake_Thompson]
vnd.marlin.drm.actiontoken+xml application/vnd.marlin.drm.actiontoken+xml [Gary_Ellison]
vnd.marlin.drm.conftoken+xml application/vnd.marlin.drm.conftoken+xml [Gary_Ellison]
vnd.marlin.drm.license+xml application/vnd.marlin.drm.license+xml [Gary_Ellison]
vnd.marlin.drm.mdcf application/vnd.marlin.drm.mdcf [Gary_Ellison]
vnd.mason+json application/vnd.mason+json [Jorn_Wildt]
vnd.maxmind.maxmind-db application/vnd.maxmind.maxmind-db [William_Stevenson]
vnd.mcd application/vnd.mcd [Tadashi_Gotoh]
vnd.medcalcdata application/vnd.medcalcdata [Frank_Schoonjans]
vnd.mediastation.cdkey application/vnd.mediastation.cdkey [Henry_Flurry]
vnd.meridian-slingshot application/vnd.meridian-slingshot [Eric_Wedel]
vnd.MFER application/vnd.MFER [Masaaki_Hirai]
vnd.mfmp application/vnd.mfmp [Yukari_Ikeda]
vnd.micro+json application/vnd.micro+json [Dali_Zheng]
vnd.micrografx.flo application/vnd.micrografx.flo [Joe_Prevo]
vnd.micrografx.igx application/vnd.micrografx.igx [Joe_Prevo]
vnd.microsoft.portable-executable application/vnd.microsoft.portable-executable [Henrik_Andersson]
vnd.microsoft.windows.thumbnail-cache application/vnd.microsoft.windows.thumbnail-cache [Henrik_Andersson]
vnd.miele+json application/vnd.miele+json [Nils_Langhammer]
vnd.mif application/vnd.mif [Mike_Wexler]
vnd.minisoft-hp3000-save application/vnd.minisoft-hp3000-save [Chris_Bartram]
vnd.mitsubishi.misty-guard.trustweb application/vnd.mitsubishi.misty-guard.trustweb [Tanaka]
vnd.Mobius.DAF application/vnd.Mobius.DAF [Allen_K._Kabayama]
vnd.Mobius.DIS application/vnd.Mobius.DIS [Allen_K._Kabayama]
vnd.Mobius.MBK application/vnd.Mobius.MBK [Alex_Devasia]
vnd.Mobius.MQY application/vnd.Mobius.MQY [Alex_Devasia]
vnd.Mobius.MSL application/vnd.Mobius.MSL [Allen_K._Kabayama]
vnd.Mobius.PLC application/vnd.Mobius.PLC [Allen_K._Kabayama]
vnd.Mobius.TXF application/vnd.Mobius.TXF [Allen_K._Kabayama]
vnd.mophun.application application/vnd.mophun.application [Bjorn_Wennerstrom]
vnd.mophun.certificate application/vnd.mophun.certificate [Bjorn_Wennerstrom]
vnd.motorola.flexsuite application/vnd.motorola.flexsuite [Mark_Patton]
vnd.motorola.flexsuite.adsi application/vnd.motorola.flexsuite.adsi [Mark_Patton]
vnd.motorola.flexsuite.fis application/vnd.motorola.flexsuite.fis [Mark_Patton]
vnd.motorola.flexsuite.gotap application/vnd.motorola.flexsuite.gotap [Mark_Patton]
vnd.motorola.flexsuite.kmr application/vnd.motorola.flexsuite.kmr [Mark_Patton]
vnd.motorola.flexsuite.ttc application/vnd.motorola.flexsuite.ttc [Mark_Patton]
vnd.motorola.flexsuite.wem application/vnd.motorola.flexsuite.wem [Mark_Patton]
vnd.motorola.iprm application/vnd.motorola.iprm [Rafie_Shamsaasef]
vnd.mozilla.xul+xml application/vnd.mozilla.xul+xml [Braden_N_McDaniel]
vnd.ms-artgalry application/vnd.ms-artgalry [Dean_Slawson]
vnd.ms-asf application/vnd.ms-asf [Eric_Fleischman]
vnd.ms-cab-compressed application/vnd.ms-cab-compressed [Kim_Scarborough]
vnd.ms-3mfdocument application/vnd.ms-3mfdocument [Shawn_Maloney]
vnd.ms-excel application/vnd.ms-excel [Sukvinder_S._Gill]
vnd.ms-excel.addin.macroEnabled.12 application/vnd.ms-excel.addin.macroEnabled.12 [Chris_Rae]
vnd.ms-excel.sheet.binary.macroEnabled.12 application/vnd.ms-excel.sheet.binary.macroEnabled.12 [Chris_Rae]
vnd.ms-excel.sheet.macroEnabled.12 application/vnd.ms-excel.sheet.macroEnabled.12 [Chris_Rae]
vnd.ms-excel.template.macroEnabled.12 application/vnd.ms-excel.template.macroEnabled.12 [Chris_Rae]
vnd.ms-fontobject application/vnd.ms-fontobject [Kim_Scarborough]
vnd.ms-htmlhelp application/vnd.ms-htmlhelp [Anatoly_Techtonik]
vnd.ms-ims application/vnd.ms-ims [Eric_Ledoux]
vnd.ms-lrm application/vnd.ms-lrm [Eric_Ledoux]
vnd.ms-office.activeX+xml application/vnd.ms-office.activeX+xml [Chris_Rae]
vnd.ms-officetheme application/vnd.ms-officetheme [Chris_Rae]
vnd.ms-playready.initiator+xml application/vnd.ms-playready.initiator+xml [Daniel_Schneider]
vnd.ms-powerpoint application/vnd.ms-powerpoint [Sukvinder_S._Gill]
vnd.ms-powerpoint.addin.macroEnabled.12 application/vnd.ms-powerpoint.addin.macroEnabled.12 [Chris_Rae]
vnd.ms-powerpoint.presentation.macroEnabled.12 application/vnd.ms-powerpoint.presentation.macroEnabled.12 [Chris_Rae]
vnd.ms-powerpoint.slide.macroEnabled.12 application/vnd.ms-powerpoint.slide.macroEnabled.12 [Chris_Rae]
vnd.ms-powerpoint.slideshow.macroEnabled.12 application/vnd.ms-powerpoint.slideshow.macroEnabled.12 [Chris_Rae]
vnd.ms-powerpoint.template.macroEnabled.12 application/vnd.ms-powerpoint.template.macroEnabled.12 [Chris_Rae]
vnd.ms-PrintDeviceCapabilities+xml application/vnd.ms-PrintDeviceCapabilities+xml [Justin_Hutchings]
vnd.ms-PrintSchemaTicket+xml application/vnd.ms-PrintSchemaTicket+xml [Justin_Hutchings]
vnd.ms-project application/vnd.ms-project [Sukvinder_S._Gill]
vnd.ms-tnef application/vnd.ms-tnef [Sukvinder_S._Gill]
vnd.ms-windows.devicepairing application/vnd.ms-windows.devicepairing [Justin_Hutchings]
vnd.ms-windows.nwprinting.oob application/vnd.ms-windows.nwprinting.oob [Justin_Hutchings]
vnd.ms-windows.printerpairing application/vnd.ms-windows.printerpairing [Justin_Hutchings]
vnd.ms-windows.wsd.oob application/vnd.ms-windows.wsd.oob [Justin_Hutchings]
vnd.ms-wmdrm.lic-chlg-req application/vnd.ms-wmdrm.lic-chlg-req [Kevin_Lau]
vnd.ms-wmdrm.lic-resp application/vnd.ms-wmdrm.lic-resp [Kevin_Lau]
vnd.ms-wmdrm.meter-chlg-req application/vnd.ms-wmdrm.meter-chlg-req [Kevin_Lau]
vnd.ms-wmdrm.meter-resp application/vnd.ms-wmdrm.meter-resp [Kevin_Lau]
vnd.ms-word.document.macroEnabled.12 application/vnd.ms-word.document.macroEnabled.12 [Chris_Rae]
vnd.ms-word.template.macroEnabled.12 application/vnd.ms-word.template.macroEnabled.12 [Chris_Rae]
vnd.ms-works application/vnd.ms-works [Sukvinder_S._Gill]
vnd.ms-wpl application/vnd.ms-wpl [Dan_Plastina]
vnd.ms-xpsdocument application/vnd.ms-xpsdocument [Jesse_McGatha]
vnd.msa-disk-image application/vnd.msa-disk-image [Thomas_Huth]
vnd.mseq application/vnd.mseq [Gwenael_Le_Bodic]
vnd.msign application/vnd.msign [Malte_Borcherding]
vnd.multiad.creator application/vnd.multiad.creator [Steve_Mills]
vnd.multiad.creator.cif application/vnd.multiad.creator.cif [Steve_Mills]
vnd.musician application/vnd.musician [Greg_Adams]
vnd.music-niff application/vnd.music-niff [Tim_Butler]
vnd.muvee.style application/vnd.muvee.style [Chandrashekhara_Anantharamu]
vnd.mynfc application/vnd.mynfc [Franck_Lefevre]
vnd.ncd.control application/vnd.ncd.control [Lauri_Tarkkala]
vnd.ncd.reference application/vnd.ncd.reference [Lauri_Tarkkala]
vnd.nearst.inv+json application/vnd.nearst.inv+json [Thomas_Schoffelen]
vnd.nebumind.line application/vnd.nebumind.line [Andreas_Molzer]
vnd.nervana application/vnd.nervana [Steve_Judkins]
vnd.netfpx application/vnd.netfpx [Andy_Mutz]
vnd.neurolanguage.nlu application/vnd.neurolanguage.nlu [Dan_DuFeu]
vnd.nimn application/vnd.nimn [Amit_Kumar_Gupta]
vnd.nintendo.snes.rom application/vnd.nintendo.snes.rom [Henrik_Andersson]
vnd.nintendo.nitro.rom application/vnd.nintendo.nitro.rom [Henrik_Andersson]
vnd.nitf application/vnd.nitf [Steve_Rogan]
vnd.noblenet-directory application/vnd.noblenet-directory [Monty_Solomon]
vnd.noblenet-sealer application/vnd.noblenet-sealer [Monty_Solomon]
vnd.noblenet-web application/vnd.noblenet-web [Monty_Solomon]
vnd.nokia.catalogs application/vnd.nokia.catalogs [Nokia]
vnd.nokia.conml+wbxml application/vnd.nokia.conml+wbxml [Nokia]
vnd.nokia.conml+xml application/vnd.nokia.conml+xml [Nokia]
vnd.nokia.iptv.config+xml application/vnd.nokia.iptv.config+xml [Nokia]
vnd.nokia.iSDS-radio-presets application/vnd.nokia.iSDS-radio-presets [Nokia]
vnd.nokia.landmark+wbxml application/vnd.nokia.landmark+wbxml [Nokia]
vnd.nokia.landmark+xml application/vnd.nokia.landmark+xml [Nokia]
vnd.nokia.landmarkcollection+xml application/vnd.nokia.landmarkcollection+xml [Nokia]
vnd.nokia.ncd application/vnd.nokia.ncd [Nokia]
vnd.nokia.n-gage.ac+xml application/vnd.nokia.n-gage.ac+xml [Nokia]
vnd.nokia.n-gage.data application/vnd.nokia.n-gage.data [Nokia]
vnd.nokia.n-gage.symbian.install - OBSOLETE; no replacement given application/vnd.nokia.n-gage.symbian.install [Nokia]
vnd.nokia.pcd+wbxml application/vnd.nokia.pcd+wbxml [Nokia]
vnd.nokia.pcd+xml application/vnd.nokia.pcd+xml [Nokia]
vnd.nokia.radio-preset application/vnd.nokia.radio-preset [Nokia]
vnd.nokia.radio-presets application/vnd.nokia.radio-presets [Nokia]
vnd.novadigm.EDM application/vnd.novadigm.EDM [Janine_Swenson]
vnd.novadigm.EDX application/vnd.novadigm.EDX [Janine_Swenson]
vnd.novadigm.EXT application/vnd.novadigm.EXT [Janine_Swenson]
vnd.ntt-local.content-share application/vnd.ntt-local.content-share [Akinori_Taya]
vnd.ntt-local.file-transfer application/vnd.ntt-local.file-transfer [NTT-local]
vnd.ntt-local.ogw_remote-access application/vnd.ntt-local.ogw_remote-access [NTT-local]
vnd.ntt-local.sip-ta_remote application/vnd.ntt-local.sip-ta_remote [NTT-local]
vnd.ntt-local.sip-ta_tcp_stream application/vnd.ntt-local.sip-ta_tcp_stream [NTT-local]
vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.chart [Svante_Schubert][OASIS]
vnd.oasis.opendocument.chart-template application/vnd.oasis.opendocument.chart-template [Svante_Schubert][OASIS]
vnd.oasis.opendocument.database application/vnd.oasis.opendocument.database [Svante_Schubert][OASIS]
vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.formula [Svante_Schubert][OASIS]
vnd.oasis.opendocument.formula-template application/vnd.oasis.opendocument.formula-template [Svante_Schubert][OASIS]
vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.graphics [Svante_Schubert][OASIS]
vnd.oasis.opendocument.graphics-template application/vnd.oasis.opendocument.graphics-template [Svante_Schubert][OASIS]
vnd.oasis.opendocument.image application/vnd.oasis.opendocument.image [Svante_Schubert][OASIS]
vnd.oasis.opendocument.image-template application/vnd.oasis.opendocument.image-template [Svante_Schubert][OASIS]
vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.presentation [Svante_Schubert][OASIS]
vnd.oasis.opendocument.presentation-template application/vnd.oasis.opendocument.presentation-template [Svante_Schubert][OASIS]
vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.spreadsheet [Svante_Schubert][OASIS]
vnd.oasis.opendocument.spreadsheet-template application/vnd.oasis.opendocument.spreadsheet-template [Svante_Schubert][OASIS]
vnd.oasis.opendocument.text application/vnd.oasis.opendocument.text [Svante_Schubert][OASIS]
vnd.oasis.opendocument.text-master application/vnd.oasis.opendocument.text-master [Svante_Schubert][OASIS]
vnd.oasis.opendocument.text-template application/vnd.oasis.opendocument.text-template [Svante_Schubert][OASIS]
vnd.oasis.opendocument.text-web application/vnd.oasis.opendocument.text-web [Svante_Schubert][OASIS]
vnd.obn application/vnd.obn [Matthias_Hessling]
vnd.ocf+cbor application/vnd.ocf+cbor [Michael_Koster]
vnd.oci.image.manifest.v1+json application/vnd.oci.image.manifest.v1+json [Steven_Lasker]
vnd.oftn.l10n+json application/vnd.oftn.l10n+json [Eli_Grey]
vnd.oipf.contentaccessdownload+xml application/vnd.oipf.contentaccessdownload+xml [Claire_DEsclercs]
vnd.oipf.contentaccessstreaming+xml application/vnd.oipf.contentaccessstreaming+xml [Claire_DEsclercs]
vnd.oipf.cspg-hexbinary application/vnd.oipf.cspg-hexbinary [Claire_DEsclercs]
vnd.oipf.dae.svg+xml application/vnd.oipf.dae.svg+xml [Claire_DEsclercs]
vnd.oipf.dae.xhtml+xml application/vnd.oipf.dae.xhtml+xml [Claire_DEsclercs]
vnd.oipf.mippvcontrolmessage+xml application/vnd.oipf.mippvcontrolmessage+xml [Claire_DEsclercs]
vnd.oipf.pae.gem application/vnd.oipf.pae.gem [Claire_DEsclercs]
vnd.oipf.spdiscovery+xml application/vnd.oipf.spdiscovery+xml [Claire_DEsclercs]
vnd.oipf.spdlist+xml application/vnd.oipf.spdlist+xml [Claire_DEsclercs]
vnd.oipf.ueprofile+xml application/vnd.oipf.ueprofile+xml [Claire_DEsclercs]
vnd.oipf.userprofile+xml application/vnd.oipf.userprofile+xml [Claire_DEsclercs]
vnd.olpc-sugar application/vnd.olpc-sugar [John_Palmieri]
vnd.oma.bcast.associated-procedure-parameter+xml application/vnd.oma.bcast.associated-procedure-parameter+xml [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.drm-trigger+xml application/vnd.oma.bcast.drm-trigger+xml [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.imd+xml application/vnd.oma.bcast.imd+xml [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.ltkm application/vnd.oma.bcast.ltkm [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.notification+xml application/vnd.oma.bcast.notification+xml [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.provisioningtrigger application/vnd.oma.bcast.provisioningtrigger [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.sgboot application/vnd.oma.bcast.sgboot [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.sgdd+xml application/vnd.oma.bcast.sgdd+xml [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.sgdu application/vnd.oma.bcast.sgdu [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.simple-symbol-container application/vnd.oma.bcast.simple-symbol-container [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.smartcard-trigger+xml application/vnd.oma.bcast.smartcard-trigger+xml [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.sprov+xml application/vnd.oma.bcast.sprov+xml [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.bcast.stkm application/vnd.oma.bcast.stkm [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.cab-address-book+xml application/vnd.oma.cab-address-book+xml [Hao_Wang][OMA]
vnd.oma.cab-feature-handler+xml application/vnd.oma.cab-feature-handler+xml [Hao_Wang][OMA]
vnd.oma.cab-pcc+xml application/vnd.oma.cab-pcc+xml [Hao_Wang][OMA]
vnd.oma.cab-subs-invite+xml application/vnd.oma.cab-subs-invite+xml [Hao_Wang][OMA]
vnd.oma.cab-user-prefs+xml application/vnd.oma.cab-user-prefs+xml [Hao_Wang][OMA]
vnd.oma.dcd application/vnd.oma.dcd [Avi_Primo][Open_Mobile_Naming_Authority]
vnd.oma.dcdc application/vnd.oma.dcdc [Avi_Primo][Open_Mobile_Naming_Authority]
vnd.oma.dd2+xml application/vnd.oma.dd2+xml [Jun_Sato][Open_Mobile_Alliance_BAC_DLDRM_Working_Group]
vnd.oma.drm.risd+xml application/vnd.oma.drm.risd+xml [Uwe_Rauschenbach][Open_Mobile_Naming_Authority]
vnd.oma.group-usage-list+xml application/vnd.oma.group-usage-list+xml [Sean_Kelley][OMA_Presence_and_Availability_PAG_Working_Group]
vnd.oma.lwm2m+cbor application/vnd.oma.lwm2m+cbor [Open_Mobile_Naming_Authority][John_Mudge]
vnd.oma.lwm2m+json application/vnd.oma.lwm2m+json [Open_Mobile_Naming_Authority][John_Mudge]
vnd.oma.lwm2m+tlv application/vnd.oma.lwm2m+tlv [Open_Mobile_Naming_Authority][John_Mudge]
vnd.oma.pal+xml application/vnd.oma.pal+xml [Brian_McColgan][Open_Mobile_Naming_Authority]
vnd.oma.poc.detailed-progress-report+xml application/vnd.oma.poc.detailed-progress-report+xml [OMA_Push_to_Talk_over_Cellular_POC_Working_Group]
vnd.oma.poc.final-report+xml application/vnd.oma.poc.final-report+xml [OMA_Push_to_Talk_over_Cellular_POC_Working_Group]
vnd.oma.poc.groups+xml application/vnd.oma.poc.groups+xml [Sean_Kelley][OMA_Push_to_Talk_over_Cellular_POC_Working_Group]
vnd.oma.poc.invocation-descriptor+xml application/vnd.oma.poc.invocation-descriptor+xml [OMA_Push_to_Talk_over_Cellular_POC_Working_Group]
vnd.oma.poc.optimized-progress-report+xml application/vnd.oma.poc.optimized-progress-report+xml [OMA_Push_to_Talk_over_Cellular_POC_Working_Group]
vnd.oma.push application/vnd.oma.push [Bryan_Sullivan][OMA]
vnd.oma.scidm.messages+xml application/vnd.oma.scidm.messages+xml [Wenjun_Zeng][Open_Mobile_Naming_Authority]
vnd.oma.xcap-directory+xml application/vnd.oma.xcap-directory+xml [Sean_Kelley][OMA_Presence_and_Availability_PAG_Working_Group]
vnd.omads-email+xml application/vnd.omads-email+xml [OMA_Data_Synchronization_Working_Group]
vnd.omads-file+xml application/vnd.omads-file+xml [OMA_Data_Synchronization_Working_Group]
vnd.omads-folder+xml application/vnd.omads-folder+xml [OMA_Data_Synchronization_Working_Group]
vnd.omaloc-supl-init application/vnd.omaloc-supl-init [Julien_Grange]
vnd.oma-scws-config application/vnd.oma-scws-config [Ilan_Mahalal]
vnd.oma-scws-http-request application/vnd.oma-scws-http-request [Ilan_Mahalal]
vnd.oma-scws-http-response application/vnd.oma-scws-http-response [Ilan_Mahalal]
vnd.onepager application/vnd.onepager [Nathan_Black]
vnd.onepagertamp application/vnd.onepagertamp [Nathan_Black]
vnd.onepagertamx application/vnd.onepagertamx [Nathan_Black]
vnd.onepagertat application/vnd.onepagertat [Nathan_Black]
vnd.onepagertatp application/vnd.onepagertatp [Nathan_Black]
vnd.onepagertatx application/vnd.onepagertatx [Nathan_Black]
vnd.openblox.game-binary application/vnd.openblox.game-binary [Mark_Otaris]
vnd.openblox.game+xml application/vnd.openblox.game+xml [Mark_Otaris]
vnd.openeye.oeb application/vnd.openeye.oeb [Craig_Bruce]
vnd.openstreetmap.data+xml application/vnd.openstreetmap.data+xml [Paul_Norman]
vnd.openxmlformats-officedocument.custom-properties+xml application/vnd.openxmlformats-officedocument.custom-properties+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.customXmlProperties+xml application/vnd.openxmlformats-officedocument.customXmlProperties+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.drawing+xml application/vnd.openxmlformats-officedocument.drawing+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.drawingml.chart+xml application/vnd.openxmlformats-officedocument.drawingml.chart+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.drawingml.chartshapes+xml application/vnd.openxmlformats-officedocument.drawingml.chartshapes+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.drawingml.diagramColors+xml application/vnd.openxmlformats-officedocument.drawingml.diagramColors+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.drawingml.diagramData+xml application/vnd.openxmlformats-officedocument.drawingml.diagramData+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.drawingml.diagramLayout+xml application/vnd.openxmlformats-officedocument.drawingml.diagramLayout+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.drawingml.diagramStyle+xml application/vnd.openxmlformats-officedocument.drawingml.diagramStyle+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.extended-properties+xml application/vnd.openxmlformats-officedocument.extended-properties+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.commentAuthors+xml application/vnd.openxmlformats-officedocument.presentationml.commentAuthors+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.comments+xml application/vnd.openxmlformats-officedocument.presentationml.comments+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.handoutMaster+xml application/vnd.openxmlformats-officedocument.presentationml.handoutMaster+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.notesMaster+xml application/vnd.openxmlformats-officedocument.presentationml.notesMaster+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.notesSlide+xml application/vnd.openxmlformats-officedocument.presentationml.notesSlide+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.presentation application/vnd.openxmlformats-officedocument.presentationml.presentation [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.presentation.main+xml application/vnd.openxmlformats-officedocument.presentationml.presentation.main+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.presProps+xml application/vnd.openxmlformats-officedocument.presentationml.presProps+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.slide application/vnd.openxmlformats-officedocument.presentationml.slide [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.slide+xml application/vnd.openxmlformats-officedocument.presentationml.slide+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.slideLayout+xml application/vnd.openxmlformats-officedocument.presentationml.slideLayout+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.slideMaster+xml application/vnd.openxmlformats-officedocument.presentationml.slideMaster+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.slideshow application/vnd.openxmlformats-officedocument.presentationml.slideshow [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.slideshow.main+xml application/vnd.openxmlformats-officedocument.presentationml.slideshow.main+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.slideUpdateInfo+xml application/vnd.openxmlformats-officedocument.presentationml.slideUpdateInfo+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.tableStyles+xml application/vnd.openxmlformats-officedocument.presentationml.tableStyles+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.tags+xml application/vnd.openxmlformats-officedocument.presentationml.tags+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.template application/vnd.openxmlformats-officedocument.presentationml.template [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.template.main+xml application/vnd.openxmlformats-officedocument.presentationml.template.main+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.presentationml.viewProps+xml application/vnd.openxmlformats-officedocument.presentationml.viewProps+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.calcChain+xml application/vnd.openxmlformats-officedocument.spreadsheetml.calcChain+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.chartsheet+xml application/vnd.openxmlformats-officedocument.spreadsheetml.chartsheet+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.comments+xml application/vnd.openxmlformats-officedocument.spreadsheetml.comments+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.connections+xml application/vnd.openxmlformats-officedocument.spreadsheetml.connections+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.dialogsheet+xml application/vnd.openxmlformats-officedocument.spreadsheetml.dialogsheet+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.externalLink+xml application/vnd.openxmlformats-officedocument.spreadsheetml.externalLink+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.pivotCacheDefinition+xml application/vnd.openxmlformats-officedocument.spreadsheetml.pivotCacheDefinition+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.pivotCacheRecords+xml application/vnd.openxmlformats-officedocument.spreadsheetml.pivotCacheRecords+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.pivotTable+xml application/vnd.openxmlformats-officedocument.spreadsheetml.pivotTable+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.queryTable+xml application/vnd.openxmlformats-officedocument.spreadsheetml.queryTable+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.revisionHeaders+xml application/vnd.openxmlformats-officedocument.spreadsheetml.revisionHeaders+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.revisionLog+xml application/vnd.openxmlformats-officedocument.spreadsheetml.revisionLog+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.sharedStrings+xml application/vnd.openxmlformats-officedocument.spreadsheetml.sharedStrings+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.sheet application/vnd.openxmlformats-officedocument.spreadsheetml.sheet [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.sheetMetadata+xml application/vnd.openxmlformats-officedocument.spreadsheetml.sheetMetadata+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.styles+xml application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.table+xml application/vnd.openxmlformats-officedocument.spreadsheetml.table+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.tableSingleCells+xml application/vnd.openxmlformats-officedocument.spreadsheetml.tableSingleCells+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.template application/vnd.openxmlformats-officedocument.spreadsheetml.template [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.template.main+xml application/vnd.openxmlformats-officedocument.spreadsheetml.template.main+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.userNames+xml application/vnd.openxmlformats-officedocument.spreadsheetml.userNames+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.volatileDependencies+xml application/vnd.openxmlformats-officedocument.spreadsheetml.volatileDependencies+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.theme+xml application/vnd.openxmlformats-officedocument.theme+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.themeOverride+xml application/vnd.openxmlformats-officedocument.themeOverride+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.vmlDrawing application/vnd.openxmlformats-officedocument.vmlDrawing [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.comments+xml application/vnd.openxmlformats-officedocument.wordprocessingml.comments+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.document application/vnd.openxmlformats-officedocument.wordprocessingml.document [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.document.glossary+xml application/vnd.openxmlformats-officedocument.wordprocessingml.document.glossary+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.endnotes+xml application/vnd.openxmlformats-officedocument.wordprocessingml.endnotes+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.fontTable+xml application/vnd.openxmlformats-officedocument.wordprocessingml.fontTable+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.footer+xml application/vnd.openxmlformats-officedocument.wordprocessingml.footer+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.numbering+xml application/vnd.openxmlformats-officedocument.wordprocessingml.numbering+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.settings+xml application/vnd.openxmlformats-officedocument.wordprocessingml.settings+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.styles+xml application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.template application/vnd.openxmlformats-officedocument.wordprocessingml.template [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.template.main+xml application/vnd.openxmlformats-officedocument.wordprocessingml.template.main+xml [Makoto_Murata]
vnd.openxmlformats-officedocument.wordprocessingml.webSettings+xml application/vnd.openxmlformats-officedocument.wordprocessingml.webSettings+xml [Makoto_Murata]
vnd.openxmlformats-package.core-properties+xml application/vnd.openxmlformats-package.core-properties+xml [Makoto_Murata]
vnd.openxmlformats-package.digital-signature-xmlsignature+xml application/vnd.openxmlformats-package.digital-signature-xmlsignature+xml [Makoto_Murata]
vnd.openxmlformats-package.relationships+xml application/vnd.openxmlformats-package.relationships+xml [Makoto_Murata]
vnd.oracle.resource+json application/vnd.oracle.resource+json [Ning_Dong]
vnd.orange.indata application/vnd.orange.indata [CHATRAS_Bruno]
vnd.osa.netdeploy application/vnd.osa.netdeploy [Steven_Klos]
vnd.osgeo.mapguide.package application/vnd.osgeo.mapguide.package [Jason_Birch]
vnd.osgi.bundle application/vnd.osgi.bundle [Peter_Kriens]
vnd.osgi.dp application/vnd.osgi.dp [Peter_Kriens]
vnd.osgi.subsystem application/vnd.osgi.subsystem [Peter_Kriens]
vnd.otps.ct-kip+xml application/vnd.otps.ct-kip+xml [Magnus_Nystrom]
vnd.oxli.countgraph application/vnd.oxli.countgraph [C._Titus_Brown]
vnd.pagerduty+json application/vnd.pagerduty+json [Steve_Rice]
vnd.palm application/vnd.palm [Gavin_Peacock]
vnd.panoply application/vnd.panoply [Natarajan_Balasundara]
vnd.paos.xml application/vnd.paos.xml [John_Kemp]
vnd.patentdive application/vnd.patentdive [Christian_Trosclair]
vnd.patientecommsdoc application/vnd.patientecommsdoc [Andrew_David_Kendall]
vnd.pawaafile application/vnd.pawaafile [Prakash_Baskaran]
vnd.pcos application/vnd.pcos [Slawomir_Lisznianski]
vnd.pg.format application/vnd.pg.format [April_Gandert]
vnd.pg.osasli application/vnd.pg.osasli [April_Gandert]
vnd.piaccess.application-licence application/vnd.piaccess.application-licence [Lucas_Maneos]
vnd.picsel application/vnd.picsel [Giuseppe_Naccarato]
vnd.pmi.widget application/vnd.pmi.widget [Rhys_Lewis]
vnd.poc.group-advertisement+xml application/vnd.poc.group-advertisement+xml [Sean_Kelley][OMA_Push_to_Talk_over_Cellular_POC_Working_Group]
vnd.pocketlearn application/vnd.pocketlearn [Jorge_Pando]
vnd.powerbuilder6 application/vnd.powerbuilder6 [David_Guy]
vnd.powerbuilder6-s application/vnd.powerbuilder6-s [David_Guy]
vnd.powerbuilder7 application/vnd.powerbuilder7 [Reed_Shilts]
vnd.powerbuilder75 application/vnd.powerbuilder75 [Reed_Shilts]
vnd.powerbuilder75-s application/vnd.powerbuilder75-s [Reed_Shilts]
vnd.powerbuilder7-s application/vnd.powerbuilder7-s [Reed_Shilts]
vnd.preminet application/vnd.preminet [Juoko_Tenhunen]
vnd.previewsystems.box application/vnd.previewsystems.box [Roman_Smolgovsky]
vnd.proteus.magazine application/vnd.proteus.magazine [Pete_Hoch]
vnd.psfs application/vnd.psfs [Kristopher_Durski]
vnd.publishare-delta-tree application/vnd.publishare-delta-tree [Oren_Ben-Kiki]
vnd.pvi.ptid1 application/vnd.pvi.ptid1 [Charles_P._Lamb]
vnd.pwg-multiplexed application/vnd.pwg-multiplexed [RFC3391]
vnd.pwg-xhtml-print+xml application/vnd.pwg-xhtml-print+xml [Don_Wright]
vnd.qualcomm.brew-app-res application/vnd.qualcomm.brew-app-res [Glenn_Forrester]
vnd.quarantainenet application/vnd.quarantainenet [Casper_Joost_Eyckelhof]
vnd.Quark.QuarkXPress application/vnd.Quark.QuarkXPress [Hannes_Scheidler]
vnd.quobject-quoxdocument application/vnd.quobject-quoxdocument [Matthias_Ludwig]
vnd.radisys.moml+xml application/vnd.radisys.moml+xml [RFC5707]
vnd.radisys.msml-audit-conf+xml application/vnd.radisys.msml-audit-conf+xml [RFC5707]
vnd.radisys.msml-audit-conn+xml application/vnd.radisys.msml-audit-conn+xml [RFC5707]
vnd.radisys.msml-audit-dialog+xml application/vnd.radisys.msml-audit-dialog+xml [RFC5707]
vnd.radisys.msml-audit-stream+xml application/vnd.radisys.msml-audit-stream+xml [RFC5707]
vnd.radisys.msml-audit+xml application/vnd.radisys.msml-audit+xml [RFC5707]
vnd.radisys.msml-conf+xml application/vnd.radisys.msml-conf+xml [RFC5707]
vnd.radisys.msml-dialog-base+xml application/vnd.radisys.msml-dialog-base+xml [RFC5707]
vnd.radisys.msml-dialog-fax-detect+xml application/vnd.radisys.msml-dialog-fax-detect+xml [RFC5707]
vnd.radisys.msml-dialog-fax-sendrecv+xml application/vnd.radisys.msml-dialog-fax-sendrecv+xml [RFC5707]
vnd.radisys.msml-dialog-group+xml application/vnd.radisys.msml-dialog-group+xml [RFC5707]
vnd.radisys.msml-dialog-speech+xml application/vnd.radisys.msml-dialog-speech+xml [RFC5707]
vnd.radisys.msml-dialog-transform+xml application/vnd.radisys.msml-dialog-transform+xml [RFC5707]
vnd.radisys.msml-dialog+xml application/vnd.radisys.msml-dialog+xml [RFC5707]
vnd.radisys.msml+xml application/vnd.radisys.msml+xml [RFC5707]
vnd.rainstor.data application/vnd.rainstor.data [Kevin_Crook]
vnd.rapid application/vnd.rapid [Etay_Szekely]
vnd.rar application/vnd.rar [Kim_Scarborough]
vnd.realvnc.bed application/vnd.realvnc.bed [Nick_Reeves]
vnd.recordare.musicxml application/vnd.recordare.musicxml [W3C_Music_Notation_Community_Group]
vnd.recordare.musicxml+xml application/vnd.recordare.musicxml+xml [W3C_Music_Notation_Community_Group]
vnd.RenLearn.rlprint application/vnd.RenLearn.rlprint [James_Wick]
vnd.restful+json application/vnd.restful+json [Stephen_Mizell]
vnd.rig.cryptonote application/vnd.rig.cryptonote [Ken_Jibiki]
vnd.route66.link66+xml application/vnd.route66.link66+xml [Sybren_Kikstra]
vnd.rs-274x application/vnd.rs-274x [Lee_Harding]
vnd.ruckus.download application/vnd.ruckus.download [Jerry_Harris]
vnd.s3sms application/vnd.s3sms [Lauri_Tarkkala]
vnd.sailingtracker.track application/vnd.sailingtracker.track [Heikki_Vesalainen]
vnd.sar application/vnd.sar [Markus_Strehle]
vnd.sbm.cid application/vnd.sbm.cid [Shinji_Kusakari]
vnd.sbm.mid2 application/vnd.sbm.mid2 [Masanori_Murai]
vnd.scribus application/vnd.scribus [Craig_Bradney]
vnd.sealed.3df application/vnd.sealed.3df [John_Kwan]
vnd.sealed.csf application/vnd.sealed.csf [John_Kwan]
vnd.sealed.doc application/vnd.sealed.doc [David_Petersen]
vnd.sealed.eml application/vnd.sealed.eml [David_Petersen]
vnd.sealed.mht application/vnd.sealed.mht [David_Petersen]
vnd.sealed.net application/vnd.sealed.net [Martin_Lambert]
vnd.sealed.ppt application/vnd.sealed.ppt [David_Petersen]
vnd.sealed.tiff application/vnd.sealed.tiff [John_Kwan][Martin_Lambert]
vnd.sealed.xls application/vnd.sealed.xls [David_Petersen]
vnd.sealedmedia.softseal.html application/vnd.sealedmedia.softseal.html [David_Petersen]
vnd.sealedmedia.softseal.pdf application/vnd.sealedmedia.softseal.pdf [David_Petersen]
vnd.seemail application/vnd.seemail [Steve_Webb]
vnd.seis+json application/vnd.seis+json [ICT_Manager]
vnd.sema application/vnd.sema [Anders_Hansson]
vnd.semd application/vnd.semd [Anders_Hansson]
vnd.semf application/vnd.semf [Anders_Hansson]
vnd.shade-save-file application/vnd.shade-save-file [Connor_Horman]
vnd.shana.informed.formdata application/vnd.shana.informed.formdata [Guy_Selzler]
vnd.shana.informed.formtemplate application/vnd.shana.informed.formtemplate [Guy_Selzler]
vnd.shana.informed.interchange application/vnd.shana.informed.interchange [Guy_Selzler]
vnd.shana.informed.package application/vnd.shana.informed.package [Guy_Selzler]
vnd.shootproof+json application/vnd.shootproof+json [Ben_Ramsey]
vnd.shopkick+json application/vnd.shopkick+json [Ronald_Jacobs]
vnd.shp application/vnd.shp [Mi_Tar]
vnd.shx application/vnd.shx [Mi_Tar]
vnd.sigrok.session application/vnd.sigrok.session [Uwe_Hermann]
vnd.SimTech-MindMapper application/vnd.SimTech-MindMapper [Patrick_Koh]
vnd.siren+json application/vnd.siren+json [Kevin_Swiber]
vnd.smaf application/vnd.smaf [Hiroaki_Takahashi]
vnd.smart.notebook application/vnd.smart.notebook [Jonathan_Neitz]
vnd.smart.teacher application/vnd.smart.teacher [Michael_Boyle]
vnd.snesdev-page-table application/vnd.snesdev-page-table [Connor_Horman]
vnd.software602.filler.form+xml application/vnd.software602.filler.form+xml [Jakub_Hytka][Martin_Vondrous]
vnd.software602.filler.form-xml-zip application/vnd.software602.filler.form-xml-zip [Jakub_Hytka][Martin_Vondrous]
vnd.solent.sdkm+xml application/vnd.solent.sdkm+xml [Cliff_Gauntlett]
vnd.spotfire.dxp application/vnd.spotfire.dxp [Stefan_Jernberg]
vnd.spotfire.sfs application/vnd.spotfire.sfs [Stefan_Jernberg]
vnd.sqlite3 application/vnd.sqlite3 [Clemens_Ladisch]
vnd.sss-cod application/vnd.sss-cod [Asang_Dani]
vnd.sss-dtf application/vnd.sss-dtf [Eric_Bruno]
vnd.sss-ntf application/vnd.sss-ntf [Eric_Bruno]
vnd.stepmania.package application/vnd.stepmania.package [Henrik_Andersson]
vnd.stepmania.stepchart application/vnd.stepmania.stepchart [Henrik_Andersson]
vnd.street-stream application/vnd.street-stream [Glenn_Levitt]
vnd.sun.wadl+xml application/vnd.sun.wadl+xml [Marc_Hadley]
vnd.sus-calendar application/vnd.sus-calendar [Jonathan_Niedfeldt]
vnd.svd application/vnd.svd [Scott_Becker]
vnd.swiftview-ics application/vnd.swiftview-ics [Glenn_Widener]
vnd.sycle+xml application/vnd.sycle+xml [Johann_Terblanche]
vnd.syncml.dm.notification application/vnd.syncml.dm.notification [Peter_Thompson][OMA-DM_Work_Group]
vnd.syncml.dmddf+xml application/vnd.syncml.dmddf+xml [OMA-DM_Work_Group]
vnd.syncml.dmtnds+wbxml application/vnd.syncml.dmtnds+wbxml [OMA-DM_Work_Group]
vnd.syncml.dmtnds+xml application/vnd.syncml.dmtnds+xml [OMA-DM_Work_Group]
vnd.syncml.dmddf+wbxml application/vnd.syncml.dmddf+wbxml [OMA-DM_Work_Group]
vnd.syncml.dm+wbxml application/vnd.syncml.dm+wbxml [OMA-DM_Work_Group]
vnd.syncml.dm+xml application/vnd.syncml.dm+xml [Bindu_Rama_Rao][OMA-DM_Work_Group]
vnd.syncml.ds.notification application/vnd.syncml.ds.notification [OMA_Data_Synchronization_Working_Group]
vnd.syncml+xml application/vnd.syncml+xml [OMA_Data_Synchronization_Working_Group]
vnd.tableschema+json application/vnd.tableschema+json [Paul_Walsh]
vnd.tao.intent-module-archive application/vnd.tao.intent-module-archive [Daniel_Shelton]
vnd.tcpdump.pcap application/vnd.tcpdump.pcap [Guy_Harris][Glen_Turner]
vnd.think-cell.ppttc+json application/vnd.think-cell.ppttc+json [Arno_Schoedl]
vnd.tml application/vnd.tml [Joey_Smith]
vnd.tmd.mediaflex.api+xml application/vnd.tmd.mediaflex.api+xml [Alex_Sibilev]
vnd.tmobile-livetv application/vnd.tmobile-livetv [Nicolas_Helin]
vnd.tri.onesource application/vnd.tri.onesource [Rick_Rupp]
vnd.trid.tpt application/vnd.trid.tpt [Frank_Cusack]
vnd.triscape.mxs application/vnd.triscape.mxs [Steven_Simonoff]
vnd.trueapp application/vnd.trueapp [J._Scott_Hepler]
vnd.truedoc application/vnd.truedoc [Brad_Chase]
vnd.ubisoft.webplayer application/vnd.ubisoft.webplayer [Martin_Talbot]
vnd.ufdl application/vnd.ufdl [Dave_Manning]
vnd.uiq.theme application/vnd.uiq.theme [Tim_Ocock]
vnd.umajin application/vnd.umajin [Jamie_Riden]
vnd.unity application/vnd.unity [Unity3d]
vnd.uoml+xml application/vnd.uoml+xml [Arne_Gerdes]
vnd.uplanet.alert application/vnd.uplanet.alert [Bruce_Martin]
vnd.uplanet.alert-wbxml application/vnd.uplanet.alert-wbxml [Bruce_Martin]
vnd.uplanet.bearer-choice application/vnd.uplanet.bearer-choice [Bruce_Martin]
vnd.uplanet.bearer-choice-wbxml application/vnd.uplanet.bearer-choice-wbxml [Bruce_Martin]
vnd.uplanet.cacheop application/vnd.uplanet.cacheop [Bruce_Martin]
vnd.uplanet.cacheop-wbxml application/vnd.uplanet.cacheop-wbxml [Bruce_Martin]
vnd.uplanet.channel application/vnd.uplanet.channel [Bruce_Martin]
vnd.uplanet.channel-wbxml application/vnd.uplanet.channel-wbxml [Bruce_Martin]
vnd.uplanet.list application/vnd.uplanet.list [Bruce_Martin]
vnd.uplanet.listcmd application/vnd.uplanet.listcmd [Bruce_Martin]
vnd.uplanet.listcmd-wbxml application/vnd.uplanet.listcmd-wbxml [Bruce_Martin]
vnd.uplanet.list-wbxml application/vnd.uplanet.list-wbxml [Bruce_Martin]
vnd.uri-map application/vnd.uri-map [Sebastian_Baer]
vnd.uplanet.signal application/vnd.uplanet.signal [Bruce_Martin]
vnd.valve.source.material application/vnd.valve.source.material [Henrik_Andersson]
vnd.vcx application/vnd.vcx [Taisuke_Sugimoto]
vnd.vd-study application/vnd.vd-study [Luc_Rogge]
vnd.vectorworks application/vnd.vectorworks [Lyndsey_Ferguson][Biplab_Sarkar]
vnd.vel+json application/vnd.vel+json [James_Wigger]
vnd.verimatrix.vcas application/vnd.verimatrix.vcas [Petr_Peterka]
vnd.veryant.thin application/vnd.veryant.thin [Massimo_Bertoli]
vnd.ves.encrypted application/vnd.ves.encrypted [Jim_Zubov]
vnd.vidsoft.vidconference application/vnd.vidsoft.vidconference [Robert_Hess]
vnd.visio application/vnd.visio [Troy_Sandal]
vnd.visionary application/vnd.visionary [Gayatri_Aravindakumar]
vnd.vividence.scriptfile application/vnd.vividence.scriptfile [Mark_Risher]
vnd.vsf application/vnd.vsf [Delton_Rowe]
vnd.wap.sic application/vnd.wap.sic [WAP-Forum]
vnd.wap.slc application/vnd.wap.slc [WAP-Forum]
vnd.wap.wbxml application/vnd.wap.wbxml [Peter_Stark]
vnd.wap.wmlc application/vnd.wap.wmlc [Peter_Stark]
vnd.wap.wmlscriptc application/vnd.wap.wmlscriptc [Peter_Stark]
vnd.webturbo application/vnd.webturbo [Yaser_Rehem]
vnd.wfa.dpp application/vnd.wfa.dpp [Wi-Fi_Alliance][Dr._Jun_Tian]
vnd.wfa.p2p application/vnd.wfa.p2p [Mick_Conley]
vnd.wfa.wsc application/vnd.wfa.wsc [Wi-Fi_Alliance]
vnd.windows.devicepairing application/vnd.windows.devicepairing [Priya_Dandawate]
vnd.wmc application/vnd.wmc [Thomas_Kjornes]
vnd.wmf.bootstrap application/vnd.wmf.bootstrap [Thinh_Nguyenphu][Prakash_Iyer]
vnd.wolfram.mathematica application/vnd.wolfram.mathematica [Wolfram]
vnd.wolfram.mathematica.package application/vnd.wolfram.mathematica.package [Wolfram]
vnd.wolfram.player application/vnd.wolfram.player [Wolfram]
vnd.wordperfect application/vnd.wordperfect [Kim_Scarborough]
vnd.wqd application/vnd.wqd [Jan_Bostrom]
vnd.wrq-hp3000-labelled application/vnd.wrq-hp3000-labelled [Chris_Bartram]
vnd.wt.stf application/vnd.wt.stf [Bill_Wohler]
vnd.wv.csp+xml application/vnd.wv.csp+xml [John_Ingi_Ingimundarson]
vnd.wv.csp+wbxml application/vnd.wv.csp+wbxml [Matti_Salmi]
vnd.wv.ssp+xml application/vnd.wv.ssp+xml [John_Ingi_Ingimundarson]
vnd.xacml+json application/vnd.xacml+json [David_Brossard]
vnd.xara application/vnd.xara [David_Matthewman]
vnd.xfdl application/vnd.xfdl [Dave_Manning]
vnd.xfdl.webform application/vnd.xfdl.webform [Michael_Mansell]
vnd.xmi+xml application/vnd.xmi+xml [Fred_Waskiewicz]
vnd.xmpie.cpkg application/vnd.xmpie.cpkg [Reuven_Sherwin]
vnd.xmpie.dpkg application/vnd.xmpie.dpkg [Reuven_Sherwin]
vnd.xmpie.plan application/vnd.xmpie.plan [Reuven_Sherwin]
vnd.xmpie.ppkg application/vnd.xmpie.ppkg [Reuven_Sherwin]
vnd.xmpie.xlim application/vnd.xmpie.xlim [Reuven_Sherwin]
vnd.yamaha.hv-dic application/vnd.yamaha.hv-dic [Tomohiro_Yamamoto]
vnd.yamaha.hv-script application/vnd.yamaha.hv-script [Tomohiro_Yamamoto]
vnd.yamaha.hv-voice application/vnd.yamaha.hv-voice [Tomohiro_Yamamoto]
vnd.yamaha.openscoreformat.osfpvg+xml application/vnd.yamaha.openscoreformat.osfpvg+xml [Mark_Olleson]
vnd.yamaha.openscoreformat application/vnd.yamaha.openscoreformat [Mark_Olleson]
vnd.yamaha.remote-setup application/vnd.yamaha.remote-setup [Takehiro_Sukizaki]
vnd.yamaha.smaf-audio application/vnd.yamaha.smaf-audio [Keiichi_Shinoda]
vnd.yamaha.smaf-phrase application/vnd.yamaha.smaf-phrase [Keiichi_Shinoda]
vnd.yamaha.through-ngn application/vnd.yamaha.through-ngn [Takehiro_Sukizaki]
vnd.yamaha.tunnel-udpencap application/vnd.yamaha.tunnel-udpencap [Takehiro_Sukizaki]
vnd.yaoweme application/vnd.yaoweme [Jens_Jorgensen]
vnd.yellowriver-custom-menu application/vnd.yellowriver-custom-menu [Mr._Yellow]
vnd.youtube.yt - OBSOLETED in favor of video/vnd.youtube.yt application/vnd.youtube.yt [Laura_Wood]
vnd.zul application/vnd.zul [Rene_Grothmann]
vnd.zzazz.deck+xml application/vnd.zzazz.deck+xml [Micheal_Hewett]
voicexml+xml application/voicexml+xml [RFC4267]
voucher-cms+json application/voucher-cms+json [RFC8366]
vq-rtcpxr application/vq-rtcpxr [RFC6035]
wasm application/wasm [W3C][Eric_Prudhommeaux]
watcherinfo+xml application/watcherinfo+xml [RFC3858]
webpush-options+json application/webpush-options+json [RFC8292]
whoispp-query application/whoispp-query [RFC2957]
whoispp-response application/whoispp-response [RFC2958]
widget application/widget [W3C][Steven_Pemberton][W3C-Widgets-2012]
wita application/wita [Larry_Campbell]
wordperfect5.1 application/wordperfect5.1 [Paul_Lindner]
wsdl+xml application/wsdl+xml [W3C]
wspolicy+xml application/wspolicy+xml [W3C]
x-pki-message application/x-pki-message [RFC8894]
x-www-form-urlencoded application/x-www-form-urlencoded [WHATWG][Anne_van_Kesteren]
x-x509-ca-cert application/x-x509-ca-cert [RFC8894]
x-x509-ca-ra-cert application/x-x509-ca-ra-cert [RFC8894]
x-x509-next-ca-cert application/x-x509-next-ca-cert [RFC8894]
x400-bp application/x400-bp [RFC1494]
xacml+xml application/xacml+xml [RFC7061]
xcap-att+xml application/xcap-att+xml [RFC4825]
xcap-caps+xml application/xcap-caps+xml [RFC4825]
xcap-diff+xml application/xcap-diff+xml [RFC5874]
xcap-el+xml application/xcap-el+xml [RFC4825]
xcap-error+xml application/xcap-error+xml [RFC4825]
xcap-ns+xml application/xcap-ns+xml [RFC4825]
xcon-conference-info-diff+xml application/xcon-conference-info-diff+xml [RFC6502]
xcon-conference-info+xml application/xcon-conference-info+xml [RFC6502]
xenc+xml application/xenc+xml [Joseph_Reagle][XENC_Working_Group]
xhtml+xml application/xhtml+xml [W3C][Robin_Berjon]
xliff+xml application/xliff+xml [OASIS][Chet_Ensign]
xml application/xml [RFC7303]
xml-dtd application/xml-dtd [RFC7303]
xml-external-parsed-entity application/xml-external-parsed-entity [RFC7303]
xml-patch+xml application/xml-patch+xml [RFC7351]
xmpp+xml application/xmpp+xml [RFC3923]
xop+xml application/xop+xml [Mark_Nottingham]
xslt+xml application/xslt+xml [W3C][http://www.w3.org/TR/2007/REC-xslt20-20070123/#media-type-registration]
xv+xml application/xv+xml [RFC4374]
yang application/yang [RFC6020]
yang-data+json application/yang-data+json [RFC8040]
yang-data+xml application/yang-data+xml [RFC8040]
yang-patch+json application/yang-patch+json [RFC8072]
yang-patch+xml application/yang-patch+xml [RFC8072]
yin+xml application/yin+xml [RFC6020]
zip application/zip [Paul_Lindner]
zlib application/zlib [RFC6713]
zstd application/zstd [RFC8878]
## 参考
- http://www.iana.org/assignments/media-types/media-types.xhtml
================================================
FILE: 2.1.7.2 文件上传 showOpenFilePicker.md
================================================
# input 标签，并且 type 类型为 file
```
<input type="file" name="" id="">
有几个属性
accept
如果没有设置的话，任何类型的文件都可以进行上传
可以设置的属性有很多，查看 MDN 文档，这里有常见的 Common MIME types 的属性
user 代表前置摄像头
environment 代表后置摄像头
multiple
这个属性 开启的话，就可以选取多个文件
webkitdirectory
添加了这个属性后，就可以用于选择 文件夹
```
# showOpenFilePicker: 上传选择文件
- pickerOpts
```
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
// create a reference for our file handle
let fileHandle;
async function getFile() {
// open file picker, destructure the one element returned array
[fileHandle] = await window.showOpenFilePicker(pickerOpts);
// run code with our fileHandle
}
```
# showDirectoryPicker： 选择目录
```
```
## 参考
- [mdn](https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker)
- [caniuse](https://caniuse.com/?search=showOpenFilePicker)
================================================
FILE: 2.1.8 innerHTML,innerText,textContent区别.md
================================================
# 2.1.8 innerHTML,innerText,textContent区别
## innerHTML:
- document.documentElement.innerHTML:
- 会把<script>、<style>等标签及内容全部显示
## innerText：
- document.documentElement.innerText
- 只显示内容 ，不会把<script>、<style>等标签及内容显示
- 不会获取display:none 的元素
- 返回值被格式化
- 会触发reflow;
## textContent
- document.documentElement.textContent
- 会把<script>、<style>等标签内的内容全部显示，标签不显示
## outHTML
- 设置获取元素及内容的HTML
## outerText
- 设置获取元素及内容的文本
================================================
FILE: 2.1.9 获取dom中最大的 zindex.md
================================================
# 2.1.9 获取dom中最大的 zindex
```
function getMaxZIndex() {
let arr = [...document.all].map(e => +window.getComputedStyle(e).zIndex || 0);
return arr.length ? Math.max(...arr) : 0;
}
```
================================================
FILE: 2.2.1 重绘和回流.md
================================================
# 2.2.1 重绘和回流
## 重排(回流)何时发生
- 添加或者删除可见的DOM元素
- 元素位置改变
- 元素尺寸改变
- 元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
- 页面渲染初始化（这个无法避免）
- 浏览器窗口尺寸改变
CSS的最终表现分为以下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers
按照中文的意思大致是 查找并计算样式 -> 排布 -> 绘制 -> 组合层
这上面的几个步骤有点类似于上文说到的重排必定导致重绘，而查询属性会强制发生重排。所以上文提到的重排重绘内容可以结合这里进行理解。
由于transform是位于Composite Layers层，而width、left、margin等则是位于Layout层，
在Layout层发生的改变必定导致Paint Setup and Paint -> Composite Layers，所以相对而言使用transform实现的动画效果肯定比left这些更加流畅。
而且就算抛开这一角度，在另一方面浏览器也会针对transform等开启GPU加速。
在 CSS 中，transforms 和 opacity 这两个属性更改不会触发重排与重绘，它们是可以由合成器（composite）单独处理的属性。
## 减少重绘和回流
1.CSS
```
使用transform替代top
使用visibility替换display:none,因为前者只会引起重绘，后者会引发回流（改变了布局）
避免使用table布局，可能很小的一个改动会造成整个table的重新布局
尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围。
避免设置多层内联样式，css选择符从右往左匹配查找，避免节点层级过多。
将动画效果应用到position属性为absolute或者fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流。同时，控制动画速度可以选择requestAnimationFrame。
避免使用css表达式，可能会引发回流。
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change,video,iframe等标签，浏览器会自动将该节点变为图层。
CSS3硬件加速(GPU加速)，使用CSS3硬件加速，可以让transform,opacity,filters这些动画不会引起回流重绘。
```
2.JavaScript
```
避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
```
## 参考
- [前端性能优化 24 条建议（2020）](https://segmentfault.com/a/1190000022205291)
================================================
FILE: 2.2.2 响应式图片 picture 使用.md
================================================
# 2.2.2 响应式图片 picture 使用
```
<picture>
<source media="(min-width: 650px)" srcset="https://static.runoob.com/images/mix/html-css-js.png">
<source media="(min-width: 465px)" srcset="https://static.runoob.com/images/mix/htmlbig.png">
<img src="https://static.runoob.com/images/mix/img_avatar.png" style="width:auto;">
</picture>
```
## 参考
- []()
================================================
FILE: 2.2.3 白屏优化.md
================================================
# 2.2.3 白屏优化
## SSR
## 预渲染
- prerender-spa-plugin
## 骨架屏
- 设计图
- css
- page-skeleton-webpack-plugin
>减少 http 请求，CDN 分发，压缩文件、合理的放置JS代码
## 参考
- [page-skeleton-webpack-plugin](https://github.com/ElemeFE/page-skeleton-webpack-plugin)
================================================
FILE: 2.2.4 document.referrer.md
================================================
# 2.2.4 document.referrer
>返回上一页，在PC端我们可以使用：history.go(-1)或者history.back()，可以正常返回第一层。这样，我们不需要上一页的 url 具体是什么，只要使用 history 一般都没啥问题
>但是在移动端，如果想要返回上一页。比如从A页面跳到B页面，如果B页面想返回A页面，为了防止不会跳错，必须要有一个 < 按钮，给它加 history.go(-1) ，返回上一层。
>那如果我们没有返回上一页的 < 的按钮，在手机上怎么操作才会返回上一页，比如：从微信分享进来的，进入的是微信内页，此时，内页就是第一页，它没有上一页，要怎么返回？
>这时点返回按钮是没有反应的，不是一个好的用户体验
```
javascript 有一个可以获取前一页面的URL地址的方法：document.referrer
document.referrer 的来源
referrer 属性可返回载入当前文档的文档的 URL【摘自W3CSHCOOL】, 如果当前文档不是通过超链接访问的，那么当前文档的URL为NULL，这个属性允许客户端的 javascript 访问 HTTP 头部；
referrer 属性，我们可以从 http 头部获取
document.referrer 的兼容性
document.referrer IE7都支持，它的兼容性比较高，Android 5.0开始支持，iOS都支持，PC端浏览器从IE7就开始支持了，兼容性没有什么大的问题。
但是有个小小的问题，就是 IE 会主动清除 referref 属性。在IE中用javascript做跳转，
比如用window.location.href = “”;
google如果使用document.referrer无法取到浏览器请求的HTTP referrer，因为IE清空了。
而其他主流浏览器Firefox和Chrome都会保留referrer，没办法，只好判断，如果是IE浏览器，就主动给它增加一个 referrer 。
这样的原理就是给IE浏览器的页面偷偷加了个链接，然后自动点这个链接，于是referrer就能保留了
```
## 无法获取 referrer 信息的情况
下面的场景无法获得 referrer 信息，以下前8条属于【张鑫旭】：
```
- 直接在浏览器中输入地址
使用location.reload()刷新（location.href或者location.replace()刷新有信息）
在微信对话框中，点击进入微信自身浏览器
扫码进入微信或QQ的浏览器
直接新窗口打开一个页面
从https的网站直接进入一个http协议的网站（Chrome下亲测）
a标签设置rel="noreferrer"（兼容IE7+）
meta标签来控制不让浏览器发送referer
点击 flash 内部链接
Chrome4.0以下，IE 5.5+以下返回空的字符串
使用 修改 Location 进行页面导航的方法，会导致在IE下丢失 referrer，这可能是IE的一个BUG
跨域
<meta content="never" name="referrer">
```
## 参考
- https://www.cnblogs.com/baiyygynui/p/6426621.html
================================================
FILE: 3.0 css 代码规范.md
================================================
# css代码规范
阮一峰新增 css 教程：https://github.com/wangdoc/css-tutorial/tree/master/docs
* 4 个空格
* 在每个声明的左括号前增加一个空格，声明块的右括号应该另起一行： .selector {
}
* 所有的十六进制值都应该使用小写字母，例如 #fff
* 尽可能使用短的十六进制数值，例如使用 #fff 替代 #ffffff。
* 为选择器中得属性取值添加引号，例如 input[type="text"]
* 不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;
* 相关的属性声明应该以下面的顺序分组处理
- Positioning
- Box model 盒模型
- Typographic 排版
- Visual 外观
```
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
```
* 媒体查询位置 靠近他们相关的规则
* 不要使用 @import : 与 <link> 相比, @import 更慢，需要额外的页面请求，并且可能引发其他的意想不到的问题。
* 前缀属性: 当使用厂商前缀属性时，通过缩进使取值垂直对齐以便多行编辑
```
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
```
* 在一个声明块中只包含一条声明的情况下，为了易读性和快速编辑可以考虑移除其中的换行。所有包含多条声明的声明块应该分为多行。
* 坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值
```
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
```
* Class 命名为全小写，可以使用短划线（不要使用下划线和 camelCase 命名）
* Class 的命名应该尽量短，也要尽量明确,最多三个：.top-title-p
* 以组件为单位组织代码
* 使用一致的空白来分割代码块
* 编辑器配置
-使用 4 个空格的 soft-tabs
- 在保存时删除尾部的空白字符
- 设置文件编码为 UTF-8
- 在文件结尾添加一个空白行
================================================
FILE: 3.0.1 BEM 规范.md
================================================
# BEM 规范
## 参考
- https://en.bem.info/methodology/quick-start/
- http://www.w3cplus.com/blog/tags/325.html
================================================
FILE: 3.0.2 SMACSS 规范.md
================================================
# SMACSS 规范
- 基本(base)： 简单的选择器的基本样式，如 `clearfix` , `reset` 重置默认样式
- 布局（Layout）: 定义顶部栏、侧边栏、正文、页脚等主要部分
- 模块(Module)： 一群元素组成的一个模块，比如说 `header` 和 `sidebar` 等
- 状态（State）: 元素的不同状态。如 `hover` , `focus` ,隐藏、按住等
- 主题(Theme)：更多的样式,颜色、形状、边框、阴影还有其他等等
- 参考: https://smacss.com/book/categorizing
## 参考
- https://smacss.com/book/categorizing
-
================================================
FILE: 3.0.3 通用公共 css.md
================================================
# 公共 css 样式
```
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,
input,
select,
textarea {
margin: 0;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
img,
embed,
iframe,
object,
audio,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
text-align: left;
}
b,
strong {
font-weight: bolder;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
/* 动画 */
@-webkit-keyframes slideUp{
from{
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
}
to{
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
}
@keyframes slideUp{
from{
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
}
to{
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
}
.animate-slide-up{
-webkit-animation:slideUp ease .3s forwards;
animation:slideUp ease .3s forwards;
}
@-webkit-keyframes slideDown{
from{
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
to{
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
}
}
@keyframes slideDown{
from{
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
to{
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
}
}
.animate-slide-down{
-webkit-animation:slideDown ease .3s forwards;
animation:slideDown ease .3s forwards;
}
@-webkit-keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}
@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}
.animate-fade-in{
-webkit-animation:fadeIn ease .3s forwards;
animation:fadeIn ease .3s forwards;
}
@-webkit-keyframes fadeOut{
from{
opacity:1;
}
to{
opacity:0;
}
}
@keyframes fadeOut{
from{
opacity:1;
}
to{
opacity:0;
}
}
.animate-fade-out{
-webkit-animation:fadeOut ease .3s forwards;
animation:fadeOut ease .3s forwards;
}
/* 滚动条 */
::-webkit-scrollbar {
width: 5px;
height: 5px;
-webkit-border-radius: 6px;
border-radius: 6px;
/*background: #e4e7ed;*/
/*background-color: rgba(0, 0, 0, 0.1)*/
}
::-webkit-scrollbar-track {
/*background: #f5f7fa;*/
-webkit-border-radius: 6px;
border-radius: 6px;
}
::-webkit-scrollbar-track-piece {
/*background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;*/
}
::-webkit-scrollbar-thumb {
background: #c0c4cc;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.1)
}
/* 省略号 ...*/
.ellipsis {
display: block;
overfolw: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 控制几行显示,超出显示省略号 */
.line-clam{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
white-space: pre-wrap;
word-break: break-all;
overflow: hidden;
}
/* 上边框(0.5px), 伪元素写法 */
.border-top {
position: relative;
}
.border-top::before {
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 2;
}
/* 下边距(0.5px) ,伪元素 */
.border-bottom {
position: relative;
}
.border-bottom:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 2;
}
/* 左边距(0.5px) ,伪元素 */
.border-left::after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
top: 0;
width: 0px;
border-left: 1px solid #e3e5e9;
color: #e3e5e9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
/* 右边距(0.5px) ,伪元素 */
:after {
content: " ";
position: absolute;
right: 0;
top: 0;
width: 1px;
bottom: 0;
border-right: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
/* 边框 (0.5px) */
.btn:after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 10px;
}
/* 右箭头 > */
:before {
content: " ";
display: inline-block;
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #C8C8CD;
border-style: solid;
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: relative;
top: -2px;
position: absolute;
top: 50%;
right: 15px;
margin-top: -4px;
}
/* 三角线箭头 如 ∧∨,*/
.vue-treeselect__control-arrow-container {
position: relative;
}
.vue-treeselect__control-arrow-container:after, .vue-treeselect__control-arrow-container:before {
border: 6px solid transparent;
border-left: 6px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
margin-left: -6px;
content: ' ';
margin-top: -3px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
.vue-treeselect__control-arrow-container:before {
border-left-color: #c0c4cc;
top: 52%;
}
.vue-treeselect--focused .vue-treeselect__control-arrow-container:after, .vue-treeselect--focused .vue-treeselect__control-arrow-container:before {
margin-top: -6px;
-webkit-transform: rotateZ(-90deg);
-moz-transform: rotateZ(-90deg);
-o-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
.vue-treeselect--focused .vue-treeselect__control-arrow-container:before {
border-left-color: #c0c4cc;
top: 48%;
}
/* 虚线,可控制间隔 */
.dash {
width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;
}
/* 边距 */
.ml-10 {
margin-left: 10px;
}
.mr-10 {
margin-right: 10px;
}
.mb-10 {
margin-bottom: 10px;
}
.mt-10 {
margin-top: 10px;
}
.pl-10 {
padding-left: 10px;
}
.pr-10 {
padding-right: 10px;
}
.pb-10 {
padding-bottom: 10px;
}
.pt-10 {
padding-top: 10px;
}
/* 颜色 */
.text-white {
color: #fff;
}
.text-black {
color: #000;
}
.text-red {
color: #ff0000;
}
.text-green {
color: #00ff00;
}
.text-yellow {
color: #ffff00;
}
.text-blue {
color: #0000ff;
}
.bg-white {
color: #fff;
}
.bg-black {
color: #000;
}
.bg-red {
color: #ff0000;
}
.bg-green {
color: #00ff00;
}
.bg-yellow {
color: #ffff00;
}
.bg-blue {
color: #0000ff;
}
/* 阴影 */
.shadow {
-moz-box-shadow:2px 2px 5px #333333;
-webkit-box-shadow:2px 2px 5px #333333;
box-shadow:2px 2px 5px #333333;
}
/* 圆角 */
.radius-2 {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.radius-4 {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.radius-half {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
```
================================================
FILE: 3.1 渲染树构建、布局及绘制.md
================================================
# 渲染树构建、布局及绘制
>CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。优化上述每一个步骤对实现最佳渲染性能至关重要。
TL;DR
DOM 树与 CSSOM 树合并后形成渲染树。
渲染树只包含渲染网页所需的节点。
布局计算每个对象的精确位置和大小。
最后一步是绘制，使用最终渲染树将像素渲染到屏幕上。
- 第一步是让浏览器将 DOM 和 CSSOM 合并成一个“渲染树”，网罗网页上所有可见的 DOM 内容，以及每个节点的所有 CSSOM 样式信息。
为构建渲染树，浏览器大体上完成了下列工作：
- 1.从 DOM 树的根节点开始遍历每个可见节点。
- 某些节点不可见（例如脚本标记、元标记等），因为它们不会体现在渲染输出中，所以会被忽略。
- 某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略，
例如，上例中的 span 节点---不会出现在渲染树中，---因为有一个显式规则在该节点上设置了“display: none”属性。
- 2.对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们。
- 3.发射可见节点，连同其内容和计算的样式
最终输出的渲染同时包含了屏幕上的所有可见内容及其样式信息。有了渲染树，我们就可以进入“布局”阶段。
“Layout”事件在时间线中捕获渲染树构建以及位置和尺寸计算。
布局完成后，浏览器会立即发出“Paint Setup”和“Paint”事件，将渲染树转换成屏幕上的像素。
## position属性
```
- static： 使用正常的布局行为，即元素在文档常规流中当前的布局位置
- relative: 相对定位; 相对于自身
- absolute: 绝对定位; 相对于第一个父元素
- fixed: 固定定位：相对于屏幕视口 ; **旧版本IE不支持**
- position: -webkit-sticky; 粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位
position: sticky; **兼容性**
```
## position跟display、margin collapse、overflow、float这些特性相互叠加
- 1.'display'、'position' 和 'float' 的相互关系
- 参考： [position跟display、margin collapse、overflow、float](https://www.cnblogs.com/jackyWHJ/p/3756087.html)
## 参考
- [render-tree-construction](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn)
================================================
FILE: 3.1 css到cssom 过程.md
================================================
# 3.1 css--->cssom 过程
>cssom: CSS Object Model
## dom 构建流程
- 1.转换： 浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成各个字符。
- 2.令牌化： 浏览器将字符串转换成 W3C HTML5 标准规定的各种令牌，
例如，“<html>”、“<body>”，以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。
- 3.词法分析： 发出的令牌转换成定义其属性和规则的“对象”。
- 4.DOM 构建： 最后，由于 HTML 标记定义不同标记之间的关系（一些标记包含在其他标记内），
创建的对象链接在一个树数据结构内，此结构也会捕获原始标记中定义的父项-子项关系：
HTML 对象是 body 对象的父项，body 是 paragraph 对象的父项，依此类推。
## cssom
在浏览器构建我们这个简单页面的 DOM 时，在文档的 head 部分遇到了一个 link 标记，该标记引用一个外部 CSS 样式表：style.css。
由于预见到需要利用该资源来渲染页面，它会立即发出对该资源的请求，并返回以下内容：
```
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
```
我们本可以直接在 HTML 标记内声明样式（内联），但让 CSS 独立于 HTML 有利于我们将内容和设计作为独立关注点进行处理：
设计人员负责处理 CSS，开发者侧重于 HTML，等等。
与处理 HTML 时一样，我们需要将收到的 CSS 规则转换成某种浏览器能够理解和处理的东西。
因此，我们会重复 HTML 过程，不过是为 CSS 而不是 HTML：
```
CSSOM 构建步骤:
Bytes ---> characters ---> Tokens ---> Nodes ---> cssom
```
- **CSS 字节转换成字符，接着转换成令牌和节点，最后链接到一个称为“CSS 对象模型”(CSSOM) 的树结构内**：
CSSOM 树:
CSSOM 为何具有树结构？为页面上的任何对象计算最后一组样式时，浏览器都会先从适用于该节点的最通用规则开始（例如，如果该节点是 body 元素的子项，则应用所有 body 样式），然后通过应用更具体的规则（即规则“向下级联”）以递归方式优化计算的样式。
以上面的 CSSOM 树为例进行更具体的阐述。span 标记内包含的任何置于 body 元素内的文本都将具有 16 像素字号，并且颜色为红色 — font-size 指令从 body 向下级联至 span。不过，如果某个 span 标记是某个段落 (p) 标记的子项，则其内容将不会显示。
还请注意，以上树并非完整的 CSSOM 树，它只显示了我们决定在样式表中替换的样式。每个浏览器都提供一组默认样式（也称为“User Agent 样式”），即我们不提供任何自定义样式时所看到的样式，我们的样式只是替换这些默认样式（例如默认 IE 样式）。
要了解 CSS 处理所需的时间，您可以在 DevTools 中记录时间线并寻找“Recalculate Style”事件：与 DOM 解析不同，该时间线不显示单独的“Parse CSS”条目，而是在这一个事件下一同捕获解析和 CSSOM 树构建，以及计算的样式的递归计算。
在 DevTools 中追踪 CSSOM 构建
我们的小样式表需要大约 0.6 毫秒的处理时间，影响页面上的 8 个元素 — 虽然不多，但同样会产生开销。
不过，这 8 个元素从何而来呢？CSSOM 和 DOM 是独立的数据结构！结果证明，浏览器隐藏了一个重要步骤。
DOM 与 CSSOM 关联在一起的渲染树。
## 参考
- [/constructing-the-object-model](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=zh-cn)
================================================
FILE: 3.1.1 两列布局左边定宽，右边自适应.md
================================================
# 两列布局左边定宽，右边自适应。
* 1 采用position：absollute;并设置margin-left的值
```
#left{
position:absolute;
width:300px;
top:0px;
left:0px;
background:#F00;
}
#right{
background:#0FC;
margin-left:300px;
}
<div id="left">左边定宽</div> <div id="right">右边自适应</div>
```
* 2 采用float;并设置overflow:auto;(隐藏溢出的内容)
```
#left {
float: left;
width: 300px;
background-color: blue;
}
#right {
overflow: auto;
background-color: red;
}
<div id="left">左边自适应</div>
<div id="right">右边定宽</div>
```
* 3 左边和右边都用绝对定位
```
div.left{ position: absolute; left: 0;top: 0; width: 200px;height: 400px;background: red; word-break: break-all;}
div.right{position: absolute; left: 200px;top: 0; height: 400px; background: blue; word-break: break-all;}
```
================================================
FILE: 3.1.1.1 左侧自适应,右侧自适应布局.md
================================================
# 左侧自适应,右侧自适应布局
```
<div class="common-wrap__currentTag inline-block">
<a :href="'#/'+tagLibName+'Lib'" class="common-wrap__currentTag__name">全部</a>
<i class="el-icon-arrow-right m-l-8 m-r-8"></i>
<template v-for="(item,index) in currentTagDatas">
<a :href="'#/'+tagLibName+'List?id='+item.id" class="common-wrap__currentTag__name">{{item.name}}</a>
<i class="el-icon-arrow-right m-l-8 m-r-8" v-if="currentTagDatas.length-1 != index"></i>
</template>
</div>
<div class="common-wrap__childTag inline-block">
<template v-for="(item,index) in childTagDatas">
<a href="" class="common-wrap__childTag__name">{{item.name}}</a>
</template>
</div>
.common-wrap__cateTags {
position: relative;
width: 100%;
height: 45px;
margin-bottom: 20px;
border-bottom: 1px solid #EBEEF5;
}
.common-wrap__cateTags .common-wrap__currentTag {
white-space: nowrap;
font-size: 0;
color: #303133;
}
.common-wrap__currentTag .common-wrap__currentTag__name {
font-size: 14px;
color: #303133;
font-weight: 700;
}
.common-wrap__currentTag i {
font-size: 14px;
color: #909399;
}
.common-wrap__cateTags .common-wrap__childTag {
/*max-width: calc(100% - 280px);*/
vertical-align: middle;
margin-left: 6px;
padding-left: 10px;
font-size: 14px;
color: #606266;
border-left: 1px solid #979797;
white-space: nowrap;
overflow: hidden;
/*text-overflow: ellipsis;*/
}
.common-wrap__childTag .common-wrap__childTag__name{
margin-right: 10px;
padding: 2px 5px;
font-size: 14px;
color: #606266;
background: #F0F2F5;
border-radius: 2px;
}
```
## 参考
-
================================================
FILE: 3.1.2 H5 页面在 ios 端滑动不流畅的问题.md
================================================
# H5页面在 ios 端滑动不流畅的问题
IOS系统的惯性滑动效果非常6，但是当我们对div加overflow-y:auto;后是不会出这个效果的，滑动的时候会感觉很生涩。怎么办？
方案一：
在滚动容器内加-webkit-overflow-scrolling: touch
但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有 绝对定位（absolute, fixed） 属性的元素，也会跟着滚动。
方案二：
body {overflow-x: hidden}
即，给 body 元素添加overflow-x：hidden。然后在滚动容器内加overflow-y: auto
================================================
FILE: 3.1.3 移动端 ios scroll 滚动穿透.md
================================================
# ios scroll 滚动穿透
在 ios 微信浏览器或原生浏览器中，主内容容器.content在文档流内，并且overflow-y: scroll。
在其之上有一个 fixed 定位的弹出层.popUp，滚动.popUp到底部，继续滚动会触发底层容器.content开始滚动。
期望结果
滚动弹出层.popUp,底层容器.content不会触发滚动
解决方案:
google搜的方案基本上都不能完全解决问题......
经过各种尝试，下面方法可以达到预期效果：
1） 弹出层显示时，改变容器.content的css属性：overflow-y: hidden；
2） 弹出层消失时，恢复容器.content的css属性：overflow-y: scroll；
================================================
FILE: 3.1.4 安卓浏览器键盘输入改变弹出层的定位.md
================================================
# 安卓浏览器键盘输入改变弹出层的定位
在安卓浏览器中，有一个在页面底部的弹出层表单，样式如下：
```
.popup {
position: absolute;
bottom: 0;
}
```
当在这个弹出层输入内容，键盘自动弹出，弹出层的bottom值会改变成键盘的高度，有可能使输入框超出屏幕的高度。
bug解决:
给弹出层添加一个高度
```
.popup {
position: absolute;
bottom: 0;
max-height: 80%;
}
```
================================================
FILE: 3.1.5 CSS中margin边界叠加问题及解决方案.md
================================================
# CSS中margin边界叠加问题及解决方案
别人的博客说的情况：https://www.cnblogs.com/zhangmingze/articles/4664074.html
- http://www.hujuntao.com/web/css/css-margin-overlap.html
边界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。
```
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
```
补充解决方案：
1.外层padding
2.透明边框border:1px solid transparent;
3.绝对定位postion:absolute:
4.外层DIVoverflow:hidden;
5.内层DIV 加float:left;display:inline;
6.外层DIV有时会用到zoom:1;
7. 设置 display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。
================================================
FILE: 3.1.6 css clip-path 画聊天气泡.md
================================================
# css clip-path
聊天气泡小角实现
可以由两种实现的方式
- canvas，绘制路径，然后再clip图片,本文暂不描述
- 另一种就是利用css3的新属性clip-path属性，绘制出要切割的路径，然后再给clip-path属性赋值,火狐和IE未实现此属性
Can I use: https://caniuse.com/#search=css%20clip
```
/* Keyword values */
clip-path: none;
/* Image values */
clip-path: url(resources.svg#c1);
/* Box values */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
```
## 参考
* https://css-tricks.com/clipping-masking-css/
* MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
* 张鑫旭: http://www.zhangxinxu.com/wordpress/2014/12/css3-svg-clip-path/
================================================
FILE: 3.1.7 css currentColor.md
================================================
# currentColor
阮一峰： https://github.com/wangdoc/css-tutorial/blob/master/docs/color.md
## currentColor
`currentColor`是一个属性值，代表当前元素的`color`属性的值。
```css
.box {
color: red;
border: 1px solid currentColor;
box-shadow: 0 0 2px 2px currentColor;
}
```
上面代码，`border`和`box-shadow`的颜色都与`color`保持一致。这种写法的好处是，如果要修改`color`，只要修改一处就可以了，不用修改三个地方。
`currentColor`的另一个用处，是让衍生类都继承基类的颜色。
```css
.box {
color: red;
}
.box .child-1 {
background: currentColor;
}
.box .child-2 {
color: currentColor;
border 1px solid currentColor;
}
```
伪元素也可以使用`currentColor`。
```css
.box {
color: red;
}
.box:before {
color: currentColor;
border: 1px solid currentColor;
}
```
参考： http://www.qcyoung.com/2016/09/28/%E3%80%90%E8%AF%91%E3%80%91%E4%BD%BF%E7%94%A8%20currentColor%20%E5%B1%9E%E6%80%A7%E5%86%99%E5%87%BA%E6%9B%B4%E5%A5%BD%E7%9A%84%20CSS%20%E4%BB%A3%E7%A0%81/
================================================
FILE: 3.1.8 css flexbox.md
================================================
# flexbox
# 阮一峰
https://github.com/wangdoc/css-tutorial/blob/master/docs/layout/flexbox.md
================================================
FILE: 3.1.8.1 flex-wrap不兼容解决方案.md
================================================
# flex-wrap不兼容解决方案
```
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
```
目前在 `ios 10.2` 以下版本会有问题，不会换行
最后使用 `float` 或者 `display: inline-block` 替代
- 使用 `float`,注意清除浮动, `overflow: hidden;`
- 使用 `display: inline-block` 注意编辑器空白 `font-size: 0;`
## 参考
- [flex-wrap不兼容解决方案](https://github.com/semi-xi/blog/issues/10)
================================================
FILE: 3.1.9 css 属性选择器，伪类，伪元素.md
================================================
# css 属性选择器，伪类，伪元素
* 属性选择器
[id*=content]: * 这里代表属性 id 的属性值包含字符 content 的元素,如：
```
<div id="content"></div>
<div id="content2"></div>
<div id="content3"></div>
```
[id^=content]: * 这里代表属性 id 的属性值开头是字符 content 的元素,如：
[id$=content]: * 这里代表属性 id 的属性值结尾是字符 content 的元素,如：
* 结构性伪类选择器
- 伪元素： first-line,first-letter,before,after
- 伪类：
root: 根元素
not: 排除结构元素下的子元素
empty: 指定元素空白时样式
target: 页面在用户点击超链接，跳转到 target 元素后
，
first-child
last-child
nth-child (odd:奇数，even:偶数)
nth-last-child
nth-of-type (odd:奇数，even:偶数)
only-child ： 父元素只有一个元素
，
* UI 元素状态伪类选择器
- hover
- active
- focus
- enabled
- disabled
- read-only
- read-write
- checked
- ::selection
- default
- valid
- invalid
- indeterminate
- required
- optional
- in-range
- out-of-range
================================================
FILE: 3.2.1. 使用 css3 缩小字体不偏移.md
================================================
# 使用 css3 缩小字体不偏移
通常使用 css3 缩小字体后，文字部分会偏移位置，如，原来左对齐，缩小后发现距离左侧有一段距离，需要设置 transform-origin-x:0
测试使用时对块级元素有效，行内元素无效
```
-webkit-transform-origin-x: 0;
transform: scale(0.5);
-webkit-transform: scale(0.5);
```
================================================
FILE: 3.2.2. css3字体缩放样式-webkit-text-size-adjust的用法.md
================================================
# css3字体缩放样式-webkit-text-size-adjust的用法详解
就是当你放大网页时，一般情况下字体也会随着变大，而设置了以下代码后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了
```
html{-webkit-text-size-adjust: none;}
```
1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的
================================================
FILE: 3.2.3. CSS 变量.md
================================================
# CSS变量
* MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables
* Can I USE: https://caniuse.com/#search=CSS%20Variables
使用自定义属性来设置变量名，并使用特定的 var() 来访问。（比如 color: var(--main-color);）
* 基本用法 Edit
```
声明一个局部变量：
element {
--main-bg-color: brown;
}
使用一个局部变量：
element {
background-color: var(--main-bg-color);
}
------------------------------------------------------
声明一个 全局 CSS 变量：
:root {
--global-color: #666;
--pane-padding: 5px 42px;
}
使用一个 全局 CSS 变量：
.demo{
color: var(--global-color);
}
```
1、CSS颜色属性的设置和表示方法
```
[css] view plain copy
<style type="text/css">
#div{
color: red;/*关键字表示法*/
color: #f00;/*短-16进制表示法*/
color: #ff0000;/*长-16进制表示法*/
color: rgb(255, 0, 0);/*rgb基本表示法*/
color: rgb(100%, 0, 0);/*rgb百分比表示法*/
color: hsl(240, 0%, 50%);/*色彩三属性表示法表示法，下文具体解释hsl含义*/
color: color(#29B4F0 a(50%) contrast(%10) h(10));/*颜色函数表示法，请看下文具体解释*/
}
</style>
```
2、CSS自定义变量
声明语法：--*，如--color-basis: red;
调用语法：var(--color-basis)，如color: var(--color-basis);
位置：可以放在根选择器中，也可以放在常规选择器中
引申：CSS3根选择器，:root选择器匹配文档根元素，在HTML中，根元素始终是html元素，语法如下：
```
:root{
--color-basis: red;//定义一个CSS变量
background: #f00;//设置html元素背景色
}
```
3、CSS颜色函数
```
CSS Color Module Level 4的颜色配置函数有：color()、gray()、hsl()、hwb()等，这些函数浏览器暂时不支持，实际开发需要引入第三方插件（postcss/cssnext）来做预处理。
color-mod()函数详解：
color-mod() = color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast());
调用语法：
#div{background-color:color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast() blend());}
```
第一个参数基准色值，必须设定；
第二个参数及后面的参数为可选参数，这些参数的详细含义如下：
```
a-alpha，透明度，值为百分比；
b-blackness，黑度，值为百分比；
blend，混合度，值为百分比;
contrast，对比度，值为百分比；
h-hue，色相-色彩的第一属性，色彩的相貌区别；0-360deg，0和360是红色，接近120的是绿色，240是蓝色；
l-lightness，明度，亮度-色彩的第二属性，表明色彩的明暗性质； 0%是最暗，50%均值，100%最亮。
s-saturation，纯度，饱和度-色彩的第三属性，表明色彩的鲜灰程度；0%是灰度，100%饱和度最高 ;
shade，暗度，值为百分比；
tint，色调，值为百分比；
w-whiteness，白度，值为百分比；
```
4、综合实例
```
[css] view plain copy
<style type="text/css">
:root{
--color-basis: red;
--mytheme-p-color: var(--color-basis);
}
p{
color:color(var(--mytheme-p-color) a(50%) hue(+30deg));//p元素dom数组集合中，每个元素的hue递增30deg，等同于hue += 30
}
</style>
```
5、扩展
CSS函数：
attr();返回选择元素的属性值
calc();计算CSS属性值
```
linear-gradient();创建一个线性渐变的图像
radial-gradient();用径向渐变创建图像
repeating-linear-gradient();用重复的线性渐变创建图像
repeating-radial-gradient();类似 radial-gradient()，用重复的径向渐变创建图像。
```
6、当前文字颜色属性
如：border: 1px solid currentColor;//currentColor是CSS3的一个变量
================================================
FILE: 3.2.4 安卓 line-height 问题.md
================================================
## 安卓 line-height 问题
```
如果写 height: 15px;
line-height: 15px;
font-size: 13px;
ios 表现正常居中,android 位置偏了
改为 width: 16px;
height: 16px;
line-height: 16px;
,android 正常
说是 font-size 字数大小不要用奇数
有时不行,js 判断 iOS Android
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
```
### 网上说法:
```
仔细观察 这个android上line-height问题的一些看法：
字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。
尽量不要使用rem或者em的单位，除非你能对字号的把握在每个手机上都能达到第1条的要求。
别外，微信小程序上的rpx是动态计算的，可以单独针对这部分使用px。
一般只要不是边框贴着文字，一般都还看得过去，在接受的范围之内。如果是边框贴着文字，就是居中了，也不好看啊。
那么，对于小于12像素的居中或者是对居中要求很是严格的需求，这个问题怎么解决？
把字号内外边距等设置为需求大小的2倍，使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放，
如果是父级自适应高度且可展示多行的，使用transform是有问题的。因为transform缩放是不影响页面布局的。
把字号内外边距等设置为需求大小的2倍，使用zoom进行缩放，可以完美解决。zoom原本只有ie支持，
但现在除了Firefox，都已经支持了。是的，Firefox不支持。
```
================================================
FILE: 3.2.5 css grid.md
================================================
# css grid: CSS 网格布局(Grid Layout)
* caniuse: 浏览器支持的详细数据可在 [Caniuse查看](https://caniuse.com/#feat=css-grid)
display：grid把容器元素定义为一个网格
使用grid-template-columns和grid-template-rows设置列和行大小，
然后使用grid-column 和 grid-row把它的子元素放入网格
#### Grid 属性列表
##### Grid Container 的全部属性
- display
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-template
- grid-column-gap
- grid-row-gap
- grid-gap
- justify-items
- align-items
- justify-content
- align-content
- grid-auto-columns
- grid-auto-rows
- grid-auto-flow
- grid
#### Grid Items 的全部属性
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column
- grid-row
- grid-area
- justify-self
- align-self
### 使用
>父容器(Grid Container)
```
.container {
display: grid | inline-grid | subgrid;
}
注意：column, float, clear, 以及 vertical-align 对一个 grid container 没有影响
```
>grid-template-columns / grid-template-rows
- grid-template-columns: 100px 100px 100px; // 设置的列的个数为 3 ,列的宽度为 100px
- grid-template-rows: 100px 100px 100px; // 设置的列的个数为 3 ,行的宽度为 100px
使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(track size)，它们之间的空格代表表格线(grid line)
```
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
如果你的定义中包含重复的部分，则可以使用repeat() 符号来简化写法：
.container {
grid-template-columns: repeat(3, 20px [col-start]) 5%;
}
fr”单位允许您将轨道大小设置为网格容器自由空间的一部分。 例如，下面的代码会将每个 grid item 为 grid container 宽度的三分之一：
.container {
grid-template-columns: 1fr 1fr 1fr;
}
```
>grid-template-areas
通过引用 grid-area属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称导致内容扩展到这些单元格。 点号表示一个空单元格。 语法本身提供了网格结构的可视化。
```
值：
<grid-area-name> - 使用 grid-area 属性设置的网格区域的名称
. - 点号代表一个空网格单元
none - 没有定义网格区域
举例：
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
这将创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。 最后一行是footer区域组成。
```
>grid-column-gap / grid-row-gap
指定网格线的大小，你可以把它想象为设置列/行之间的间距的宽度。
```
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}
```
>grid-gap
grid-row-gap 和 grid-column-gap 的缩写
```
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-gap: 10px 15px;
}
```
>justify-items
沿着行轴对齐网格内的内容
```
start: 内容与网格区域的左端对齐
end: 内容与网格区域的右端对齐
center: 内容位于网格区域的中间位置
stretch: 内容宽度占据整个网格区域空间(这是默认值)
.container {
justify-items: start;
}
```
>align-items
沿着列轴对齐grid item 里的内容
```
.container {
align-items: start | end | center | stretch;
}
```
>justify-content
设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）
```
start - 网格与网格容器的左边对齐
end - 网格与网格容器的右边对齐
center - 网格与网格容器的中间对齐
stretch - 调整g rid item 的大小，让宽度填充整个网格容器
space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
```
### demo
```
html:
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
css:
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
```
================================================
FILE: 3.2.6 css mask遮罩.md
================================================
# css mask遮罩
兼容性有问题 [---> Can I use](https://caniuse.com/#search=mask)
>偶然看到别人做镂空效果
- [一行代码实现镂空效果](https://juejin.im/post/5bc8184ee51d450e81090d94)
- [demo code](https://codepen.io/HelKyle/pen/yRvRyG/)
```
// 核心代码
img {
mask-image: url();
}
```
## 参考
- [CSS遮罩CSS3 mask/masks详细介绍](https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/)
================================================
FILE: 3.2.7 flex布局当overflow时无法滑动到顶部.md
================================================
# flex布局当overflow时无法滑动到顶部
- [js fiddle demo](https://jsfiddle.net/nickday/b8x75hso/1/)
- 原demo:
```
<style type="text/css">
.fix {
position: fixed;
top: 50%;
left: 50%;
width: 320px;
height: 640px;
transform: translate(-50%,-50%);
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
height: 100%;
overflow-y: auto;
position: relative;
}
img {
width: 100%;
}
</style>
<div class="fix">
<div class="flex">
<img src="https://pic01-10001430.image.myqcloud.com/a7ee5bff-d4a7-4901-96a4-3652814f27d4">
</div>
</div>
```
>Flexbox的对齐是一种“真正”意义上的居中， 这一点和我们使用的其他的CSS居中技术不太一样。
也就是说，即便当子元素超过父元素的边界时，他们在父元素中仍然是居中存在的。
然而这有时候会带来问题，当他们的top超过父元素的top边界，或者其left超过父元素的left边界时（当高度限定，宽度自动延伸时，
left就有可能超过父元素的left边界)，其超过top的部分（或left部分），虽然确实有内容在哪里，实际上却是无法scroll过去的。
>在将来的版本中，flex的对齐属性会加入一个“安全”的选项（使得在这种情境下，top部分不至于被吞没）。
目前，如果这对您是一个担忧的话，您可以通过子元素的auto margins来达到这种安全的布局。
当子元素超过父元素时，他们会使用margin属性，而忽略居中属性。
不同于 justify- 的系列属性，
通过在flex父容器中的第一个和最后一个元素上面设置margin:auto(如果整个容器内只有一个元素，比如本例，则直接设置在该子元素上面)，
当有足够的空间给子元素来进行”flex”布局时，flex的布局会生效；
否则就会切换到一般的布局方式，也就是 margin:auto。
- 修改后 demo:
```
<style type="text/css">
.fix {
position: fixed;
top: 50%;
left: 50%;
width: 320px;
height: 640px;
transform: translate(-50%,-50%);
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
height: 100%;
overflow-y: auto;
position: relative;
}
img {
display: block;
width: 100%;
margin: auto;
}
</style>
```
## 参考
- [flex 布局的基本概念](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
- [flex布局当overflow时无法滑动到顶部](http://codingfishman.github.io/2016/05/21/flex%E5%B8%83%E5%B1%80%E5%BD%93overflow%E6%97%B6%E6%97%A0%E6%B3%95%E6%BB%91%E5%8A%A8%E5%88%B0%E9%A1%B6%E9%83%A8/)
================================================
FILE: 3.2.8 CSS scroll-behavior.md
================================================
# CSS scroll-behavior
>兼容性还有些问题的
scroll-behavior:smooth 写在滚动容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑
凡是需要滚动的地方都加一句`scroll-behavior:smooth `就好了
## 参考
- [CSS scroll-behavior和JS scrollIntoView让页面滚动平滑](https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6%BB%9A%E5%8A%A8/)
================================================
FILE: 3.2.9 一道css题.md
================================================
# 一道css题
>题目要求：
P标签的最大宽度不可以大于H2标签文字宽度的10%
这里应该是P标签的最大宽度由前面的匿名内联元素宽度（就是大字号文字宽度）决定，可参见最后期望效果GIF示意。
H2标签不能失去高度（h2 文字高度+p 标签高度 = h2 标签高度）
```
HTML结构（不允许修改）
<h2>
IPHONE XR<br>
IS THE FUCKING<br>
BEST EVER MADE
<p>iPhone XR has not been authorized as required by the rules of the Federal Communications Commission. iPhone XR is not, and may not be, offered for sale or lease, or sold or leased, until authorization is obtained.</p>
</h2>
基础CSS样式
h2{
font-size: 52px;
font-weight: bold;
color: #000;
}
p{
font-size: 12px;
color: #333;
}
```
- 张鑫旭实现：
```
h2 {
width: min-content;
white-space: nowrap;
}
p {
white-space: normal;
}
```
- 出题人的实现：
```
h2 {
display: table;
}
p {
display: table-caption;
caption-side: bottom;
}
```
## 参考
- [有人考了我一道CSS题目](https://www.zhangxinxu.com/wordpress/2018/10/a-css-%E9%A2%98%E7%9B%AE/)
================================================
FILE: 3.3.1 深入浏览器理解CSS animations 和 transitions的性能问题.md
================================================
# 深入浏览器理解CSS animations 和 transitions的性能问题
## 现代的浏览器通常会有两个重要的执行线程，这2个线程协同工作来渲染一个网页：
- 主线程
- 合成线程
### 一般情况下，主线程负责：
- 使用HTML创建文档对象模型（DOM）
- 使用CSS创建CSS对象模型（CSSOM）
- 基于DOM和CSSOM执行脚本（Scripts）
- 合并DOM和CSSOM形成渲染树（Render Tree）
- 使用渲染树布局（Layout）所有元素
- 将元素绘制（Paint）到一个或多个位图中
- 将这些位图交给合成线程
### 相应地，合成线程负责：
- 通过GPU将位图绘制到屏幕上
- 通知主线程更新页面中可见或即将变成可见的部分的位图
- 计算出页面中哪部分是可见的
- 计算出当你在滚动页面时哪部分是即将变成可见的
- 当你滚动页面时将相应位置的元素移动到可视区域
- 长时间执行JavaScript或渲染一个很大的元素会阻塞主线程，在这期间，它将无法响应用户的交互。
>相反，合成线程则会尽量去响应用户的交互。当一个页面发生变化时，合成线程会以每秒60 帧的间隔去不断重绘这个页面，即使这个页面不完整。
>当用户滚动页面时，合成线程会通知主线程更新页面中最新可见部分的位图。
但是，如果主线程响应地不够快，合成线程不会保持等待，而是马上绘制已经生成的位图，还没准备好的部分用白色进行填充。
### 动画卡顿现象
那么为什么会造成动画卡顿呢？原因就是主线程和合成线程的调度不合理。
### 卡顿说明
在使用height，width，margin，padding作为transition的值时，会造成浏览器主线程的工作量较重，
例如从margin-left：-20px渲染到margin-left:0，主线程需要计算样式margin-left:-19px,margin-left:-18px，一直到margin-left:0，
而且每一次主线程计算样式后，合成进程都需要绘制到GPU然后再渲染到屏幕上，
前后总共进行20次主线程渲染，20次合成线程渲染，20+20次，总计40次计算。
### 主线程每次都需要执行Scripts，Render Tree,Layout和Paint这四个阶段的计算。
- 基于DOM和CSSOM执行脚本（Scripts）
- 合并DOM和CSSOM形成渲染树（Render Tree）
- 使用渲染树布局（Layout）所有元素
- 将元素绘制（Paint）到一个或多个位图中
而如果使用transform的话，例如tranform:translate(-20px,0)到transform:translate(0,0)，
主线程只需要进行一次tranform:translate(-20px,0)到transform:translate(0,0)，
然后合成线程去一次将-20px转换到0px，这样的话，总计1+20计算。
## css3动画卡顿的解决方案：
在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。
transform为我们提供了丰富的api，例如scale，translate，rotate等等，但是在使用时需要考虑兼容性。
但其实对于大多数css3来说，mobile端支持性较好，desktop端支持性需要格外注意。
作者：小小的白菜
链接：https://www.jianshu.com/p/72cca834384e
## 参考
- [深入浏览器理解CSS animations 和 transitions的性能问题](https://sy-tang.github.io/2014/05/14/CSS%20animations%20and%20transitions%20performance-%20looking%20inside%20the%20browser/)
- [CSS3动画卡顿性能优化解决方案](https://segmentfault.com/a/1190000013045035)
================================================
FILE: 3.3.2 CSS Paint API.md
================================================
# CSS Paint API
- [Houdini支持吗？](https://ishoudinireadyyet.com/)
- []()
## 检查CSS对象，实现对JavaScript中Paint Worklet支持情况做一个检测：
```
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('mystuff.js');
}
```
- 而在CSS通过@supports来做相应的检测：
```
@supports (background: paint(id)) {
body {
background-image: paint(checkerboard);
}
}
```
- 原文: https://www.w3cplus.com/css/css-paint-api.html © w3cplus.com
## 参考
- [css-houdini](https://css-houdini.rocks/)
- [css-paint-api](https://www.w3cplus.com/css/css-paint-api.html)
- [CSS Houdini和CSS Paint API](https://www.w3cplus.com/css/say-hello-to-houdini-and-the-css-paint-api.html)
- [github--css-houdini](https://github.com/iamvdo/css-houdini.rocks)
================================================
FILE: 3.3.3 前端性能优化之 预加载 prefetch，Preload.md
================================================
# 前端性能优化之 预加载 prefetch，Preload
>dns-prefetch, subresource, prefetch, preconnect, 和 prerender.
## 1.dns-prefetch
>DNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源，这样浏览器可以尽早的解析DNS。
比如我们需要一个在 example.com 的图片或者视频文件。在<head>就可以这么写：
```
<link rel="dns-prefetch" href="//test.com">
```
[front-end-performance-for-web-designers-and-front-end-developers](https://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/) 中建议：
```
简单的一行就能让支持的浏览器提前解析DNS。也就是说在浏览器请求资源时，DNS查询就已经准备好了。
```
## 2.subresource
>subresource可以用来指定资源是最高优先级的。
Chromium的文档这么解释：
和 "Link rel=prefetch"的语义不同，
"Link rel=subresource"是一种新的连接关系。
rel=prefetch 指定了下载后续页面用到资源的低优先级，
而 rel=subresource 则是指定当前页面资源的提前加载。
所以，如果资源是在当前页面需要，或者马上就会用到，则推荐用 subresource，否则还是用 prefetch。
比如，在 Chrome 和 Opera 中我们可以加上下面的代码：
```
<link rel="subresource" href="base.css">
```
## 3.prefetch
>当能确定网页在未来一定会使用到某个资源时，开发者可以让浏览器提前请求并且缓存好以供后续使用。
prefetch支持预拉取图片、脚本或者任何可以被浏览器缓存的资源。
```
<link rel="prefetch" href="image.png">
```
>不同于DNS prefetch，上面的写法可是会去请求、下载资源并且缓存起来。当然也是有一些发生条件的。
比如，客户端可能会在弱网络下不去请求较大的字体文件，Firefox则只会在浏览器空闲的时候prefetch资源
（注：[这里是MDN上对浏览器空闲的定义和一些FAQ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ)）。
>[Bram Stein在他的文章中指出](http://www.bramstein.com/writing/preload-hints-for-web-fonts.html)，
prefetch很适用于优化 webfonts 的性能。
以前，字体文件必须等 DOM 和 CSSOM 创建好后才能下载，
可如果 prefetch 了字体，这个瓶颈就能轻松解决了。
>注意：prefetch并没有同域的限制
## 4.preconnect
>和DNS prefetch类似，preconnect 不光会解析 DNS，还会建立TCP握手连接和TLS协议（如果需要）。用法如下：
```
<link rel="preconnect" href="http://css-tricks.com">
```
[eliminating-roundtrips-with-preconnect](https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/)篇文章详细说明了这种技术：
>现代浏览器竭尽所能的尝试预测网站可能需要哪些链接。
通过提前连接，浏览器可以提前建立必要的通信，消除了实际请求中DNS、TCP和TLS的耗时。
不过，即使是只能的现代浏览器，也没办法为每个网站可靠的预测所有连接。
幸运的是开发者可以告诉浏览器哪些通信需要在实际请求发起前就提前建立连接。
## 5.prerender
>prerender是一个重量级的选项，它可以让浏览器提前加载指定页面的所有资源。
>Steve Souders的文章详细解释了这个技术：
prerender就像是在后台打开了一个隐藏的tab，会下载所有的资源、创建DOM、渲染页面、执行JS等等。
如果用户进入指定的链接，隐藏的这个页面就会进入马上进入用户的视线。
Google Search多年前就利用了这个特性实现了Instant Pages功能。
```
<link rel="prerender" href="/nextpage.html"/>
```
>但是要注意，一定要在十分确定用户回点某个链接时才用这个特性，否则客户端就会无端的下载很多资源和渲染这个页面。
>正如任何提前的动作一样，预判总是有一定风险出错。
如果提前的动作是昂贵的（比如高CPU、耗电、占用带宽），就要谨慎使用了。
虽然不容易预判用户会点进哪个页面，但还是存在一些典型的场景：
- 如果用户搜索到了一个明显正确的结果时，那么这个页面就很有可能被点入
- 如果用户在登录页面，那么登录成功后的页面就很可能接下来会被加载了
- 如果用户在阅读一个多页面的文章或者有页码的内容时，下一页就很可能会马上被点击了
利用 [Page Visibility API](https://www.w3.org/TR/page-visibility/) 可以用来防止页面在还没真正展示给用户时就触发了JS的执行。
- Page Visibility API demo:
```
var videoElement = document.getElementById("videoElement");
// Autoplay the video if application is visible
if (document.visibilityState == "visible") {
videoElement.play();
}
// Handle page visibility change events
function handleVisibilityChange() {
if (document.visibilityState == "hidden") {
videoElement.pause();
} else {
videoElement.play();
}
}
document.addEventListener('visibilitychange', handleVisibilityChange, false);
```
## 6.Preload
>允许始终预加载某些资源，不像 prefetch 有可能被浏览器忽略，浏览器必须请求 preload 标记的资源。
```
<link rel="preload" href="image.png">
<link rel="preload" href="late_discovered_thing.js" as="script">
```
`as` 属性告诉浏览器 它将要下载什么 . `as` 值包含以下:
```
"script",
"style",
"image",
"media",
and "document".
```
>大部分预加载技术移动端都不支持，PC支持有限；
缺点：可能会造成资源的浪费；
## 参考
- [Preconnect, prerender, prefetch](https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.p19)
- [MDN-/Link_prefetching_FAQ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ)
- [Prebrowsing](http://www.stevesouders.com/blog/2013/11/07/prebrowsing/)
- [preload-what-is-it-good-for](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#top)
- [preload](https://w3c.github.io/preload/)
- [前端性能优化－－预加载技术](https://blog.csdn.net/franktaoge/article/details/51473823)
- [CAN I USE - link-rel-dns-prefetch](https://caniuse.com/#feat=link-rel-dns-prefetch)
- [CAN I USE - link-rel-prefetch](https://caniuse.com/#feat=link-rel-prefetch)
- [CAN I USE - link-rel-preconnect](https://caniuse.com/#feat=link-rel-preconnect)
================================================
FILE: 3.3.4 iPhoneX的适配.md
================================================
# iPhoneX的适配
```
viewport-fit
<!--默认值:可视窗口完全包含网页内容 相当于在安全区域展示-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=auto">
<!--或-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain">
<!--网页内容完全覆盖可视窗口-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
safe-area-inset-*
在设置viewport-fit=cover之后，Web中会新增四个常量
safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom
分别表示safe area和可视窗口viewport顶部，右边，左边，底部的间距，可以用于设置margin和padding或者绝对定位时left和top
注意：在横屏和竖屏状态下，safe-area-inset-*的值不同
为了解决应用viewport-fit=cover之后，有些显示内容被裁剪的问题，我们可以通过添加边距使得网页主要内容处于safe area中不被裁剪，解决方式如下
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
```
## 参考
- [iPhoneX的适配](https://github.com/Wscats/iPhone-X)
================================================
FILE: 3.3.5 CSS Modules (css 模块化).md
================================================
# 3.3.5 CSS Modules (css 模块化)
>一个CSS模块是一个CSS文件,
> 全局污染，命名冲突
## 好处
- 提高代码重用率
- 提高开发效率、减少沟通成本
- 提高页面容错
- 降低耦合
- 降低发布风险
- 减少Bug定位时间和Fix成本
- 更好的实现快速迭代
- 便于代码维护
## 参考
- [css-modules](https://github.com/css-modules/css-modules)
================================================
FILE: 3.3.6 CSS3混合模式mix-blend-mode +background-blend-mode.md
================================================
# CSS3混合模式mix-blend-mode + background-blend-mode
>mix-blend-mode:
```
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //继承
mix-blend-mode: unset; //复原
```
- [caniuse](https://caniuse.com/css-mixblendmode/embed)
## 参考
- [张鑫旭-CSS3混合模式mix-blend-mode/background-blend-mode简介](https://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/)
================================================
FILE: 3.3.7 img loading.md
================================================
# 3.3.7 img loading
>兼容性依然有问题，不过已经有兼容原生的懒加载loading属性的垫片库了
## 使用
```
<img src="./e
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
Condensed preview — 245 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,014K chars).
[
{
"path": "1 移动端 适配.md",
"chars": 2203,
"preview": "# 移动端 适配\n\n**demo : https://github.com/HuJiaoHJ/h5-layout\n\n## vw + rem 方案\n- 1、设置 html font-size 为 10vw\n```\nhtml {\n fon"
},
{
"path": "1.0 web 前端基本素养.md",
"chars": 2359,
"preview": "# web 前端基本素养\n\n---:: You are the owner of your career.\n\n找一些比较准确的，你可以确定它真的足够全面的资料当作线索。 \n对 Web 平台的 API，用反射：\n```\nfor(var p"
},
{
"path": "1.0.0 代码规范.md",
"chars": 1834,
"preview": "# 代码规范\n\n\n## Baidu EFE team\n* [website](http://efe.baidu.com/)\n* [GitHub](https://github.com/ecomfe)\n\n- [Javascript编码规范]("
},
{
"path": "1.1. 解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10.md",
"chars": 456,
"preview": "# 解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10\n\n* http://www.cnblogs.com/mfc-itblog/p/5949251.html\n\n\n```\n2. Google Chrome Frame也可以让IE"
},
{
"path": "1.1.0 统一代码风格---.editorconfig.md",
"chars": 1204,
"preview": "# .editorconfig\n\n## 1.了解\n\n- 【通配符】\n\n ```\n * 匹配除/之外的任意字符串\n ** 匹配任意字符串\n ? 匹"
},
{
"path": "1.1.1 忽略提交文件---.gitignore.md",
"chars": 233,
"preview": "# .gitignore\n\n\n```\n.DS_Store\nnode_modules/\ndist/\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories an"
},
{
"path": "1.1.2 语法检查---ESLint.md",
"chars": 9171,
"preview": "# ESLint\n\n\n```\nnpm i eslint -g\n\neslint --init\n\neslint 会创建一个 .eslintrc.json 的配置文件，同时自动安装并添加相关的模块到 devDependencies。\n\n这里我们使"
},
{
"path": "1.1.3 前端小团队建设.md",
"chars": 271,
"preview": "# 前端小团队建设\n\n\n## 参考\n- [一些规范](https://mp.weixin.qq.com/s?__biz=MjM5NTEwMTAwNg==&mid=2650215305&idx=1&sn=c05c83f51813919c6ae"
},
{
"path": "1.1.4 提问的智慧.md",
"chars": 125,
"preview": "# 提问的智慧\n\n## 参考\n- [issue: 提问的智慧](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN"
},
{
"path": "2.0 html 代码规范.md",
"chars": 878,
"preview": "# html代码规范\n\n* 缩进 以前说使用 **2** 个空格，现在一般使用 **4** 个空格；\n* 在属性上，使用双引号 **“”**，不要使用单引号 **‘’**；\n* 标签正确关闭；\n* 在自动闭合标签结尾处使用斜线；\n* 头部要"
},
{
"path": "2.1 TCP连接复用.md",
"chars": 845,
"preview": "# TCP连接复用\n\n>1. 负载均衡技术简介\n现代企业信息化应用越来越多的采用B/S应用架构来承载企业的关键业务，因此，确保这些任务的可靠运行就变得日益重要。 \n随着越来越多的企业实施数据集中，应用的扩展性、安全性和可靠性也越来越受到企"
},
{
"path": "2.1 http 协议.md",
"chars": 2183,
"preview": "# http 协议\n Hyper Text Transfer Protocol（超文本传输协议）\n \n HTTP是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP是一个无状态的协议。\n \n \n\n* http"
},
{
"path": "2.1 http2.0 详解.md",
"chars": 556,
"preview": "# 2.1 http2.0 详解\n\n- 新的二进制格式（Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合"
},
{
"path": "2.1 https 协议全记录.md",
"chars": 5348,
"preview": "# 2.1 https 协议全记录\n\n>HTTPS全称Hyper Text Transfer Protocol over Secure Socket Layer， \n直译过来就是通过SSL实现的超文本传输协议，简单来讲就是加密版的HTTP"
},
{
"path": "2.1.0 HTML 全局属性.md",
"chars": 2748,
"preview": "# HTML 全局属性\n\n\n## 1、accesskey\n\n规定激活元素的快捷键\n```\n<a href=\"http://www.w3school.com.cn/html/\" accesskey=\"h\">HTML</a><br />\n<a "
},
{
"path": "2.1.1 从输入URL到页面加载发生了什么.md",
"chars": 1698,
"preview": "# 从输入URL到页面加载发生了什么\n\n* segmentdefault: [从输入URL到页面加载发生了什么](https://segmentfault.com/a/1190000006879700)\n\n\n```\n总体来说分为以下几个过程"
},
{
"path": "2.1.2 把一个简单的div元素的属性都打印出来.md",
"chars": 3041,
"preview": "# 把一个简单的div元素的属性都打印出来\n\n```\nvar docu = document.createElement('div')\nvar str = '';\nfor(var key in docu){\n\tstr += key+'';\n"
},
{
"path": "2.1.3 html中的b和strong标签有什么区别.md",
"chars": 1138,
"preview": "# html中的`<b>`和`<strong>`有什么区别\n\n两者虽然在网页中显示效果一样，但实际目的不同。\n\n\n\n`<b>`这个标签对应 `bold`，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式／风格需求；\n\n\n`<strong"
},
{
"path": "2.1.4 img标签的方方面面.md",
"chars": 1001,
"preview": "# IMG>标签的方方面面\n\n\n## 问题1：如果在一个页面上插入<img>标签，有哪些属性是必需的？\n\n答案是src和alt。\n\n\n## 问题2：<img>标签在HTML和XHTML中有什么区别？\n\n在 HTML 中，<img> 标签没有"
},
{
"path": "2.1.5 前端 performance.md",
"chars": 3891,
"preview": "# performance\n\n>Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能，包括 Navigation Timing API和高分辨率时间数据。\n\n- [caniuse](https://ca"
},
{
"path": "2.1.6 HTTP URL最大长度.md",
"chars": 858,
"preview": "# 2.1.6 HTTP URL最大长度\n\n>HTTP RFC2616协议没有规定URL的最大长度，但规定服务器如果不能处理太长的URL，就得返回414状态码（Request-URI Too Long）。\n\n>HTTP RFC2616协议指"
},
{
"path": "2.1.7 文件上传中的content-type.md",
"chars": 470,
"preview": "# 2.1.7 文件上传中的content-type\n\n\n## application/x-www-form-urlencoded\n\n>在最开始的请求方式中，请求参数都是放在url中，表单提交的时候，都是以key=&value=的方式写在u"
},
{
"path": "2.1.7.1 文件上传 Media Types.md",
"chars": 101940,
"preview": "# 2.1.7.1 文件上传 Media Types\n\n1d-interleaved-parityfec\tapplication/1d-interleaved-parityfec\t[RFC6015]\n3gpdash-qoe-report+x"
},
{
"path": "2.1.7.2 文件上传 showOpenFilePicker.md",
"chars": 984,
"preview": "\n # input 标签，并且 type 类型为 file\n \n ```\n <input type=\"file\" name=\"\" id=\"\">\n\n\n有几个属性\n\n\naccept\n如果没有设置的话，任何类型的文件都可以进行上传\n\n可以设"
},
{
"path": "2.1.8 innerHTML,innerText,textContent区别.md",
"chars": 423,
"preview": "# 2.1.8 innerHTML,innerText,textContent区别\n\n## innerHTML:\n- document.documentElement.innerHTML:\n- 会把<script>、<style>等标签及内"
},
{
"path": "2.1.9 获取dom中最大的 zindex.md",
"chars": 188,
"preview": "# 2.1.9 获取dom中最大的 zindex\n\n\n```\nfunction getMaxZIndex() {\n let arr = [...document.all].map(e => +window.getComputedStyle"
},
{
"path": "2.2.1 重绘和回流.md",
"chars": 1420,
"preview": "# 2.2.1 重绘和回流\n\n## 重排(回流)何时发生\n- 添加或者删除可见的DOM元素\n- 元素位置改变\n- 元素尺寸改变\n- 元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）\n- 页面渲染初始化（这个无法避免）\n- 浏览器窗口"
},
{
"path": "2.2.2 响应式图片 picture 使用.md",
"chars": 353,
"preview": "# 2.2.2 响应式图片 picture 使用\n\n\n```\n<picture>\n <source media=\"(min-width: 650px)\" srcset=\"https://static.runoob.com/images/m"
},
{
"path": "2.2.3 白屏优化.md",
"chars": 248,
"preview": "# 2.2.3 白屏优化\n\n\n\n\n## SSR\n\n\n## 预渲染\n\n- prerender-spa-plugin\n\n\n## 骨架屏\n\n- 设计图\n- css\n- page-skeleton-webpack-plugin\n\n\n\n\n>减少 ht"
},
{
"path": "2.2.4 document.referrer.md",
"chars": 1420,
"preview": "# 2.2.4 document.referrer\n\n>返回上一页，在PC端我们可以使用：history.go(-1)或者history.back()，可以正常返回第一层。这样，我们不需要上一页的 url 具体是什么，只要使用 histor"
},
{
"path": "3.0 css 代码规范.md",
"chars": 1634,
"preview": "# css代码规范\n\n阮一峰新增 css 教程：https://github.com/wangdoc/css-tutorial/tree/master/docs\n\n* 4 个空格\n* 在每个声明的左括号前增加一个空格，声明块的右括号应该另起"
},
{
"path": "3.0.1 BEM 规范.md",
"chars": 111,
"preview": "# BEM 规范\n\n\n\n\n\n## 参考\n- https://en.bem.info/methodology/quick-start/\n- http://www.w3cplus.com/blog/tags/325.html\n"
},
{
"path": "3.0.2 SMACSS 规范.md",
"chars": 345,
"preview": "# SMACSS 规范\n\n - 基本(base)： 简单的选择器的基本样式，如 `clearfix` , `reset` 重置默认样式\n - 布局（Layout）: 定义顶部栏、侧边栏、正文、页脚等主要部分\n - 模块(Module)"
},
{
"path": "3.0.3 通用公共 css.md",
"chars": 9118,
"preview": "# 公共 css 样式\n\n```\nhtml,\nbody,\np,\nol,\nul,\nli,\ndl,\ndt,\ndd,\nblockquote,\nfigure,\nfieldset,\nlegend,\ntextarea,\npre,\niframe,\nhr,"
},
{
"path": "3.1 渲染树构建、布局及绘制.md",
"chars": 1350,
"preview": "\n# 渲染树构建、布局及绘制\n\n>CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。优化上述每一个步骤对实现最佳渲染性能至关重要。\n\nTL;DR\n\nDOM 树与 CSSOM 树合"
},
{
"path": "3.1 css到cssom 过程.md",
"chars": 1997,
"preview": "# 3.1 css--->cssom 过程\n\n>cssom: CSS Object Model\n\n\n## dom 构建流程\n\n- 1.转换： 浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成"
},
{
"path": "3.1.1 两列布局左边定宽，右边自适应.md",
"chars": 760,
"preview": "# 两列布局左边定宽，右边自适应。\n\n* 1 采用position：absollute;并设置margin-left的值\n\n```\n#left{\n position:absolute;\n width:300px;\n top"
},
{
"path": "3.1.1.1 左侧自适应,右侧自适应布局.md",
"chars": 1649,
"preview": "# 左侧自适应,右侧自适应布局\n\n```\n<div class=\"common-wrap__currentTag inline-block\">\n <a :href=\"'#/'+tagLibName+'Lib'\" class=\"co"
},
{
"path": "3.1.2 H5 页面在 ios 端滑动不流畅的问题.md",
"chars": 312,
"preview": "# H5页面在 ios 端滑动不流畅的问题\n\nIOS系统的惯性滑动效果非常6，但是当我们对div加overflow-y:auto;后是不会出这个效果的，滑动的时候会感觉很生涩。怎么办？\n\n方案一：\n\n在滚动容器内加-webkit-overf"
},
{
"path": "3.1.3 移动端 ios scroll 滚动穿透.md",
"chars": 346,
"preview": "# ios scroll 滚动穿透\n\n在 ios 微信浏览器或原生浏览器中，主内容容器.content在文档流内，并且overflow-y: scroll。\n\n在其之上有一个 fixed 定位的弹出层.popUp，滚动.popUp到底部，继"
},
{
"path": "3.1.4 安卓浏览器键盘输入改变弹出层的定位.md",
"chars": 266,
"preview": "# 安卓浏览器键盘输入改变弹出层的定位\n\n在安卓浏览器中，有一个在页面底部的弹出层表单，样式如下：\n\n```\n.popup {\n\n position: absolute;\n bottom: 0;\n}\n```\n当在这个弹出层输入内"
},
{
"path": "3.1.5 CSS中margin边界叠加问题及解决方案.md",
"chars": 580,
"preview": "# CSS中margin边界叠加问题及解决方案\n\n\n别人的博客说的情况：https://www.cnblogs.com/zhangmingze/articles/4664074.html\n- http://www.hujuntao.com/"
},
{
"path": "3.1.6 css clip-path 画聊天气泡.md",
"chars": 978,
"preview": "# css clip-path\n\n聊天气泡小角实现 \n可以由两种实现的方式 \n\n- canvas，绘制路径，然后再clip图片,本文暂不描述\n- 另一种就是利用css3的新属性clip-path属性，绘制出要切割的路径，然后再给clip"
},
{
"path": "3.1.7 css currentColor.md",
"chars": 876,
"preview": "# currentColor\n\n阮一峰： https://github.com/wangdoc/css-tutorial/blob/master/docs/color.md\n\n## currentColor\n\n`currentColor`是"
},
{
"path": "3.1.8 css flexbox.md",
"chars": 94,
"preview": "# flexbox\n\n# 阮一峰\n\nhttps://github.com/wangdoc/css-tutorial/blob/master/docs/layout/flexbox.md\n\n"
},
{
"path": "3.1.8.1 flex-wrap不兼容解决方案.md",
"chars": 374,
"preview": "# flex-wrap不兼容解决方案\n\n```\n-webkit-flex-wrap: wrap;\n-moz-flex-wrap: wrap;\n-ms-flex-wrap: wrap;\n-o-flex-wrap: wrap;\nflex-wra"
},
{
"path": "3.1.9 css 属性选择器，伪类，伪元素.md",
"chars": 903,
"preview": "# css 属性选择器，伪类，伪元素\n\n\n* 属性选择器\n\n [id*=content]: * 这里代表属性 id 的属性值包含字符 content 的元素,如：\n ```\n <div id=\"content\"></div>\n "
},
{
"path": "3.2.1. 使用 css3 缩小字体不偏移.md",
"chars": 226,
"preview": "# 使用 css3 缩小字体不偏移\n\n通常使用 css3 缩小字体后，文字部分会偏移位置，如，原来左对齐，缩小后发现距离左侧有一段距离，需要设置 transform-origin-x:0\n\n测试使用时对块级元素有效，行内元素无效\n\n```\n"
},
{
"path": "3.2.2. css3字体缩放样式-webkit-text-size-adjust的用法.md",
"chars": 356,
"preview": "# css3字体缩放样式-webkit-text-size-adjust的用法详解\n\n就是当你放大网页时，一般情况下字体也会随着变大，而设置了以下代码后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了\n\n```\nhtml{-we"
},
{
"path": "3.2.3. CSS 变量.md",
"chars": 2622,
"preview": "# CSS变量\n\n* MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables\n* Can I USE: https://caniuse.com/#s"
},
{
"path": "3.2.4 安卓 line-height 问题.md",
"chars": 934,
"preview": "## 安卓 line-height 问题\n\n```\n 如果写 height: 15px;\n line-height: 15px;\n font-size: 13px;\n \n ios 表现正常居中"
},
{
"path": "3.2.5 css grid.md",
"chars": 3699,
"preview": "# css grid: CSS 网格布局(Grid Layout)\n\n* caniuse: 浏览器支持的详细数据可在 [Caniuse查看](https://caniuse.com/#feat=css-grid)\n\ndisplay：grid"
},
{
"path": "3.2.6 css mask遮罩.md",
"chars": 356,
"preview": "# css mask遮罩\n\n兼容性有问题 [---> Can I use](https://caniuse.com/#search=mask)\n\n>偶然看到别人做镂空效果\n\n- [一行代码实现镂空效果](https://juejin.im/"
},
{
"path": "3.2.7 flex布局当overflow时无法滑动到顶部.md",
"chars": 2330,
"preview": "# flex布局当overflow时无法滑动到顶部\n\n- [js fiddle demo](https://jsfiddle.net/nickday/b8x75hso/1/)\n\n\n- 原demo: \n```\n<style type=\"tex"
},
{
"path": "3.2.8 CSS scroll-behavior.md",
"chars": 307,
"preview": "# CSS scroll-behavior\n\n>兼容性还有些问题的\n\nscroll-behavior:smooth 写在滚动容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑\n\n凡是需要滚动的地方都加一句`scroll-behavior"
},
{
"path": "3.2.9 一道css题.md",
"chars": 876,
"preview": "# 一道css题\n\n>题目要求： \nP标签的最大宽度不可以大于H2标签文字宽度的10% \n这里应该是P标签的最大宽度由前面的匿名内联元素宽度（就是大字号文字宽度）决定，可参见最后期望效果GIF示意。 \nH2标签不能失去高度（h2 文字"
},
{
"path": "3.3.1 深入浏览器理解CSS animations 和 transitions的性能问题.md",
"chars": 1794,
"preview": "# 深入浏览器理解CSS animations 和 transitions的性能问题\n\n## 现代的浏览器通常会有两个重要的执行线程，这2个线程协同工作来渲染一个网页：\n\n- 主线程\n- 合成线程\n\n### 一般情况下，主线程负责：\n\n- "
},
{
"path": "3.3.2 CSS Paint API.md",
"chars": 707,
"preview": "# CSS Paint API\n\n- [Houdini支持吗？](https://ishoudinireadyyet.com/)\n- []()\n\n\n## 检查CSS对象，实现对JavaScript中Paint Worklet支持情况做一个检"
},
{
"path": "3.3.3 前端性能优化之 预加载 prefetch，Preload.md",
"chars": 4128,
"preview": "# 前端性能优化之 预加载 prefetch，Preload\n>dns-prefetch, subresource, prefetch, preconnect, 和 prerender.\n\n## 1.dns-prefetch\n>DNS pr"
},
{
"path": "3.3.4 iPhoneX的适配.md",
"chars": 908,
"preview": "# iPhoneX的适配\n\n```\nviewport-fit\n<!--默认值:可视窗口完全包含网页内容 相当于在安全区域展示-->\n<meta name=\"viewport\" content=\"width=device-width, ini"
},
{
"path": "3.3.5 CSS Modules (css 模块化).md",
"chars": 228,
"preview": "# 3.3.5 CSS Modules (css 模块化)\n\n>一个CSS模块是一个CSS文件,\n\n\n> 全局污染，命名冲突\n\n## 好处\n- 提高代码重用率\n- 提高开发效率、减少沟通成本\n- 提高页面容错\n- 降低耦合\n- 降低发布风险"
},
{
"path": "3.3.6 CSS3混合模式mix-blend-mode +background-blend-mode.md",
"chars": 1014,
"preview": "# CSS3混合模式mix-blend-mode + background-blend-mode\n\n>mix-blend-mode: \n```\nmix-blend-mode: normal; //正常\nmix-blend-"
},
{
"path": "3.3.7 img loading.md",
"chars": 447,
"preview": "# 3.3.7 img loading\n\n>兼容性依然有问题，不过已经有兼容原生的懒加载loading属性的垫片库了\n\n\n## 使用\n\n```\n<img src=\"./example.jpg\" loading=\"lazy\" alt=\"laz"
},
{
"path": "3.3.8 CSS Paint API.md",
"chars": 745,
"preview": "# 3.3.8 CSS Paint API\n\n\n\nCSS Paint API可以让Canvas画布作为普通元素的background-image背景图片呈现，其作为一个CSS属性值，渲染是实时的，\n\n因此可以以一种更高效的方式丰富web页面"
},
{
"path": "3.3.9 打印 用到 color-adjust.md",
"chars": 290,
"preview": "# 3.3.9 打印 用到 color-adjust\n\n\n```\ncolor-adjust: economy; /* 经济，省钱 */\ncolor-adjust: exact; /* 精确 */\n```\n\n\n>打印的时候，为了省墨水，默认"
},
{
"path": "3.4.0 scroll-snap 滚动容器中的一个临时点.md",
"chars": 553,
"preview": "# 3.4.0 scroll-snap 滚动容器中的一个临时点.md\n\n\n>可以让网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置\n\n```\n/* 关键值 */\nscroll-snap-type: none;\nscroll-snap"
},
{
"path": "3.4.1 margin-inline和margin-block.md",
"chars": 574,
"preview": ">CSS逻辑属性往往配合direction属性或者`writing-mode`使用\n\n# margin-inline\n\n>是`margin-inline-start`和`margin-inline-end`的缩写 \n默认情况下，`marg"
},
{
"path": "3.4.2 font-feature-settings.md",
"chars": 583,
"preview": "# font-feature-settings \n\n\n>CSS属性可让您控制OpenType字体中的高级印刷功能\n\n```\n/* 默认设置 */\nfont-feature-settings: normal;\n\n/* 设置OpenType功能"
},
{
"path": "3.4.3 CSS 伪元素 ::backdrop.md",
"chars": 246,
"preview": "# 3.4.3 CSS 伪元素 ::backdrop\n\n\n>`::backdrop CSS` 伪元素 是在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）。\n\n```\ndialog::backdrop {"
},
{
"path": "3.4.4 :placeholder-shown伪类.md",
"chars": 720,
"preview": "# 3.4.4 :placeholder-shown伪类\n\n>:placeholder-shown CSS 伪类 在 `<input>` 或 `<textarea>` 元素显示 placeholder text 时生效.\n\n```\n<div"
},
{
"path": "3.4.5 focus-within伪类.md",
"chars": 305,
"preview": "# 3.4.5 focus-within伪类\n\n\n\n> :focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。 \n换句话说，元素自身或者它的某个后代匹配:focus伪类。（在shadow t"
},
{
"path": "3.4.6 box-decoration-break.md",
"chars": 855,
"preview": "# 3.4.6 box-decoration-break\n\n>指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现\n\n```\n/* Keyword values */\nbox-decoration-break: slice;\nbox-"
},
{
"path": "3.4.7 :focus-visible伪类.md",
"chars": 279,
"preview": "# 3.4.7 :focus-visible伪类\n\n\n```\n通过下面CSS代码可以实现点击无轮廓，键盘访问有轮廓：\n\n:focus:not(:focus-visible) {\n outline: 0;\n}\n```\n\n>请注意Fire"
},
{
"path": "3.4.8 backdrop-filter.md",
"chars": 1329,
"preview": "# backdrop-filter\n\n\n>backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 \n因为它适用于 **元素背后的所有元素**，为了看到效果，必须使元素或其背景至少部分透明。\n"
},
{
"path": "3.4.9 image-set 不同屏幕显示不同图片.md",
"chars": 265,
"preview": "# 3.4.9 image-set 不同屏幕显示不同图片\n\n\n```\nbackground-image: image-set( \"cat.png\" 1x,\n \"cat-2x.png\""
},
{
"path": "3.5.1 @supports使用.md",
"chars": 1582,
"preview": "# 3.5.1 @supports使用\n\n\n第一步：设置网页在可视窗口的布局方式\n\n`ios11`新增 `viweport-fit` 属性，使得页面内容完全覆盖整个窗口：\n\n```\n<meta name=\"viewport\" content"
},
{
"path": "3.5.2 overflow-y:auto 没超高度也出现了滚动条.md",
"chars": 399,
"preview": "# 3.5.2 overflow-y:auto 没超高度也出现了滚动条\n\n\n```\n<ul class=\"clerk-list-ul\">\n <li class=\"clerk-cell\"></li>\n <li class=\"clerk-c"
},
{
"path": "3.5.3 :root 使用.md",
"chars": 365,
"preview": "# 3.5.3 :root 使用\n\n```\n:root {\n --blue: #007bff;\n --indigo: #6610f2;\n --purple: #6f42c1;\n --pink: #e83e8c;\n "
},
{
"path": "3.5.4 新的 CSS 长宽比属性aspect-ratio.md",
"chars": 636,
"preview": "# 3.5.4 新的 CSS 长宽比属性aspect-ratio\n\n\n```\n.container {\n width: 100%;\n aspect-ratio: 16 / 9;\n}\n\n\n.sponsor img {\n aspect-r"
},
{
"path": "3.5.5 css 循环放大缩小波纹.md",
"chars": 2214,
"preview": "# 3.5.5 css 循环放大缩小波纹\n\n\n## demo\n\n```\n\n<style>\nbody {background-color: #000;}\n\n.ripple {\n margin: auto;\n margin-top: 5re"
},
{
"path": "3.5.6 css 获取前三个元素 nth-child.md",
"chars": 96,
"preview": "# 3.5.6 css 获取前三个元素 nth-child\n\n\n```\n.van-picker-column:nth-child(-n+3) {\n display: none;\n}\n```\n"
},
{
"path": "3.5.7 图片加载失败处理.md",
"chars": 2860,
"preview": "# 3.5.7 图片加载失败处理\n\n>利用图片加载失败，触发 `<img>` 元素的 onerror 事件，给加载失败的 `<img>` 元素新增一个样式类 \n利用新增的样式类，配合 `<img>` 元素的伪元素，展示默认兜底图的同时，还"
},
{
"path": "3.5.8 object-fit.md",
"chars": 616,
"preview": "# 3.5.8 object-fit\n\n>object-fit 还有一个配套属性 object-position，它可以控制图片在其内容框中的位置。（类似于 background-position）， \n>m默认是 object-posi"
},
{
"path": "3.5.9 scrollbar-gutter.md",
"chars": 1979,
"preview": "# 3.5.9 scrollbar-gutter\n \n \n## scrollbar-color 和 scrollbar-width\n>这两个 CSS 属性只有 Firefox 浏览器支持\n \n ```\n 其中 scrollbar-color"
},
{
"path": "3.6.0. place-items.md",
"chars": 892,
"preview": "# 3.6.0. place-items\n\n>CSS 中的 place-items 是一个简写属性 ，\n它允许你在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 (例如：align-items 和 jus"
},
{
"path": "4.0 javascript 代码规范.md",
"chars": 97,
"preview": "# javascript 代码规范\n\n\n\n## 参考\n- Airbnb JavaScript Style Guide: https://github.com/airbnb/javascript\n"
},
{
"path": "4.0.1 JavaScript 开发者应懂的 33 个概念.md",
"chars": 31542,
"preview": "# JavaScript 开发者应懂的 33 个概念\n\n\n- [1.调用堆栈](#1调用堆栈)\n- [2.原始类型](#2原始类型)\n- [3.值类型和引用类型](#3值类型和引用类型)\n- [4.隐式, 显式, 名义和鸭子类型](#4隐式"
},
{
"path": "4.0.2 js 严格模式 'use strict'.md",
"chars": 867,
"preview": "# js 严格模式 'use strict'\n\n- 设立\"严格模式\"的目的，主要有以下几个：\n - 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;\n - 消除代码运行的一些不安全之处，保证代码运行的安全"
},
{
"path": "4.0.3 JavaScript 执行机制+运行原理.md",
"chars": 2527,
"preview": "# JavaScript 执行机制\n\n>Event Loop是javascript的执行机制 \nJS的执行机制就是一个主线程 + 一个任务队列\n\n**事件循环流程讲的通俗易懂，对代码的执行顺序有了透彻的理解**\n\n除了广义的同步任务和异步"
},
{
"path": "4.0.4 session 、cookie、token的区别及联系.md",
"chars": 852,
"preview": "# session 、cookie、token的区别及联系\n\n## session\n> session机制采用的是一种在服务器端保持状态的解决方案。 \n由于采用服务器端保持状态的方案在客户端也需要保存一个标识， \n所以session"
},
{
"path": "4.0.4 禁止js访问cookie.md",
"chars": 483,
"preview": "# 禁止 js 访问 cookie\n\n\n- 使用 HttpOnly 属性\n\n```\n//设置cookie\n\nresponse.addHeader(\"Set-Cookie\", \"uid=112; Path=/; HttpOnly\");\n```"
},
{
"path": "4.0.5 js 中 callee 与 caller 的区别.md",
"chars": 1053,
"preview": "# js 中 callee 与 caller 的区别\n\n## callee是对象的一个属性，该属性是一个指针，指向参数arguments对象的函数\n\n```\n首先我们来写个阶成函数：\nfunction chen(x){\n if (x<="
},
{
"path": "4.0.6 Memoization 介绍.md",
"chars": 451,
"preview": "# Memoization \n\n>记忆化是一种典型的时间存储平衡方案。\n\n\n>英语：(memoization而非memorization）是一种提高程序运行速度的优化技术。 \n通过储存大计算量函数的返回值，当这个结果再次被需要时将其从缓存"
},
{
"path": "4.0.7 getBoundingClientRect获取元素的大小及其相对于视口的位置.md",
"chars": 424,
"preview": "# getBoundingClientRect\n\n\n>返回元素的大小及其相对于视口的位置。\n\n\n```\ndocument.getElementById('round').getBoundingClientRect();\n\n// 返回 Obj"
},
{
"path": "4.0.8IntersectionObserver实现懒加载.md",
"chars": 6318,
"preview": "# IntersectionObserver实现懒加载\n\n>传统方式是监听scroll事件，再调用getBoundingClientRect() \n方法判断元素左上角的坐标是否在视窗内，但是scroll事件触发的太密集，会造成内存不断消耗"
},
{
"path": "4.0.9.1 PC端事件.md",
"chars": 86,
"preview": "\n\n# 4.0.9.1 PC端事件\n\n\n\n\n"
},
{
"path": "4.0.9IntersectionObserver 触底-吸顶-动画.md",
"chars": 2163,
"preview": "\n\n\n## 2. 触底\n\n我们在列表底部放一个参照元素，然后让交叉观察者去监听；\n\n假设html结构如下：\n\n```\n<!-- 数据列表 -->\n\n<ul>\n <li>index</li> // 多个li\n</ul>\n\n<!-- 参照元素"
},
{
"path": "4.1.0 const .md",
"chars": 597,
"preview": "# const \n\nthis 作用域问题\n\n```\nconst opt = {\n name: 'Amy',\n name2: this.name,\n say: function() {\n return this.name;\n "
},
{
"path": "4.1.0.1 +new Date使用.md",
"chars": 530,
"preview": "# 4.1.0.1 +new Date使用\n\n>最后会返回时间戳，和 `valueOf()` 一样, `+new Date()` 会调用 `Date.prototype` 上面的 `valueOf` 方法，根据\n\n```\nvar now ="
},
{
"path": "4.1.0.2 可视区域加载.md",
"chars": 950,
"preview": "# 4.1.0.2 可视区域加载\n\n\n\n```\n# 公式: el.offsetTop - document.documentElement.scrollTop <= viewPortHeight\n\nfunction isInViewPort"
},
{
"path": "4.1.0.2.1(标题和导航联动) 可视区域监听IntersectionObserver.md",
"chars": 4180,
"preview": "# 4.1.0.2.1 可视区域监听IntersectionObserver\n\n>IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。\n\n规格写明，IntersectionObserver的实现，应该采"
},
{
"path": "4.1.0.3 缓存函数.md",
"chars": 1064,
"preview": "# 4.1.0.3 缓存函数\n\n\n>将上次的计算结果缓存起来，当下次调用时，如果遇到相同的参数，就直接返回缓存中的数据。\n\n实现原理：把参数和对应的结果数据存在一个对象中，调用时判断参数对应的数据是否存在，存在就返回对应的结果数据，否则就返"
},
{
"path": "4.1.0.4 长列表性能优化.md",
"chars": 19544,
"preview": "# 4.1.0.4 长列表性能优化\n\n>一个针对长列表的重要优化是，只渲染页面中用户能看到的部分。 \n例如一个列表超过5000条，但是当中呈现给用户看到中的一屏显示就只有10条。 \n毕竟屏幕有限，你不可能一屏显示完所有列表条目，你需要不"
},
{
"path": "4.1.0.6 长属性菜单优化.md",
"chars": 55,
"preview": "# 4.1.0.6 长属性菜单优化\n\n\n>就是大数据量的树形菜单，加载优化（非懒加载，非逐级加载），待解决\n\n"
},
{
"path": "4.1.1 移动端 js 拖拽实现.md",
"chars": 1219,
"preview": "# 移动端 js 拖拽实现\n\n```\n// 获取节点\n var block = document.getElementById(\"editmove\");\n var oW,oH;\n // 绑定touchstart"
},
{
"path": "4.1.1.1 前端性能优化总结.md",
"chars": 167,
"preview": "# 4.1.1.1 前端性能优化总结.\n\n\n## \n\n- 减少cookie传输\n\n- cdn：\n\n- 减少http请求\n\n- 减少重绘和回流\n\n- 多进程压缩\n\n- 使用缓存\n\n- 区分环境\n\n- 按需加载\n\n- 提取公共代码\n\n- Tre"
},
{
"path": "4.1.2. call 和 apply .md",
"chars": 1936,
"preview": "# 调用一个对象的一个方法，以另一个对象替换当前对象\n\napply(func,数组参数)：\n\n```\nfunction add(a,b){\n return a+b; \n}\nfunction sub(a,b){\n return a-b;"
},
{
"path": "4.1.3. this 在不同环境中指向.md",
"chars": 4237,
"preview": "# this\n\n\n## js中this在不同环境的指向\n\nthis的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，\n实际上this的最终指向的是那个调用它的对象；\n\n1.函数调用模式\n\n当作函数调用，这时函"
},
{
"path": "4.1.3.1 JavaScript 的 this 原理.md",
"chars": 1521,
"preview": "# JavaScript 的 this 原理\n\n\n>JavaScript 语言之所以有this的设计，跟内存里面的数据结构有关系\n\n如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。\n\n"
},
{
"path": "4.1.4. 事件委托.md",
"chars": 788,
"preview": "# 事件委托\n\n事件委托:就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件\n\n>适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。\n\n比如我们有100个"
},
{
"path": "4.1.5. 浅拷贝和深拷贝.md",
"chars": 6257,
"preview": "# 浅拷贝和深拷贝\n\nJS 中的浅拷贝与深拷贝，只是针对复杂数据类型（Object，Array）的复制问题。\n\n浅拷贝与深拷贝都可以实现在已有对象上再生出一份的作用。但是对象的实例是存储\n\n在堆内存中然后通过一个引用值去操作对象，由此拷贝的"
},
{
"path": "4.1.5.1 深拷贝 structuredClone().md",
"chars": 419,
"preview": "# 4.1.5.1 深拷贝 structuredClone().md\n\n\n>structuredClone\n\n\n## 使用\n\n```\nlet a = [{a:1}]\n\nlet b = structuredClone(a)\n\nconsole."
},
{
"path": "4.1.6 适用于 vue.js 和原生 js 的渐进式图片加载.md",
"chars": 5013,
"preview": "# 适用于 vue.js 和原生 js 的渐进式图片加载 \n\n* [适用于 vue.js 和原生 js 的渐进式图片加载](https://github.com/ccforward/cc/issues/64)\n\n* js demo : ht"
},
{
"path": "4.1.7 原型链和数据类型.md",
"chars": 5104,
"preview": "# 数据类型和原型链\n\n* 基本数据类型\n - string\n - number\n - boolean\n - undefined\n - null\n - symbol\n - 区别 null 和 undefined 最简单方法 N"
},
{
"path": "4.1.7.1 作用域链.md",
"chars": 589,
"preview": "# 作用域\n\n作用域是程序源代码中定义变量的区域。\n\n作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。\n\n>说到作用域，js 分为词法作用域（静态作用域）和动态作用域 \n- 词法作用域：函数的作用域在函数定义的时候就决定"
},
{
"path": "4.1.8 DOM 节点.md",
"chars": 1724,
"preview": "# dom\n\n- [原生 js dom 操作 api ](https://github.com/fairyly/html-demo/blob/gh-pages/%E5%8E%9F%E7%94%9F%20js%20dom%20%E6%93%8"
},
{
"path": "4.1.9 清空对象数组的方法.md",
"chars": 2250,
"preview": "var有三种声明的情形：\n\n var声明的全局变量\n\n var在函数范围内声明的局部变量\n\n eval中声明的全局变量。\n\n首先，1、2种情形var声明的变量是无法删除的。\n\n尽管var声明的全局变量是属于window对象"
},
{
"path": "4.2.0 Thunk 函数.md",
"chars": 492,
"preview": "# Thunk 函数\n\n>临时函数传入函数体。这个临时函数就叫做 Thunk 函数\n\n```\nlet x = 1;\n\nfunction fn(thunk){\n return thunk()*2;\n}\n\nfunction thunk()"
},
{
"path": "4.2.1 在总的列表数组对象中查找返回的对象中存在的字段.md",
"chars": 670,
"preview": "# 在总的列表数组对象中查找返回的对象中存在的字段\n\n* 一种方法在总数组中遍历，存在值的数组中查找\n 以此类推， 不管遇到是在对象中找都转化成这种数组中\n\n ```\n var list1 = ['游泳',\"跳舞\"];\n v"
},
{
"path": "4.2.2 数组分组小算法.md",
"chars": 412,
"preview": "# 数组分组\n\n* 把一个数组中的一个属性值分成若干组， 可以配置多少组\n 加入分成 9 组,采用二位数组方法\n\n```\nvar arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19"
},
{
"path": "4.2.3 数字的千位分割.md",
"chars": 2050,
"preview": "# 千位分割\n\n将普通的数字转换为带千位分隔符格式的数字字符串是一个非常常见的问题，千位分隔符格式的规则是数字的整数部分每三位一组，以“，”分节。小数部分不分节 。\n示例：19,351,235.235767\n\n**先分离出小数部分；\n对整数"
},
{
"path": "4.2.3.1 判断一个字符串是数值.md",
"chars": 620,
"preview": "# 4.2.3.1 判断一个字符串是数值\n\n- parseFloat 会尝试转部分数值，而忽略掉不能转数值的部分\n\n- Number.isNaN，该方法不会对参数做类型转换，只要参数不是NaN，不管是什么类型，Number.isNaN一律返"
},
{
"path": "4.2.4 数字，字符串，数组，对象的方法.md",
"chars": 10771,
"preview": "# 数字，字符串，数组，对象的方法\n\nES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String"
},
{
"path": "4.2.4.1 正则匹配相关.md",
"chars": 2970,
"preview": "# 正则匹配相关\n\n## JavaScript RegExp 对象\n\n```\n直接量语法\n /pattern/attributes\n创建 RegExp 对象的语法：\n new RegExp(pattern, attributes);\n"
},
{
"path": "4.2.4.2 常用正则匹配.md",
"chars": 1144,
"preview": "# 4.2.4.2 常用正则匹配\n\n## 1.匹配中文\n\n```\n[\\u4e00-\\u9fa5]\n```\n\n## 2.匹配双子节（包括汉字在内）\n\n```\n[^\\x00-\\xff]\n\n那么单字节就是\n\n[\\x00-\\xff]\n```\n\n##"
},
{
"path": "4.2.4.2 数字数组判断是否是连续.md",
"chars": 440,
"preview": "# 4.2.4.2 数字数组判断是否是连续\n\n\n\n\n```\nfunction isContinuityNum(numArr){\n let array=[];\n if(numArr instanceof Array){\n "
},
{
"path": "4.2.4.3 计算一个字符串的宽度.md",
"chars": 644,
"preview": "# 4.2.4.3 计算一个字符串的宽度\n\n\n```\nfunction textWidth(fontSize, text) {\n let span = document.createElement(\"span\");\n let r"
},
{
"path": "4.2.4.4 ==和===.md",
"chars": 3262,
"preview": "# 4.2.4.4 ==和===\n\n>简单说，它们的区别是相等运算符（==）比较两个值是否相等， \n严格相等运算符（===）比较它们是否为“同一个值”。 \n如果两个值不是同一类型，严格相等运算符（===）直接返回false， \n而相等"
},
{
"path": "4.2.4.5 requestAnimationFrame 使用.md",
"chars": 709,
"preview": "# 4.2.4.5 requestAnimationFrame 使用\n\n>`window.requestAnimationFrame() `告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。\n\n该方法"
},
{
"path": "4.2.4.6 时分比较大小排序.md",
"chars": 215,
"preview": "# 4.2.4.6 时分比较大小排序\n\n\n\n```\n+new Date(2021,02,21,10,10);\n1616292600000\n\n\nvar arr = ['10:00','16:00','12:00','20:05','23:05"
},
{
"path": "4.2.5 JS 中的柯里化(currying).md",
"chars": 3766,
"preview": "# JS中的柯里化(currying)\n\n* 张鑫旭:http://www.zhangxinxu.com/wordpress/2013/02/js-currying/\n\n① 柯里化（Currying），又称部分求值（Partial Eval"
},
{
"path": "4.2.6 js 面向对象之公有、私有、静态属性和方法详解.md",
"chars": 4556,
"preview": "# js面向对象之公有、私有、静态属性和方法详解\n\n1.公有属性和公有方法\n```\n function User(name,age){\n this.name = name;//公有属性\n this.age = age;\n }"
},
{
"path": "4.2.7 定时器.md",
"chars": 904,
"preview": "# setTimeout \n\n\nsetTimeout还有一个需要注意的地方：如果被setTimeout推迟执行的回调函数是某个对象的方法， \n那么该方法中的this关键字将指向全局环境，而不是定义时所在的那个对象。\n```\nvar x ="
},
{
"path": "4.2.8 for 循环中 onclick 问题.md",
"chars": 698,
"preview": "\n# for循环中onclick问题\n\nhttp://blog.csdn.net/k358971707/article/details/52968378\n\n```\n<script> \n var btn=document.get"
},
{
"path": "4.2.9 js 短路求值.md",
"chars": 639,
"preview": "# 短路求值 && ||\n```\n几乎所有语言中||和&&都遵循“短路”原理，如&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反。 \n\njs也遵循上述原则。但是比较有意思的是它们返回的值。 \n\n代码：var attr = t"
},
{
"path": "4.3.0 执行 js 代码片段.md",
"chars": 181,
"preview": "# 4.3.0 执行 js 代码片段\n\n\n## eval(`code`)\n\n>执行其中的的 JavaScript 代码,应该尽可能地避免使用。\n\n```\neval(`console.log(1)`)\n```\n\n\n## `new Functi"
},
{
"path": "4.3.1 判断为 true 严谨写法.md",
"chars": 134,
"preview": "# 判断 true\n\n```\nif(foo) //不够严谨\n \nif(!!foo) //更为严谨，!!可将其他类型的值转换为boolean类型\n\ntypeof(5) //返回number\ntypeof(!!5) // 返"
},
{
"path": "4.3.2 多级菜单遍历判断子节点.md",
"chars": 9887,
"preview": "# demo\n\n```\nvar nature = [\n {\n name: \"华东区\",\n check: fal"
},
{
"path": "4.3.3 JavaScript 性能优化的小知识.md",
"chars": 18077,
"preview": "# JavaScript 性能优化的小知识\n\n* 静逸博客： http://www.cnblogs.com/liyunhua/p/4529086.html\n\n- [前言](#前言)\n- [避免全局查找](#避免全局查找)\n- [定时器](#"
},
{
"path": "4.3.4 使用数组 splice 删除元素时的坑.md",
"chars": 990,
"preview": "# 使用数组splice删除元素时，你应该知道这个小坑\n\n* https://juejin.im/entry/5a1ecfef6fb9a044fe462143\n\n从数组[1,2,5,6,8,9]中保留小于等于4的元素。思路，循环数组，然后从"
},
{
"path": "4.3.5 JS中document对象和window对象的区别.md",
"chars": 2237,
"preview": "# JS中document对象和window对象的区别\n\n简单来说，document是window的一个对象属性。 \nWindow 对象表示浏览器中打开的窗口。 \n如果文档包含框架（frame 或 iframe 标签），浏览器会为 HT"
},
{
"path": "4.3.6 自执行函数中暴露方法调用.md",
"chars": 1665,
"preview": "# 自执行函数中暴露方法调用\n\n```\nvar demo = (function(){\n function test(){\n }\n return {\n test:test\n }\n})();\n\ndemo.test();\n```\n"
},
{
"path": "4.3.7 前端数组对象排序算法.md",
"chars": 1353,
"preview": "# 前端数组对象排序算法\n\n主要用 Arrays.sort(func); //进行排序 \n\nMDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/"
},
{
"path": "4.3.8 ios 需要点击2次才能跳转.md",
"chars": 465,
"preview": "# 需要点击2次才能跳转\n\n\n```\n（1）网页头部添加meta\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/>\n（2）使用js 添加 click"
},
{
"path": "4.3.9 2017-12-11 遇到 ios bug.md",
"chars": 379,
"preview": "# 4-27 2017-12-11 遇到 ios bug \n\n起因 -webkit-overflow-scroll: touch\n\n表格左侧单行固定,头部和内容分离\n\n```\n//单列固定\n111111 2222 333 444 "
},
{
"path": "4.4.1 新增元素使用 jQuery on()方法重复绑定的问题.md",
"chars": 367,
"preview": "# 新增元素使用jQuery on()方法重复绑定的问题\n\n\n最近写ajax新增元素button绑定click事件的时候发现元素重新添加进来的时候会多执行一次事件函数， \n找了半天，怀疑是on()的问题，于是测试了一下，果然是因为on()"
},
{
"path": "4.4.2 一年中的 周 范围计算.md",
"chars": 3081,
"preview": "# 一年中的 周 范围计算\n\n```\nfunction formatDig(num){\n return num>9?''+num:'0'+num;\n }\n function formatDate(mill){\n "
},
{
"path": "4.4.3 BFC-块格式化上下文（block formatting context）.md",
"chars": 2255,
"preview": "# 块格式化上下文（block formatting context）\n\n* MDN 介绍：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_co"
},
{
"path": "4.4.4 函数封装写法.md",
"chars": 1407,
"preview": "# 函数封装写法\n\n* 1\n```\n(function(){\n \n var datepicker = {};\n datepicker.getMonthData = function (year, month) {\n if (!"
},
{
"path": "4.4.5 字符串数组常用方法.md",
"chars": 5764,
"preview": "# 字符串数组常用方法\n\n```\nvar a = 0;\nfunction test(){\n alert(a);\n var a = 100;\n}\ntest();\n// undefined\n先创建了空间,再赋值，都是从上到下的。还有"
},
{
"path": "4.4.6 本地缓存与浏览器缓存区别.md",
"chars": 1903,
"preview": "# 本地缓存与浏览器缓存区别\n\n* 本地缓存\n - 为整个 web 应用程序服务，\n - 只缓存指定的网页\n - 可靠的，\n - 控制对哪些内容缓存\n* 浏览器网页缓存\n - 服务单个网页\n - 不安全，不可靠\n - 任何网页"
},
{
"path": "4.4.7. 判断 js 中的数据类型的几种方法.md",
"chars": 3054,
"preview": "# 判断js中的数据类型的几种方法\n\n\n判断js中的数据类型的几种方法\n\n判断js中的数据类型有一下几种方法：typeof、instanceof、 constructor、 prototype、 $.type()/jquery.type()"
},
{
"path": "4.4.8 获取字符串长度（汉字算两个字符，字母数字算一个.md",
"chars": 7075,
"preview": "* 获取字符串长度（汉字算两个字符，字母数字算一个\n\n```\n//获取字符串长度（汉字算两个字符，字母数字算一个）\n function getByteLen(val) {\n var len = 0;\n for (v"
},
{
"path": "4.4.9-函数式编程.md",
"chars": 2758,
"preview": "# 函数式编程\n\n- 纯函数（Pure functions）\n- 函数复合（Function composition）\n- 避免共享状态（Avoid shared state）\n- 避免改变状态（Avoid mutating state）\n"
},
{
"path": "4.5.0 易混淆的判断.md",
"chars": 259,
"preview": "# 4.5.0 易混淆的判断\n\n\n\n```\n# 空值\n\n'' == false ---> true\n'' == 0 ---> true\n/^\\d*$/.test('') ---> true"
},
{
"path": "4.5.1 JavaScript 内存机制（堆栈池）.md",
"chars": 2146,
"preview": "# JavaScript 内存机制\n\n### #内存模型\n\nJS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量，堆存放复杂对象，池存放常量。\n\n\n为了更好的搞懂栈内存与堆内存，我们可以结合以下例子与"
},
{
"path": "4.5.2 forEach和map和for方法的区别.md",
"chars": 4506,
"preview": "## forEach和map和for方法的区别\n\nJS中的forEach、$.each、map方法\n\n \n- forEach 是 ECMA5 中 Array 新方法中最基本的一个，就是遍历，循环。例如下面这个例子：\n\n[1, 2 ,3, 4"
},
{
"path": "4.5.3 json 数组对象中键值重复判断.md",
"chars": 405,
"preview": "# 对象中键值重复判断\n\n```\nvar arr = [\n {'type':'checkbox','name':'选项1'},\n {'type':'checkbox','name':'选项1'},\n {'type':'checkbox"
},
{
"path": "4.5.3.1 数组对象去重.md",
"chars": 982,
"preview": "# 数组对象去重\n\n\ndemo:\n\n```\nvar arr = [{\n \"name\": \"ZYTX\",\n \"age\": \"Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-"
},
{
"path": "4.5.3.2 JS取出两个数组的不同或相同元素.md",
"chars": 466,
"preview": "# 4.5.3.2 JS取出两个数组的不同或相同元素\n\n\n```\ngetArrDifference(arr1, arr2) { \n return arr1.concat(arr2).filter(function(v, i, arr) "
},
{
"path": "4.5.3.3 表格table json数据行到列的转换.md",
"chars": 1771,
"preview": "# 4.5.3.3 表格 table json数据行到列的转换\n\n\n```\n\n name role sex age ...\n\ndate1\ndate2 \n...\n// 转换后\n// ===="
},
{
"path": "4.5.4 时间戳日期转换.md",
"chars": 1737,
"preview": "# 时间戳日期转换\n\n```\n/*\n * 时间日期转换\n * @param: \"10:00-22:00\"/ new Date()\n */\nexport default {\n /*\n * var storeBusinessTime=\"10"
},
{
"path": "4.5.5 常用JS方法.md",
"chars": 12997,
"preview": "# 常用JS方法整理\n\n## 目录\n- [1.截取指定字节数的字符串](#1.截取指定字节数的字符串)\n- [2.判断是否微信](#2.判断是否微信)\n- [3.获取时间格式的几个举例](#3.获取时间格式的几个举例)\n- [4.获取字符串"
},
{
"path": "4.5.6 setTimeout、setInterval被遗忘的第三个参数.md",
"chars": 1035,
"preview": "# setTimeout、setInterval被遗忘的第三个参数\n\n第三个以后的参数是作为第一个func()的参数传进去。\n```\nvar timeoutID = scope.setTimeout(function[, delay,par"
},
{
"path": "4.5.6.1 关于setTimeout和Promise执行顺序问题.md",
"chars": 915,
"preview": "# 关于setTimeout和Promise执行顺序问题\n\n执行顺序：Promise——>其后的.then()——>setTimeout（异步）\n\nsetTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示"
},
{
"path": "4.5.6.2JS 异步解决方案的发展历程以及优缺点.md",
"chars": 2191,
"preview": "# 4.5.6.2JS 异步解决方案的发展历程以及优缺点\n\n## 1. 回调函数（callback）\n```\nsetTimeout(() => {\n // callback 函数体\n}, 1000)\n```\n- 缺点：回调地狱，不能用"
},
{
"path": "4.5.7 暂时性死区.md",
"chars": 248,
"preview": "# 暂时性死区\n\n\n总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称TDZ）\n\n\n```\nvar tmp = 123;\n\nif (true) {\n "
},
{
"path": "4.5.8 理解JS的节流、防抖及使用场景.md",
"chars": 4837,
"preview": "# 理解JS的节流、防抖及使用场景\n\n以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。\n\n - 1.window对象的resize、scroll事件\n\n - 2.拖拽时的mousem"
},
{
"path": "4.5.9 统计字符串中特定字符包含的个数.md",
"chars": 244,
"preview": "# 统计字符串中特定字符包含的个数\n\n\n```\nfunction getPlaceholderCount(strSource) {\n //统计字符串中特定字符包含的个数\n var thisCount = 0;\n strSource.r"
},
{
"path": "4.6.0 网站优化懒加载技术--lazyload.md",
"chars": 411,
"preview": "# 网站优化\n\n- 1.lazyload\n\n- 2.延迟加载（用setTimeout去做，有点不着调啊）\n\n- 3预加载（此方法适用于增加用户体验，但是更加对服务器有压力了）\n\n- 4.增加带宽，换好的服务器（你懂的，一般老板不到最后时刻都"
},
{
"path": "4.6.1 手写bind方法.md",
"chars": 2275,
"preview": "# 手写bind方法\n\n## JavaScript 中 this 的四条绑定规则\n\n- 1.默认绑定\n\n独立函数调用时，this指向全局对象，如果使用严格模式，那么全局对象无法使用默认绑定，this绑定至undefined并抛错（TypeE"
},
{
"path": "4.6.2 localeCompare.md",
"chars": 578,
"preview": "# localeCompare\n\n>目前还有兼容性问题\n\n定义：用本地特定的顺序来比较两个字符串。\n\n语法：stringObject.localeCompare(target)\n\n参数：target——要以本地特定的顺序与 stringOb"
},
{
"path": "4.6.3 表单可以跨域吗.md",
"chars": 539,
"preview": "# 表单可以跨域吗\n\n>因为原页面用 form 提交到另一个域名之后，原页面的脚本无法获取新页面中的内容。\n所以浏览器认为这是安全的。\n而 AJAX 是可以读取响应内容的，因此浏览器不能允许你这样做。\n如果你细心的话你会发现，其实请求已经发"
},
{
"path": "4.6.3.1 前端跨域.md",
"chars": 12626,
"preview": "# 4.6.3.1 前端跨域\n\n## 什么是同源策略？\n\n>同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易"
},
{
"path": "4.6.4 jsonp为什么不支持post方法.md",
"chars": 3372,
"preview": "# jsonp为什么不支持post方法\n\n预先定义callback函数\n\n```\nfunction myfunc(data) {\n console.log(data)\n}\n```\n\n- dom中插入script标签\n<!-- callb"
},
{
"path": "4.6.5 实现一个 promise.md",
"chars": 5645,
"preview": "# 实现一个 promise\n\n## 1.初步构建\n>Promise 的参数是函数 fn， \n把内部定义 resolve 方法作为参数传到 fn 中，调用 fn。 \n当异步操作成功后会调用 resolve 方法， \n然后就会执行 th"
},
{
"path": "4.6.6 将简单对象数组转换成父子结构（具有children属性）的对象.md",
"chars": 1359,
"preview": "# 将简单对象数组转换成父子结构（具有children属性）的对象\n\n\n```\nfunction treeData(data){\n let tree = data.filter((father)=>{ //循环所"
},
{
"path": "4.6.7 100 100的 canvas 占多少内存.md",
"chars": 1332,
"preview": "# `100*100`的 canvas 占多少内存\n\n一个图片占多少内存在于图片的尺寸大小。\n\n以一张尺寸为900 × 600的图片为例，图片共有像素数：\n\n900 × 600 = 540,000像素(Pixel)。\n\n如果图片是RGB 色"
},
{
"path": "4.6.8 console.time方法与console.timeEnd方法.md",
"chars": 1132,
"preview": "# console.time方法与console.timeEnd方法\n\n\n在Node.js中，当需要统计一段代码的执行时间时，\n\n可以使用console.time方法与console.timeEnd方法，\n\n其中console.time方法"
},
{
"path": "4.6.9 js 数组全排列.md",
"chars": 3379,
"preview": "# js数组全排列\n\n\n## 递归实现js数组全排列\n\n>当n = 1时， 数组arr = [A]，全排列结果为 [A]; \n当n = 2时， 数组arr = [A, B]，全排列结果为 [A, B] [B, A]; \n当n = "
},
{
"path": "4.6.9 判断一个数组是否包含另一个数组.md",
"chars": 1039,
"preview": "# 判断一个数组是否包含另一个数组\n>判断某个数组中是否包含另一个数组\n\n```\n//是否被包含,是返回true,不是返回false\nisContained =(a, b)=>{\n if(!(a instanceof Array) |"
},
{
"path": "4.7.0 判断对象数组是否存在某个对象.md",
"chars": 128,
"preview": "# 4.7.0 判断对象数组是否存在某个对象\n\n\n- 转成json字符串判断\n\n```\nJSON.stringify([{a:1},{a:2},{a:3},{a:2},{a:3}]).includes(JSON.stringify({a:1"
},
{
"path": "4.7.1 Math.max() 求数组最大数.md",
"chars": 632,
"preview": "\n## 求数组最大数\n\n```\n方法一：\n\n\nfunction findMax(arr) {\n\tvar max = arr[0];\n\tfor (var i = 1; i < arr.length; i++) {\n\t\tif (arr[i] >"
},
{
"path": "4.7.2 canvas getImageData() 方法.md",
"chars": 1193,
"preview": "# canvas getImageData() 方法\n\n通过 canvas getImageData() 方法 可以拿到 ImageData 对象，该对象拷贝了画布指定矩形的像素数据\n\n>注意：ImageData 对象不是图像，它规定了"
},
{
"path": "4.7.3 二叉树的几种遍历方式.md",
"chars": 553,
"preview": "# 二叉树的几种遍历方式\n\n## 二叉树的遍历主要分三种：\n\n- 先（根）序遍历：根左右\n- 中（根）序遍历：左根右\n- 后（根）序遍历：左右根\n\n\n### 1.先序遍历二叉树\n\n1)算法的递归定义是：\n\n 若二叉树为空，则遍历结束；否则"
},
{
"path": "4.7.4 将 arguments 对象转为数组.md",
"chars": 1324,
"preview": "# 将 arguments 对象转为数组 `[].slice.call(arguments);`\n\n## arguments 是什么\n\narguments 可以看做一个数组。每一个js函数内部都有 arguments，它代表传入的参数数组。"
},
{
"path": "4.7.5 script标签中defer和async属性的区别.md",
"chars": 781,
"preview": "# script标签中defer和async属性的区别\n\n## script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：\n\n - 1.<script src=\"example.js\"></script"
},
{
"path": "4.7.6 现在有一个函数A和函数B，请你实现B继承A.md",
"chars": 3083,
"preview": "# 现在有一个函数A和函数B，请你实现B继承A\n\n## 1.使用原型链\n\n>思想：**利用原型让一个引用类型继承另一个引用类型的属性和方法** \nb继承a实际上就是创建a的实例，并将该实例赋予给b.prototype.实现的本质是重写原"
},
{
"path": "4.7.7 ES6 --- rest 参数.md",
"chars": 863,
"preview": "# ES6 引入 rest 参数\n\n>ES6 引入 rest 参数`（形式为...变量名）`，用于获取函数的多余参数，这样就不需要使用 `arguments` 对象了。 \n`rest` 参数搭配的变量是一个数组，该变量将多余的参数放入数组"
},
{
"path": "4.7.8 尾调用.md",
"chars": 841,
"preview": "# 尾调用\n\n>就是指某个函数的最后一步是调用另一个函数。\n\n```\nfunction f(x){\n return g(x);\n}\n```\n\n>是调用函数之后，还有别的操作，都不属于尾调用\n\n>尾调用不一定出现在函数尾部，只要是最后一步操"
},
{
"path": "4.7.9 BigInt JavaScript 中的任意精度整数.md",
"chars": 1105,
"preview": "# BigInt：JavaScript 中的任意精度整数\n>BigInt 是 JavaScript 中的一个新的数字类型，可以用任意精度表示整数。使用 BigInt，即使超出 Number 的安全整数范围限制，也可以安全地存储和操作大整数。"
},
{
"path": "4.8.1 webpack 打包原理及优化.md",
"chars": 4839,
"preview": "# webpack 打包原理\n\n\n\n>webpack 中每个模块有一个唯一的 id，是从 0 开始递增的。 \n整个打包后的 bundle.js 是一个匿名函数自执行。 \n参数则为一个数组。数组的每一项都为个 function。 \nfu"
},
{
"path": "4.8.1.1 webpack-dev-server是怎么跑起来?.md",
"chars": 971,
"preview": "# dev-server是怎么跑起来\n\n## 1.1 webpack-dev-middleware\n\nwebpack-dev-middleware 的出现很好地解决了上述问题 —— 作为一个 webpack 中间件， \n\n它会开启 wat"
},
{
"path": "4.8.2 0.1 + 0.2 === 0.3及超大整数相加 .md",
"chars": 10235,
"preview": "# 0.1 + 0.2 === 0.3 \n\n## IEEE 754 规范\n\n>在JavaScript中，所有的Number都是以64-bit的双精度浮点数存储的\n\n二进制在存储的时候是以二进制的“科学计数法”来存储的，我们回顾下十进制的科学"
},
{
"path": "4.8.2 骨架屏.md",
"chars": 1177,
"preview": "# 骨架屏\n\n>\n\n## 生成骨架屏的方式主要有：\n\n- 1.手写HTML、CSS的方式为目标页定制骨架屏\n >做法可以参考[<Vue页面骨架屏注入实践>](https://segmentfault.com/a/1190000014832"
},
{
"path": "4.8.2.1 toFixed精度丢失解决.md",
"chars": 742,
"preview": "# 4.8.2.1 toFixed精度丢失解决\n\n\n```\nfunction toFixed(number, precision) {\n var str = number + ''\n var len = str.length\n "
},
{
"path": "4.8.2.1 去掉小数尾部零.md",
"chars": 366,
"preview": "# 4.8.2.1 去掉小数尾部零\n\n\n```\n# 一个数字，如果是整数，返回整数；如果是小数，保留两位，尾部零不要\n\nNumber(val).tofixed(2) - '0'\n\nformatNum(val) {\n let str ="
},
{
"path": "4.8.3 document.execCommand.md",
"chars": 4812,
"preview": "# document.execCommand\n\ndocument.execCommand()方法处理Html数据时常用语法格式如下:\n\ndocument.execCommand(sCommand[,交互方式, 动态参数])\n\n其中：sCom"
},
{
"path": "4.8.4 js正则替换日期格式.md",
"chars": 700,
"preview": "# js正则替换日期格式\n\n## 2018-1-1 ===> 2018-01-01\n```\n'2017-6-5'.replace(/-(\\d{1})/g,'-0$1') // 匹配 - 后是一位的数字，替换成 -0 形式\n// \"2017"
},
{
"path": "4.8.5 react-router的实现原理.md",
"chars": 872,
"preview": "# react-router的实现原理\n\n文章主要包含两大部分: 一是对react-router赖以依存的history进行研究；二是分析react-router是如何实现URL与UI同步的。\n\n## 1.react-router依赖基础 "
}
]
// ... and 45 more files (download for full content)
About this extraction
This page contains the full source code of the fairyly/front-end-summary GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 245 files (651.6 KB), approximately 279.3k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.