FE 思维导图模板_ProcessOn思维导图、流程图

HTML

h5 新增常用的5个全局属性

contenteditable

spellcheck

hidden

draggable

data-*

h5 内容模型变为7类

语句型元素：a audio b button canvas input img svg textarea text video 等

交互型元素：a audio button img input label textarea video

区块型元素：article aside nav section

标题型元素：h1 h2 h3 h4 h5 h6

常用标签嵌套规则

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>的子元素是语句型元素

<a>的子元素是transparent(以它的父元素允许的子元素为准)，但不包括交互型元素(interactive content)

<button>子元素是语句型元素，不可嵌套交互型元素(interactive content)

<dt>、<th>不可嵌套<header>、<footer>、区块型元素(sectioning content)、标题型元素(heading content)

html5 7个结构元素

section

article

nav

aside

header

footer

main

常用标签

a

href不能留空，需要用 # 或 javascript:; 否则会刷新页面

使用 _self 在当前窗口打开, 使用 _blank 在新标签页打开

使用 rel="prev prefetch prerender" 和 rel="ext prefetch prerender" 对前后页进行预加载

img

使用 usemap 属性定义图片热区，点击热区会发生跳转

使用 srcset 和 sizes 属性进行响应式布局，也就是根据页面大小使用不同尺寸图片

form

表单控件有 <input>、<menus>、<textarea>、<fieldset>、<legend>、<label>等元素

name属性规定表单名称，如果name="test"，则Javascript可以使用document.forms.test来获取该表单

action 属性, 点击 submit 后提交表单的地址

enctype属性，提交报文编码

method 属性，get/post 方法

input

name 属性，规定input元素的名称，用于对提交到服务器后的表单数据进行标识，只有有 name 属性的表单元素才能在提交表单后传递值。

input 标签的23种类型(10旧+23新)

text, 单行文字输入

password，密码字段

file, 文件上传

radio, 定义单选按钮

checkbox,定义复选框

hidden, 定义隐藏输入字段

button, 可点击按钮

image, 图片形式的提交按钮

reset, 重置按钮，会清除表单所有数据

submit，提交按钮

color, 调色板

tel, 电话号码输入

email, 电子邮件输入

url, url输入

search, 搜索域

range 包含一定范围内数字值

date, 日月年输入域

month, 月年输入域

week，选取周, 年输入域

time 用于输入不含时区的时间控件

datetime: 基于 UTC 时区的日期时间输入控件

datetime-local: 用于输入日期时间控件，不包含时区。

CSS

基础

引入CSS样式3种形式

外部样式表 link元素

内部样式表 style元素

行内样式 style属性

CSS层叠

考虑因素

来源

作者

用户

代理

重要性

重要声明使用 !important 来标志

特殊性

内联样式 1000

ID选择器 0100

类/属性/伪类选择器 0010

元素/伪元素选择器 0001

结合符或者通配选择器 0000

继承

基于继承机制，样式不仅可以应用到指定的元素，还会应用到它的后代元素

层叠规则

1. 根据来源和重要性排序

不考虑重要性时，author>user>userAgent

考虑重要性，user !important > author !important > author > user > userAgent

2.对于非重要声明来说，按特殊性排序

3.如果特殊性相同，按照出现顺序排序

声明在样式小或文档中越靠后，权重越大

;如果使用 @import ，那么认为导入样式表的声明在前，主样式声明在后

4个样式关键字

initial 初始，表示元素属性的初始默认值

Inherit: 表示元素的直接父元素对应属性的计算值

unset: 表示如果该样式默认可继承，则为 inherit，否则为 initial。实际上设置 unset 相当于不设置

revert: 表示样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式设置；否则，等价于unset

盒模型

w3c标准模型

外盒尺寸计算

element空间高度 = 内容高度 + 内距 + 边框 + 外距
element空间宽度 = 内容宽度 + 内距 + 边框 + 外距

内盒尺寸计算

element高度 = 内容高度 + 内距 + 边框 (height为内容高度)
element宽度 = 内容宽度 + 内距 + 边框 (width为内容宽度)

IE 传统盒模型

外盒尺寸计算

element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）

内盒尺寸计算

element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

box-sizing

content-box: 相当于 w3c标准模型

border-box: 相当于 IE 盒模型

IE的盒模型有时候更直观，因为 height 就相当于内容高度+内距+边框，省的加了

定位机制

普通流

display属性的四个常用值: block inline-block inline 和 none

块级元素：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。块级元素的纵向边距会合并

内联元素都会在所处的包含元素内从左到右水平分布显示。左右排布的内联元素的横向边距不会合并，需要各自独立计算

inline-block: 对外表现为 inline，对内表现为 block

视觉格式化模型

块级格式化模型(BFC)

定义

BFC 是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

触发条件，任意一个即可触发

根元素, 即 html 标签

float 为left 或 right

overflow 不为 visible 而是 hidden 等等

position 为 absolute 或 fixed

display 为 inline-block

display 为 flex inline-flex

display 为 grid inline-grid

display 为 table-cell table-caption

display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table

display 为 flow-root(css3中的新值，专门为清除浮动)

BFC布局规则

1.内部Box会在垂直方向一个接一个放置

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4.BFC的区域不会与float box重叠

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

6.计算BFC的高度时，浮动元素也参与计算

BFC作用

1.防止元素被浮动元素覆盖

由于 BFC 不会与 float box 重叠（第4条规则），所以如果一个元素被一个 float 元素覆盖了，只要使用触发条件中的任意一条（比如 overflow: hidden），就可以让这个元素称为 BFC，从而不会被 float 元素覆盖。

2.BFC可以包含浮动元素(清除浮动)

这个跟第6条规则相关。经常遇到这样的情况，一个 div ，包含了两个元素，结果那俩元素都是浮动的，结果那个 div 就完全没撑起来，这时就可以在 div 使用一些CSS属性来触发 BFC(比如 overflow: hidden)，这样div就撑起来

3.当两个相邻块级子元素属于不同BFC可以阻止margin重叠

通过在某个子元素上包裹一个元素，并让这个元素成为一个BFC，那么原来的两个元素就分属于两个不同的BFC，以此来阻止margin重叠

行级格式化上下文(IFC)

掘金

Flex格式化上下文(FFC)

网格格式化上下文(GFC)

浮动

浮动元素不在普通的文档流中，文档的普通流元素表现的就像浮动的元素不存在一样。

绝对定位

position: absolute

将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

position: fixed

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。

绝对定位使元素位置与文档流无关，因此不占据普通文档流的空间。

布局

两栏布局的7种方式

双inline-block

双浮动

float+margin-left

absolute+margin-left

float+BFC

flex

grid

三栏布局的7种方式

绝对定位法

浮动法

BFC

圣杯布局

双飞翼布局

flex布局

Grid布局

清除浮动的2种方式

1.触发BFC，在定位机制-普通流-视觉格式化模型-BFC中有讲到，比如 overflow: hidden/auto;

2.在父元素的::after伪元素中加入 clear: both; 样式

垂直水平居中

需要元素定宽

margin: auto

absolute + 负 margin

absolute + calc

不需要元素定宽

absolute + translateX

lineheight + text-align + verical-align

write-mode

table

display: table-cell

flex

grid

兼容性

PC端有兼容性要求，宽高固定，推荐absolute + 负margin

PC端有兼容要求，宽高不固定，推荐css-table

PC端无兼容性要求，推荐flex

移动端推荐使用flex

sitcky布局(当显示区域够大时显示底部的栏，当显示区域只够显示内容时，不显示底部的栏)

absolute

calc

flex

图片格式

位图

就是最小单位由象素构成的图，缩放会失真。

gif

无损压缩，尺寸较小，支持透明和动画

只从存储8位索引只能表示256的颜色

适合色彩简单的 logo icon

jpg

有损压缩，但是色彩丰富，可以将图片尺寸大幅缩小

不适合 icon/logo 因为相对于 gif 和 png-8没有文件大小优势

png-8

无损压缩，相对于 gif 对透明支持更好，同等质量，尺寸也更小，某些场景可以替代 gif

基于 8位索引色; 不支持动画

如果没有动画需求，可以使用 png-8代替 gif

png-24

无损压缩，图片质量很高，并且有 bmp 不具备的尺寸优势；支持透明

对比之前的格式，尺寸大; 图片存储为png-24比存储为jpg，文件大小至少是jpg的5倍，但在图片品质上的提升却微乎其微。

适合对源文件或需要二次编辑的图片格式保存; 除非对品质要求极高，否则色彩丰富的图片推荐用 jpg

webp

png、jpg相比，相同的视觉体验下，WebP图像的尺寸缩小了大约30％

WebP图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代png、jpg、gif等图片格式

j兼容性不是很好，移动端还可以

矢量图

矢量图实际上并不是象位图那样纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，缩放不会失真

svg

SVG（Scalable Vector Graphics）是可缩放矢量图形的缩写，基于可扩展标记语言XML来描述二维矢量图形的一种图形格式

当 <svg> 元素出现在 HTML5 文档中时，它的行为类似于一个内联块，是 HTML 文档树的一部分

DOM

节点操作

节点关系

父级属性

parentNode: 该属性指向文档树中的父节点

parentElement: 返回父元素节点

子级属性

childNodes: 该节点的第一层子节点

children: 该节点的第一层子元素节点

firstChild, lastChild: 第一个和最后一个子节点

firstElementChild, lastElementChild: 第一个和最后一个元素子节点

同级属性

nextSibling, previousSibling: 后一个，前一个节点

nextElementSibling, previousElementSibling 后一个，前一个元素节点

方法

hasChildNodes(): 是否有子节点

contains(node): 传入的子节点是否为当前节点的后代节点，不一定是第一层子节点

compareDocumentPosition(node): 比较两个节点的位置关系

isSameNode(node): 这两个节点是否为相同节点

isEqualNode(node): 两个节点是否相等

12种节点类型

1 元素节点

方法

hasAttribute

getAttribute

setAttribute

removeAttribute

attributes属性

2 属性节点

3 文本节点

9 文档节点

10 文档类型节点

5种节点操作

1种创建节点

document.createElement(标签名): 按照标签名，如 'div' 创建新元素节点

3种插入节点

<parentNode>.appendChild(<node>): 将node插入到当前元素的 childNodes 列表的末尾

<parentNode>.insertBefore(<node>, <otherNode>): 将节点插入到 otherNode 之前

<otherNode>.insertAdjacentHTML(<position>, <HTML>): 相对与当前元素插入新html

2种移除节点

<parentNode>.removeChild(<node>): 移除子节点

<node>.remove(): 当前节点直接调用自己的 remove 方法移除自己

1种替换节点

<parentNode>.replaceChild(<node>, <oldNode>): 将旧节点替换为新节点

1种复制节点

<targetNode>.cloneNode(<Boolean>): 复制目标节点，传入一个布尔值，表示是否执行深拷贝

5个元素内容属性

innerHTML

outerHTML

innerText

outerText

textContent

4种获取节点

getElementById

getElementsByClassName

querySelector

getElementsByTagName

classList属性

add/contains/remove/toggle

元素尺寸

偏移量 offset

定位父级 offsetParent

offsetWidth 元素在水平方向占用的大小

offsetHeight 元素在垂直方向上占用的大小

offsetTop 元素的上外边框(margin)与offsetParent上内边框(padding)的距离

offsetLeft 元素左外边框(margin)与offsetParent 左内边框(padding)的距离

客户区 client

clientWidth 元素水平方向的大小(内边距 + width)

clientHeight 元素垂直方向大小(内边距 + height)

clientLeft 元素左边框宽度 border-left-width

clientTop 元素上边框宽度 border-top-width

获取页面可视区的宽度高度

滚动 scroll

scrollHeight 元素总高度，包括由于溢出而不可见的部分

scrollWidth 表示元素的总宽度，包括由于溢出而不可见的部分

获取文档实际高度

scrollTop 被隐藏在内容区域上方的像素数

scrollLeft 被隐藏在内容区域左侧的像素数

获取页面的滚动值

滚动方法

window.scrollTo(x, y) 滚动当前window显示的文档，x 是横向，y是纵向

window.scrollBy(x, y) 滚动当前window中显示的文档，x和y是滚动的相对量

<Element>.scrollIntoView(<boolean>) 滚动当前元素，进入浏览器可见区域

<Element>.scrollIntoViewIfNeeded(<Boolean>) 只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，使它可见，如果可见，则什么都不做

5种回到顶部写法

锚点

document.documentElement.scrollTop = 0

scrollTo(0, 0)

scrollBy(0, -document.documentElement.scrollTop)

顶部元素.scrollIntoView()

3个元素视图方法

<Element>.getBoundingClientRect(): 返回一个对象，包含当前元素节点的大小，相对于视口的位置等信息

<Element>.getClientRects(): 元素的数个矩形区域的类数组对象，如果是对块级元素 getClientRects()[0]和getBoundingClientRect()的属性返回相同的值

document.elementFromPoint(x,y) 返回指定坐标的最上层和最里层的 Element对象

DOM事件

事件流3个阶段

事件捕获

处于目标

事件冒泡

4种事件处理程序

HTML事件处理

DOM0级事件处理

DOM2级事件处理

IE事件处理

事件委托

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)，也叫事件委托

Event对象

event.type 事件类型

event.currentTarget 当前执行事件处理函数的元素

event.target/srcElement 触发事件的元素

event.eventPhase 事件流的哪个阶段，0表示没有事件发生，1 捕获阶段 2 目标阶段 3 冒泡阶段

event.cancelable 事件是否可以被取消

event.returnValue 设置为false可以取消默认行为

event.cancelable 事件是否可以被取消

event.defaultPrevented 事件默认行为是否被阻止

event.bubbles 事件是否会冒泡

event.cancelBubble 该值可读写，默认为 false 当设置为 true 可以取消事件冒泡

event.stopPropagation() 表示取消事件的进一步捕获或冒泡

event.stopImmediatePropagation() 阻止事件进一步捕获或冒泡，并且阻止同一事件的其他监听函数被调用

event.preventDefault() 调用后可以取消默认行为

取消默认行为

DOM0级事件处理程序取消默认行为

DOM2级事件处理程序取消默认行为

IE 事件处理程序取消默认行为

自定义事件监听

满足兼容要求的事件绑定

JavaScript

Function

arguments 与函数形参关系

Promise

浏览器端 polyfill

Object

4种对象属性深拷贝

contructor 属性

对象属性类型

自有属性

可枚举属性

不可枚举属性

Symbol值属性

原型链属性

对象三种状态

不可拓展

密封

冻结

实现继承的5种方式

类式继承

构造函数继承

组合继承

寄生组合继承

extends继承

ES6

babel编译过程

class语法

箭头函数

模块

异步编程控制

异步回调

Promise

Generator + Promise

async await

this 对象

函数运行时绑定的对象

四种绑定规则，先后等级

prototype

对象的 __proto__ 属性指向它的原型对象

函数默认会有一个prototype属性

将函数作为构造函数调用产生的对象obj，obj的 __proto__ 会指向这个函数的 prototype

使用 Object.create(anoObj) 产生的对象 obj, 这个对象的 __proto__ 会指向anoObj

客户端存储

cookie

优点：新旧浏览器都支持它

缺点：不论服务器端是否需要，每次HTTP请求都会把这些数据传输到服务器端；可以保存的数据量比较少

Web Storage

localStorage

优点：当数据需要被严格控制在客户端时，无需持续将数据发回服务器；可以存储大量可以跨会话存在的数据

sessionStorage

indexedDB

常见特效

瀑布流

1. 使用 offsetWidth 获取每个图片 box 的水平方向占用

2. 使用 document.documentElement.clientWidth 获取屏幕的可视区域宽度（除滚动条）

3. 计算列数

4. 使用绝对定位，由于box的宽度一致，所以说相同列的 left 一致，只是 top 不一样

5. 首先将第一行用box 填满，维护一个每列高度的数组，从第二行开始，向每列高度最矮的列添加图片 box 并增加该列高度，直到排列完所有图片

6. 监听 window.onscroll

7. 使用 document.documentElement.scrollTop 获取已经滚动的距离，使用 document.documentElement.clientHeight 来获取页面可视区域的高度，通过这二者和就是用户已经浏览的文档高度

8. 使用 offsetTop 获取最后一个图片 box 与父元素的上边距的距离，在加上最后一个图片 box offsetHeight 的一半，这两者加起来当作一个警戒线，如果步骤7计算的已浏览文档高度过了这条线，就加载新图片

9. 加载新图片其实就是将新图片box加入父容器，再调用一次瀑布流的函数，重排一次

图片轮播组件

整页滚动

三栏布局

两栏布局

sticky布局

无延迟菜单

移动端

touch 事件

touchstart: 当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发

touchmove: 当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动

touchend: 当手指从屏幕上移开时触发

300ms 与点击穿透

1. 在 touch 事件处理程序中增加 300 ms 延时

event 事件

event.touches: 当前触摸屏幕的触摸点数组

数组属性与changedTouches一致

event.changedTouches: 导致触发事件被触发的触摸点数组

event.changedTouches[0].clientX: 触摸点在视口中的x坐标

event.changedTouches[0].clientY: 触摸点在视口的y坐标

event.changedTouches[0].pageX: 触摸点在页面的x坐标(包含滚动)

event.changedTouches[0].pageY: 触摸点在页面的y坐标(包含滚动)

event.changedTouches[0].screenX: 触摸点在屏幕的 x坐标

event.changedTouches[0].screenY: 触摸点在屏幕的 y 坐标

event.changedTouches[0].target: 触摸的DOM节点

event.changedTouches[0].identifier: 标识触摸的唯一 ID

event.targetTouches: 事件目标元素上的触摸点数组

数组属性与changedTouches一致

移动端适配方案

viewport缩放

固定宽度进行留白

响应式布局

rem 布局

1px 问题

问题：由于retina屏的原因，1px 的 border 会显示成两个物理像素，所以看起来会感觉很粗

解决办法

0.5px: IOS 浏览器可以使用 0.5px 的写法，但是安卓浏览器不兼容，0.5px 就当成 0px了，所以兼容性比较差

伪类 + transform: 先用伪元素，将height设置为1，然后使用transform缩小到原来的一半

像素

分类

物理像素

CSS像素

设备像素比

屏幕

屏幕尺寸

屏幕分辨率

屏幕像素密度

通信协议

网络基础

网络模型

OSI标准模型

应用层

表示层

会话层

传输层

网络层

数据链路层

物理层

TCP/IP四层模型

应用层

传输层

网络层

网络连接层

TCP 协议

传输数据前要通过三次握手建立连接

滑动窗口

传输完成后要通过四次挥手断开连接

HTTP协议

HTTP 事务时延

1. DNS解析时延

2. TCP 连接建立时延

3. 报文传送时延

延迟确认

TCP慢启动

Nagle算法

4. 服务器处理请求时延

3种方法提升HTTP连接性能

并行连接：通过多条TCP连接发起并发的HTTP请求

持久连接(http/1.0+ http/1.1)：重用TCP连接，消除连接以及关闭时延，并且由于TCP慢启动问题，持久连接传输起来会比较快

管道化连接(http/1.1)：通过共享的TCP连接，发起并发的HTTP请求

HTTP状态码

1xx, 表示接受的请求正在处理

101，切换协议，请求者已要求服务器切换协议，服务器已确认并准备切换

2xx，表示请求正常处理完毕

200，成功，服务器已经成功处理了请求

201，已创建，请求成功并且服务器创建了新资源

202，已接受，服务器已接受请求，但尚未处理

203，非授权信息，服务器已成功处理了请求，但是返回的信息可能来自另一来源

204，无内容，服务器成功处理了请求，但是没有返回任何内容

205，重置内容，服务器成功处理了请求，但是没返回内容，浏览器应当重置页面的 form 表单

206，部分内容，服务器成功处理了部分 GET 请求

3xx，表示需要附加操作完成请求

301，永久移动，请求的网页已永久移动到新位置，服务器返回此响应会自动将请求者转到新位置

302，临时移动，请求的资源暂时驻留在不同的URI下，服务器，通常会给浏览器发送HTTP Location头部来重定向到新的新位置

303，查看其它位置，请求者应到对不同位置使用单独的GET请求来检索响应

304，未修改，自从上次请求后，请求的网页未修改过

305，使用代理，请求者只能使用代理访问请求的网页

307，临时重定向，服务器从不同位置的网页响应请求，但该响应代码与302重定向有所区别的地方在于，收到307响应码后，客户端应保持请求方法不变向新的地址发出请求。

4xx，表示服务器无法处理请求

400，错误请求，服务器不理解请求语法

401，未授权，请求要求身份验证

403，禁止，服务器拒绝请求

404，未找到，服务器找不到请求的网页

405，方法禁用，禁用请求指定的方法

406，不接受，无法使用请求的内容特性响应请求内容

407，需要代理授权，此状态代码与 401(未授权)类似，但指定请求者应当授权使用代理。

408，请求超时，服务器等候请求时超时

409，冲突，服务器在完成请求时发生冲突

410，已删除，请求的资源已经永久删除

411，需要有效长度，服务器不接受不含有有效内容长度首部的请求

412，未满足前提条件，服务器未满足请求者在请求中设置的某个前提条件

413，请求实体过大，请求实体过大，超过服务器设置的范围

414，请求的URI过长，网址过长，服务器无法处理

415，不支持的媒体类型，请求的格式不受请求页面的支持

416，请求范围不符合要求，如果页面无法提供请求的范围，服务器返回416

417，未满足期望值，服务器未满足期望请求标头字段的要求

5xx，表示服务器处理请求出错

500，服务器错误，服务器遇到错误，无法完成请求

501，尚未实施，服务器不具备完成请求的功能

502，错误网关，服务器作为网关或者代理，从上游服务器收到无效响应

503，服务不可用，服务器目前无法使用

504，网关超时，服务器作为网关或者代理，没有及时从上游服务器收到响应

505，HTTP版本不受支持，服务器不支持请求中的 HTTP版本

HTTP2

二进制分帧: HTTP/2中数据通信的最小单位是帧，请求和响应消息可能由一个或多个帧构成, 流是存在于连接中的一个虚拟通道，流可以承载双向消息，每个流都有一个唯一的整数ID；HTTP/2采用二进制格式传输数据，解析起来更高效；

多路复用：所有就是请求的都是通过一个 TCP连接并发完成。 HTTP 1.x 中，如果想并发多个请求，必须使用多个 TCP 链接，且浏览器为了控制资源，还会对单个域名有 6-8个的TCP链接请求限制，HTTP/2 中有了二进制分帧，就可以实现多路复用

服务器推送

首部压缩

HTTPS