HTML与head
・全称：Hyper Text Markup Language（超文本标记语言）
・由head和body部分组成，body是内容
・HTML5相比之前增加的新特性：
——支持简化文档类型声明，如<!DOCTYPE html>
——支持语义化标签，如header、nav、article、section、footer
——支持图像与多媒体标签，如svg、canvas、audio、video
——支持本地存储，如两storage一DB
——支持拖拽事件
元素
・a是锚元素，属性有download（下载链接）、href（链接）、rel（该文档与目标文档的关系）、target（打开位置）等
・br是换行，hr是横线，vr是竖线
・div是块级元素（会换行）；span是内联元素（不会换行）
——内联元素一般有button、img、input、span和a、i、em/strong、sub/sup、u等文本元素，块级元素为h1~h6等标题元素和div、form、p、table（ul、ol）等其它常见元素
・em斜体，b/strong加粗，u下划线，h1~h6是标题块，p是段落块
・head中的标签：
——base的href属性定义一个基准URL，若定义了多次则只算第一次定义的
——link用于引入外部CSS，如<link rel="stylesheet" type="text/css" href="mystyle.css">
——meta的属性存储元数据，如charset="UTF-8"是编码格式，name是条目，content是各条目的内容等
——title定义在鼠标悬停时显示的文字
・html是页面，style是内部CSS表，script是JS脚本
・ol是有序列表，ul是无序列表，li是列表项目
——list-style-type: 列表标记，none无，disc●，circle○，square□，decimal序数，lower/upper-alpha字母，lower.upper-roman罗马数字
・script是脚本，style是样式表，它们可以写在任意部位，但最好将样式写在元素前，脚本写在元素后以优化性能
——给script元素加async标签会使之在下载完后不等页面解析完就立即并行执行
——给script元素加defer标签可使之在文档加载完后再执行而不阻塞页面渲染，若有多个defer脚本则会依次执行
・<!--...-->是注释元素
元素的标签
・alt在资源加载不出来时显示文字
・class加载样式表，style定义内联样式
・href用于指向超链接或锚点（#+元素id）或加载CSS，加“javascript:”可运行脚本
・src用于加载图片/代码/媒体等资源
・style为内联样式
・加载资源时，单点代表同级路径，双点代表上级路径
BOM（Browser Object Model）
・Window window是浏览器BOM的顶级对象
——其它BOM和DOM都是window的子对象，如document=window.document
・其它BOM包括document.cookie、history、location、navigator、screen、弹窗等
・clientInformation和navigator以Navigator对象存储了客户端浏览器的信息
・history包含浏览器的历史，调用back/forward()可将当前页面后退/前进
・location的href储存当前页面的地址 （URL），=协议+域名/IP地址+端口号+路径+参数
——hostname：Web主机的完整域名或IP地址，域名越往后级别越高，如www.baidu.com
——pathname：当前页面的路径和文件名，如/index.html
——port：Web主机的端口号，跟在域名后面，加冒号，如:8080
——protocol：所使用的Web协议，如http:或https:
——origin：源名，=协议+域名
——search：传入的查询字符串，如“?a=1&c=2”代表{a:1, c:2}，new URLSearchParams()可将查询字符串转换成类似映射的变量
・navigator包含浏览器的一些基本信息
・screen包含有关用户屏幕的信息，如width和height
・alert(msg)弹信息窗，**confirm(msg)**弹确认窗并返回布尔值，**prompt(msg, 初始值)**弹输入窗并返回输入值
——可以在msg中加‘\n’换行
DOM（Document Object Model）
・页面对象/节点是HTMLDocument document
・document.baseURI是系统自动生成的当前页面地址
・document.body是body元素
・document.createElement()：创建元素
・document.getElementById()：根据id获取元素
・document.getElementByName()：根据name获取元素
・document.querySelector()：根据CSS选择器选择首个元素
・**document.querySelectorAll()**选择所有满足选择器的元素
・document.write()：替换当前页面的内容，可以是纯文字或元素
・parentElements/children用于获取父/子元素，parent/childNodes用于获取父/子节点
——firstChild和lastChild代表首/尾子元素/节点
——appendchild()：添加节点
——removechild()：移除节点
——replacechild()：替换节点
——insertBefore()：在某节点之前插入节点
・DOM元素的HTML标签属性是attribute，其JS对象属性是property
——标准属性的两者是同步的，自定义属性则不同步
事件
・形如onclick的是各种各样的事件，给它赋个回调函数就能用事件触发相应的动作
——event是默认参数，储存了事件的具体信息
——常常需要使用event.preventDefault()/prevent（Vue）来阻止浏览器的默认行为
——stopPropagation()/stop（Vue）可以阻止事件冒泡，即防止子元素的事件也被父元素捕捉
——拖拽前，需要将被拖元素的draggable设为true
——为了防止ondrop失效，必须用preventDefault阻止放置元素的ondragover事件的默认阻止放置行为
布局方式
・浮动
・定位
・分栏布局
・弹性布局：
——适应性强，在做不同屏幕分辨率的界面时非常实用
——可以随意按照宽度、比例划分元素的宽高
——可以轻松改变元素的显示顺序
——弹性布局实现快捷，易维护
・响应式布局：指页面能够根据不同屏幕尺寸和分辨率自动调整，从而在不同设备（如手机、平板、电脑等）上提供良好用户体验的布局方式
性能
・重排/回流：DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，并重新生成布局，同时也会重绘，会破坏用户体验
・重绘：元素的外观改变而布局不变，此时只需重新绘制元素外观，其性能优于重排
图像
・base64编码将二进制数据（比如图片）编码成6位64进制的可打印字符串，从0~64依次对应A~Z、a~z、0~9、+、/
——和二进制相比的特点是以可打印字符编码，用于http协议是因为其是文本协议，其URL和数据只能传输可打印字符；ASCII码中有些字符不可打印，所以不用
——64进制有6位，而字节有8位，所以规定编码最小单位是三个字节→四个字符，最后一个字节剩下的全空位补=号
・canvas类似于画图，和svg相比是像素化且有损的
・**sprite（精灵图）**用于将大图分成若干个小图后拼接在一起
——sprite可以缓解加载时间过长从而影响用户体验的问题
——虽然减缓了页面的加载速度，但也缓解了服务器的压力
——有效减少服务器接收和发送请求的次数，从而达到提高页面的加载性能
・**svg（矢量图）**是基于XML的直接描述图像形状的文本文件，可以直接当元素使用
——里面可以嵌形状标签，如rect、circle、ellipse、line、text等
——也可以嵌路径path，指令有M移动、L划线、V竖线、H横线、A圆弧、Q贝²、C贝³、Z闭合等
CSS
・全称：Cascading Style Sheets（层叠样式表）
・CSS语法格式一般为“选择器{属性：值；属性：值；属性：值……}”
・CSS中的注释为/…/
・在css中导入其它css的方法是@import url(css/example.css);
选择器
・#id：按元素id名选择
・.class：按元素的class选择
・[attr]：选择含某属性的元素
・[attr=“abc”]：选择某属性的值等于某字段的元素，|=是等于或开头；^=是开头，*=是包含子串，~=是包含单词，$=是结尾
・div：按元素标签（类型）选择
・div p：选择div内包含的所有p
・div>p：选择父元素是div的p
・div+p：选择跟在div之后的第一个同级p
・div~p：选择跟在div之后的所有p，无论是否同级
・*：通配选择器，选择所有元素
・规则之间可以直接用空格串联，并联规则用逗号“,”
・不同级选择器优先级：!important > 行内样式（style标签） > style元素
・同级选择器优先级：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
伪类和伪元素
・伪类以冒号开头，且紧跟在选择器后面（无空格）
・链接伪类：
——:link：选择未访问的链接
——:visited：选择已访问的链接
・交互伪类：
——:hover：选择鼠标划过的元素
——:active：选择被激活（被点击）的元素
——:focus：选择获得焦点的输入框等元素
・:checked/enabled/disabled：选择被选中/启用/禁用的表单元素
・:empty为没有子元素的元素
・:first-child：满足要求且在父元素中排第一个的元素
——同理，:last-child是最后一个，:nth-child(x)是第x个，:nth-last-child(x)是倒数第x个
——n可以做计数器用，从零开始计，比如nth-child(2n+2)为选择第2、4、6、……个子节点
・:first-of-type：满足要求的第一个元素，:last、:nth、:nth-last同理
・:not()：选择不符合某条件的元素
・伪元素以双冒号开头，不过单冒号也可
・::before/after可在某元素之后插入元素
・::first-letter是首字母，::first-line是首行
・::selection是被用户选中的文本，设了之后会替换掉默认的蓝背景反色样式
属性
・all：同时控制所有属性的值，一般后面只跟initial或inherit
・background-color是背景颜色，-size是大小，-repeat是重复（repeat-x/repeat-y）
・将background-color或border-color的color去掉或换成image可嵌入图像
・background-repeat是背景重复
・border(-top/bottom)(-left/right)(-color/radius/style/width)：边框样式，纯border属性等于线宽+线型+颜色（顺序可调）
——+image是边框图像
——+top/bottom/left/right是边框单侧属性，+color/style/width对应颜色/样式/线宽
——+radius：圆角半径，加一个值是四角，两个是↖↘/↗↙，三个是↖/↗↙/↘，四个是↖/↗/↘/↙
——对于可以配四个参数的属性，一个值是四周，两个是↕/↔，三个是↑/↔/↓，四个是↑/→/↓/←
・box-shadow是阴影效果，含颜色和横纵偏移量、若有更多值则为模糊半径和扩张量，inset表内阴影
・box-sizing: content-box是标准盒子模型，盒子宽=左border+左padding+content+右padding+右border，高同理
——怪异盒子模型（box-sizing: border-box）中，盒子总宽由width决定，总高同理
・和文本有关的属性：
——color是文字颜色
——text-align：left左对齐，center居中，right右对齐，justify两端对齐
——text-decoration：none无，underline下划线，line-through中划线，overline上划线
——text-transform：capitalize首字母大写，uppercase全大写，lowercase全小写
——line-height是行间距
——letter-spacing是字间距，word-spacing是词间距，text-indent是文本首行缩进量
——text-shadow是文本阴影，含颜色、横纵偏移量、模糊半径（类似box-shadow）
・display: flex是弹性盒子
——弹性盒子默认以内联形式（宽度方向、横行）排列元素
——弹性盒子中，align-items: flex-start/center/flex-end让同一排的子元素纵向置顶/垂直居中/置底，也可用baseline和stretch
——align-content同理，用于配置同一列的元素的纵向排法
——align-self：start/center/end让自己置顶/垂直居中/置底，baseline对齐基线，stretch拉伸高度
——子元素有flex: 1时可以占全剩余空间；若多个元素有flex，它们按flex系数分配剩余空间
——flex-basis可以控制flex子元素的宽或高（取决于flex-direction），且优先于相应的width/height
——flex-direction默认是row，改成column则主轴变纵轴，副轴变横轴，其它配置的横竖交换
——flex-flow = flex-direction + flex-wrap
——flex-grow和flex类似，但它的系数作用于元素内文字以外的剩余空间
——flex-shrink默认为1，它用于按比例消除子元素溢出的部分
——flex-wrap：wrap是让弹性盒元素在必要的时候拆行，wrap-reverse上下颠倒
・弹性盒子的justify-content：配置同一行元素的横向排法
——left是居左，center是居中，right是居右，start是行首，end是行尾
——同样是均布元素，space-around是_0__0__0_，space-between是0_0_0，space-evenly是_0_0_0_
・display属性可以转换元素的排版形式
——默认的display:block是子元素成块，inline是子元素内联，none是让元素消失
——display:list-item是子元素成列表，table是成表格，table-row/table-column是成表格行/列
・和浮动有关的属性：
・float:(left/right)使元素居左/右，而其它元素则围绕在其周围
・clear:(left/right/both)：是否允许元素左/右侧有浮动元素
・和字体有关的属性：
——font-family是字体，可以写多个作备用，如font-family: 宋体, 楷体
——font-size是字体大小
——font-weight是粗细（如数值100~900或bold加粗）
——font-style是样式（如自带斜体italic，强行斜切oblique）
——font-variant：small-caps是将小写字母变成小型大写字母
・margin是外边距，padding是内边距
——若有两个值，加auto表上下/左右居中
——+top/bottom/left/right可以单独控制某个边
・opacity是改变透明度
・outline是第二边框（外边框），不能套成outline-top等，可以套成outline-color等
・position默认值是static，改成absolute即可控相对父元素的位置
——也可调成relative，意为相对static算出的位置调整
・text-align：改变文字水平位置（居左居中居右）
・top/bottom/left/right：绝对坐标模式下某边对父元素的距离，若width未定却设了left和right，则元素width只取决于left和right，高度同理
・transition: 属性 时长 过渡效果 延时：用于在交互时在默认状态和伪类（如hover）之间产生某属性的过渡动画，交互结束时会自动退回原状态
・vertical-align: middle：掌管内联元素（而不是块元素）的垂直居中
・visibility改为hidden会隐藏元素并使之无法交互，但占据的位置不变，不回流
・white-space属性掌管空格和回车，默认值normal是空格溢出换行，nowrap是直接溢出，pre是回车换行，pre-wrap是空格溢出+回车换行，pre-line是空格溢出+回车换行并将每行左对齐
——new-line: preserve/collapse单独掌管回车换行，space-and-tab: preserve/collapse单独掌管空格换行，text-wrapping: wrap/nowrap单独掌管溢出换行
・word-wrap: break-word也是自动换行
・width是宽，height是高
・z-index：层级顺序，z-index大的元素会盖住z-index小的元素
值
・%是相对值，px是像素，vw/vh是视口百分比，也可以用cm、mm、in等现实单位（但不准），0可以不加单位
——em是相对父元素的字体（字母m的宽度）大小，rem是相对根元素的字体大小
——字体大小默认是12磅（12pt）
・颜色是颜色名/#+六位十六进制数/颜色函数
・大多距离相关属性的值可以取负，padding取负无效
・像素值px和等多数值都接受小数，但显示效果区别不大
・auto：自动计算，若margin-left和margin-right都是auto，则元素会被居中
・!important：优先应用，但要写成最后一个值
・initial：默认初始值
・inherit：从父类继承属性值，所有元素都适用
・attr()：取元素的某个属性的值
・calc()：可以将不同单位的数值搁一起计算，但运算符前后必须带空格
・可以使用max()和min()，比较时相对值会按属性转换成绝对值，也可用minmax()截断
・颜色函数包括rgb()/rgba()/hsl()/hsla()，rgb为红绿蓝，hsl为阈饱亮，a为透明度
・revert：将CSS属性的值重置为用户代理（通常是浏览器）的默认样式，而不是CSS规范定义的初始值
・url()：在样式表中嵌入或引用外部资源，甚至是元素或html页面
・unset：若属性为继承属性则变为inherit，否则变为initial
・在给元素上色时，可使用conic/linear/radial-gradient()作扇形/线性/径向渐变，但只能作用于background-image等图像属性中
——线性渐变方向默认为0deg（从上到下），90deg为从左到右，以此类推
——可以在每个渐变颜色后加数值作“关键帧”
——前置repeating-代表周期性渐变
变换、过渡与动画（CSS3）
・使用transform属性进行变换，支持三维变换
・transform-origin可更改变换原点
・平移形如transform: translate(10px, 10%)，也可使用translateX等平移单轴，下同
——translate中的百分比是相对自身的大小
——平移的原点在左上角，旋转的原点在元素中心
——相对坐标下用margin调左上+translate微调即可掌控含文字元素在父元素内的位置
——绝对坐标下用top/left调左上+translate微调
・旋转（rotate）默认绕元素中心的z轴转，但旋转是顺时针，单位为deg
・放缩（scale）的参数是倍数，所以无单位
・斜切（skew）一个参数是x切，两个参数是x-y切，单位为deg
・相应的三维变换函数为translate3d、rotate3d、scale3d
・perspective和perspective-origin两函数掌管透视
・matrix()函数掌管2D坐标变换，需要六个参数，前四个是旋转矩阵，后两个是斜切
——同理，matrix3d()函数掌管3D坐标变换，但需要16个参数
・backface-visibility: visible/hidden定义元素不面对屏幕时是否可见
・animation属性用于配置动画，其子属性为：
——animation-name：动画的名称
——animation-direction：默认normal，reverse倒放，alternate正倒循环，alternate-reverse倒正
——animation-delay：动画延迟时间，单位为s
——animation-duration：动画持续时间，单位为s
——animation-iteration-count，动画的重复次数，默认是1，infinite为循环播放
——animation-timing-function：默认ease，加-in/-out控制渐入渐出，linear是线性
——@keyframes a x%属性用于配置动画a在x%处的关键帧
其它
ECharts
devOps
jQuery
nodejs
Webpack
git
・git init：在当前目录初始化一个新的Git仓库
・git clone ：克隆一个远程仓库到本地
・git add ：将文件添加到暂存区
・git commit -m ：提交暂存区的文件到本地仓库
・git push origin ：将本地分支推送到远程仓库
・git pull origin ：从远程仓库拉取最新的代码到本地分支
・git branch：显示所有本地分支
・git branch <分支名>：创建一个新的本地分支
・git checkout ：切换到指定的分支
・git merge ：将指定分支的更改合并到当前分支
・git status：显示工作区和暂存区的状态
・git log：显示提交历史记录
・git diff ：显示指定文件的差异
・git remote -v：显示远程仓库的详细信息
・git stash：将未提交的更改保存到临时存储区
・git reset ：撤销指定的提交
・git revert ：倒退回前一commit，但并未删除之前的commit，而是创建了新的commit
严格模式
・打“use strict”启动
・不允许使用全局对象，不允许直接删除变量
・不允许用eval、caller、callee
数据结构
・队列先进先出，栈先进后出
——用两个队列模拟栈：先将队列中的元素倒入栈1，再将栈1中的元素倒入栈2，栈2的出栈顺序=出队顺序
・树
——前序遍历根左右，中序遍历左根右，后序遍历左右根
——二叉搜索树是满足左子≤父≤右子的树，其搜索效率平均O(logn)，最坏变成链，即O(n)
——**平衡二叉树（AVL）**中两子树的差不超过1，且两子树也是平衡二叉树，故搜索效率为O(logn)，不足之处是要旋转多次才能平衡
——红黑树是自平衡但不完全平衡的二叉查找树，根节点黑，黑红相邻，其优点是搜索效率为O(logn)且旋转次数大大减少（插入最多旋转两次，删除最多旋转三次）
——完全二叉树是宽度优先排序的，其中满二叉树的最后一行“满”
——堆是特殊的完全二叉树，其中大顶堆（小顶堆）是父节点比子节点值大（小）的堆
——哈夫曼树是二叉树，叶子结点是各元素，父元素等于两个子元素之和，其带权路径长度=∑叶子结点*根叶路径长度=∑非根节点值之和
——Trie树是把单词中的字母作为节点的26叉树
——B树是一种平衡的多路查找树，B+树改良了前者的回旋查找问题
——n阶B树的定义：
——每个节点最多有n个子节点；每个内部节点最少有⌈n/2⌉个子节点
——如果根节点不是叶子节点，那么它至少有两个子节点
——具有m个子节点的非叶子节点拥有m-1个键
——所有叶子节点必须处于同一层上
——B+树：……
・哈希表（散列表）
——……
计算机系统
・块和页一一对应
・相关临界区的数量=并发数
Linux
・linux的路径由撇表示，根路径是“/”（跟安卓很像）
・linux的输出默认指向显示器，即“输出到显示器上”
浏览器运行原理
访问页面
・URL解析：浏览器首先会解析输入的URL，并提取其中的协议、域名、端口号、路径、参数等部分
・DNS解析：一旦浏览器获取了目标服务器的IP地址，它就可以通过该地址与服务器根据相应协议建立HTTP/HTTPS+TCP/SSL/TLS连接
——如果输入的URL包含域名而非IP地址，浏览器会进行DNS解析，将域名解析成相应的IP地址
——DNS解析通过向域名服务器发送查询请求，并接收服务器返回的IP地址来完成
——DNS解析时，若本地缓存有相应IP地址则返回，否则请求本地DNS服务器查找IP地址，若也无缓存则继续向上请求顶级DNS服务器查找权限DNS服务器地址，本地DNS再请求权限DNS服务器查找IP地址
・发送HTTP请求：先和服务器建立TCP连接，连接建立完成后浏览器会向服务器发送HTTP请求
——这个请求包含了之前解析得到的URL、请求方法（GET、POST等）、请求头部（包含浏览器和客户端的信息、所需的数据格式等）以及请求体（对于POST请求，通常包含用户提交的数据）
服务器处理请求并返回响应：服务器收到浏览器发送的请求后，会根据请求的内容进行相应的处理。这可能涉及到从服务器上获取请求的资源（如HTML文件、图片、视频等），执行数据库查询、处理用户提交的数据等操作。处理完成后，服务器会生成一个HTTP响应，包含了响应状态码（指示请求的成功或失败）、响应头部（包含服务器信息、内容类型、缓存控制等）以及响应体（所请求资源的实际内容）。
・接收并渲染响应：
——浏览器接收到服务器返回的HTTP响应后，会根据响应的内容进行相应的处理；如果响应的内容是HTML，浏览器会解析HTML并构建DOM树
——同时解析CSS，生成样式表7
——然后将DOM树根据样式表计算出节点的渲染树
——然后计算每个节点的布局，包括节点在屏幕上的坐标
——最后遍历渲染树的节点，调用GPU绘制各个元素
・断开连接：一旦浏览器完成了对响应的处理，它会关闭与服务器的TCP连接
——在HTTP/1.1中，连接通常会保持一段时间以便于后续的请求，这被称为“持久连接”
——在HTTP/2及更新的版本中，多个请求可以通过同一个连接并行处理以提高性能
——访问一个网站时，可能涉及不止一次的HTTP请求和响应的交互过程
浏览器存储
・前端的浏览器缓存可分为强缓存、协商缓存两大类或cookie、Storage、indexedDB三种
——http1.0中，强制缓存通过Expires响应头实现，其存储了资源过期时间；浏览器可直接读取未过期资源中的数据，若资源已过期则需重新请求获取资源
——http1.1中，强制缓存通过Cache-Control响应头实现，其值可以是private（客户端可以缓存）、public（客户端和代理服务器均可缓存）、max-age=x（缓存的资源在x秒后过期）、no-cache（需要使用协商缓存验证是否过期）、no-store（不可缓存）
——若同时出现，Cache-Control会覆盖Expires
——浏览器在首次请求时才会跟服务器通信并从返回响应头获取强缓存过期时间，读取缓存资源时不会发出任何请求
・协商缓存每次读取数据时都需要跟服务器通信，并且会增加缓存标识
——在第一次请求服务器时，服务器会返回资源并且返回一个资源的缓存标识（http1.0是last-Modified，http1.1是etag），一起存到浏览器的缓存数据库
——当第二次请求资源时，浏览器会首先将缓存标识（http1.0是If-Modified-Since，http1.1是含etag的If-None-Match）发送给服务器，服务器拿到标识后判断标识是否匹配；如果不匹配，表示资源有更新，服务器会将新数据和新的缓存标识一起返回到浏览器；如果缓存标识匹配，表示资源没有更新，并且返回304状态码，浏览器就读取本地缓存服务器中的数据
・localStorage只在同源窗口之间共享，关闭浏览器后也能保留
・sessionStorage在不同窗口之间不共享，在关闭浏览器后失效
——Storage对象的值必须是字符串且可以达到数MB，cookie只有几KB
・document.cookie存储于本地，总是包含在同源的http请求中，且不能跨到其它域名使用
・cookie数据不如Storage安全，若设有期限则关闭浏览器后还在，但可能会过期或被用户删除
——若不设期限，cookie默认在会话结束（关闭浏览器）时消失
・数据库缓存： indexedDB支持大存储容量，可以当本地数据库使用，以键值对存储数据
——并且支持异步读取，可避免阻塞主进程
——它是非SQL的数据库，而innoDB是基于MySQL的服务器数据库引擎
节流与防抖
・节流（技能冷却）：在触发某事件后的固定时间内不允许再触发
——使用场景：滚动加载页面、高频点击和拖拽等鼠标/手势事件
・防抖：在同一时间段内只允许触发一次事件，若重复触发则需重新计时
——使用场景：点击按钮（如搜索、提交表单）、调整窗口等
・两者都可用setTimeout实现，都可降低回调执行频率，节省计算资源
浏览器垃圾清理
・标记清除
——是浏览器中常见的垃圾回收方式，当变量进入执行环境时就标记其为“正在使用”，此时变量不能被回收；当变量离开环境时，就会被标记为“离开环境”，变量就会被内存释放
——垃圾收集器运行时会将内存中的所有变量都加上标记，然后再去掉环境变量以及被环境变量引用的标记，之后认为环境中的变量已经无法访问到这些被标记的变量，标记的变量将准备删除；最后垃圾收集器清理、销毁那些带标记的变量，回收它们所占用的内存空间
・引用计数
——使用相对较少，即跟踪记录每个值被引用的次数；若声明了一个变量并将其赋值为引用类型变量时，则该值的引用次数就是1；若又给变量赋另外一个值，则引用类型值的引用次数就减1。当其引用次数变为0时，说明这个变量不会再被使用，因此在下一个垃圾回收周期中，该变量所占有的内存空间就会被释放出来
浏览器同源与跨域
・同源策略（SOP/Same-Origin Policy）是浏览器最核心、最基本的安全功能，用于防止恶意的web前端攻击
——同源是指“域名，协议，端口相同”，不同源的即为跨域
——同源策略是指浏览器只允许脚本读取来自同源的窗口和文档的属性
・浏览器皆不支持跨域，除非使用CORS（后端提供的跨域资源共享）、jsonp（仅GET请求）、postMessage、iframe跨域、 nginx代理跨域、nodejs中间件跨域、WebSocket协议跨域等
——跨域资源共享策略（CORS）允许浏览器向跨域服务器发送ajax请求，克服了ajax只能同源使用的限制
——Access-Control-Allow-Origin：向服务器说明请求的源名（协议+域名）
——jsonp是利用script的src标签没有跨域限制的特性来实现的
・浏览器不准跨域脚本读取cookie、localStorage、indexDB，不准获取DOM和JS对象、不准发送AJAX请求
・跨域攻击方式有：
・跨站脚本攻击（XSS）：向web页面插入恶意脚本，它在用户在浏览网页时触发
——防御措施包括验证用户提交的内容（如URL、查询关键字、HTTP请求头的长度或格式）、校验后台输入以及使用https协议
・SQL注入：攻击者向服务器提交恶意sql代码，使之被程序执行
防御措施：包括在JAVA中使用预编译PreparedStatement、对数据库特殊字符进行转义处理或编码转换、在应用发布前使用专业的sql注入检测工具进行检测，及时发现和修补sql注入漏洞
・跨站点伪造请求（CSRF）：诱导用户进入第三方网站，第三方网站会向被攻击网站发送跨站请求，它利用用户在被攻击网站获取的注册凭证绕过后台用户验证，以冒充用户攻击其它网站
——防御措施为给用户分配token或采用post请求以增加攻击难度
・钓鱼攻击：用户点击不明链接后会被导向一个似是而非的非法网站，它可能会骗取用户信任、窃取用户资料
——防御措施为审核所有重定向操作，以避免重定向到钓鱼网站，比如列将允许重定向的url加到白名单中，拒绝重定向到不在白名单上的域名；或者在合法的url上加上token，在重定向时进行验证
・DDos攻击：利用大量的请求造成资源过载，导致服务不可用
——防御措施：限制单IP请求频率、防火墙等防护设置禁止ICMP包等、检查特权端口的开放
计算机网络
七层网络模型（OSI参考模型）
・从下到上：
・物理层：负责在物理媒介上透明的传输原始比特流，确保比特流能够在通信媒介上稳定、可靠地传输，而不对传输的数据进行任何形式的处理，主要关注数据的传输速率、电压等物理特性，
——设备含中继器、集线器、网线、调制解调器等
——有RS-232、RS-485等协议
・数据链路层：主要负责提供从物理层到网络层的服务，最基本的服务是将源自物理层来的数据可靠地传输到相邻节点的目标机网络层，包括实现网卡接口的网络驱动程序，以处理数据在物理媒介上的传输
——在该层工作的设备含交换机和网桥
——帧同步的校验方式有字节计数、字符填充和比特填充等
・网络层：负责处理数据包的路由和寻址 ，包含了IP协议；它使用IP地址来标识不同的计算机和设备，并确定数据包的最佳路径以在网络中传输
——IPv4和IPv6是两个常见的网络层协议，路由器是在这个层次工作的设备，它们负责将数据包从一个子网传递到另一个子网，直到达到目标设备
——设备含路由器和防火墙
・传输层： 为两台主机上的应用程序提供端到端的通信，负责数据的可靠传输和流量控制，它包含了TCP和UDP两个主要协议，SSL和TLS运行在TCP上
——设备含路由器和网关
・会话层：负责建立、管理和终止会话，为应用程序之间的通信提供服务；保证了通信的可靠性和有效性，使得不同终端的程序之间能够进行有效的数据交换，如SQL
・表示层：处理数据的表示格式，确保一个系统的应用层数据可以被另一个系统理解，涉及编解码、加密解密、压缩解压等方面，如ascii、base64、jpeg、mpeg、zip等
・应用层： 直接为用户提供应用服务，处理文件传输，名称查询和网络管理等应用程序逻辑，包含HTTP/HTTPS、FTP、SMTP等协议
四层网络模型（TCP/IP模型）
・从下到上是数据链路层、网络层、传输层、应用层，内容同上
常见互联网协议及其原理
HTTP与HTTPS协议
・HTTP是一种用于传输数据的应用层协议，基于TCP/IP通信协议来传递数据
・通信方式是客户端发送一次请求数据，服务器就回复一次响应数据
・请求=请求行+请求头+空行+请求体
——请求行=请求方法+URL+HTTP版本（如HTTP/1.1）
——URL=协议+域名/IP地址+端口号+路径+参数
——请求头以键值储存了与浏览器和请求有关的信息，如User-Agent：浏览器类型和版本，Accept：客户端能够接受的内容类型，Content-Type：请求体的媒体类型，以及Cookie
——请求体包含要发送的数据
・GET请求用于从服务器获取数据，产生一个TCP数据包，浏览器通过HTTP把请求头和请求体一并发送出去，服务器响应200（OK）并返回数据
——GET中请求的数据直接跟在URL后面（即“?参数=值&参数=值…），所以GET较不安全
——GET的请求体一般为空
・POST请求用于向服务器提交数据，以执行某些操作，如注册、登录、提交表单、上传文件等
——它产生两个TCP数据包，浏览器先发送请求头，服务器响应100（continue），浏览器再发送请求体，服务器响应200（OK）并返回数据
——POST把数据放在HTTP的包体内，其请求体相对安全
・除此以外，GET和POST的区别还有：
——浏览器限制了GET请求中提交数据的大小， POST理论上没有限制
——GET请求会被浏览器主动缓存，而POST不会，除非手动设置
——PUT请求用于向服务器上传新的资源或更新已有资源，它将请求的主体部分存储在服务器上指定的URL处
——DELETE请求用于请求服务器删除指定的资源，而不会对其他资源产生影响，是一种安全的操作
——GET、PUT、DELETE是幂等的，即相同的请求有相同的效果，而POST不是幂等的
・HTTPS+SSL/TLS协议：
——客户端向服务器端发起SSL/TLS连接请求，其信息包括协议类型与版本、支持的加密算法和一个随机数
——服务器把包含公钥的证书发送给客户端，且保存唯一的私钥
——客户端使用机构颁发的证书对公钥进行加密（SSL对称加密，TLS非对称加密），并发送给服务器端
——服务器使用私钥对客户端发来的秘钥进行解密，产生对称或非对称加密的连接
——后续数据传输中，服务器和客户端双方用秘钥对数据进行加密解密，可以保证在数据收发过程中的安全，即是第三方获得数据包，也无法对其进行加密，解密和篡改
・证书使用数字签名和摘要进行防伪
——摘要：通过hash算法对传输的内容计算出的一段固定长度的串
——数字签名：将发送方的私钥对摘要进行加密的结果
——SSL/TLS协议的基本思路是采用公钥加密法，也就是说，客户端先向服务器端索要公钥，然后用公钥加密信息，服务器收到密文后，用自己的私钥解密
・HTTP和HTTPS对比：
——URL以http://或https://开头
——HTTP是一种不安全的协议，数据传输是明文的，容易被窃听和篡改
——HTTPS在TCP上运行，通过SSL/TLS协议加密数据传输，可防止数据被窃听和篡改，提供了更高的安全性
——SSL/TLS协议使用公钥加密和私钥解密的方式，保证数据在传输过程中的机密性和完整性，证书则可防止服务器被冒充
——HTTP默认使用端口80进行通信，而HTTPS默认使用443端口
——总的来说HTTPS比HTTP 更安全，适用于对数据传输安全性要求较高的场景，如网上支付、用户登录等
TCP/IP
・TCP是面向连接服务，其通信方式是全双工通信，提供的服务可靠，但只能一对一通信
・三次握手：
——1：客户端CLOSED，服务器LISTEN→客户端发送标志位SYN=1，值seq=a的数据包给服务器端，变为SYN_SENT状态，等待服务器端确认
——2：服务器端收到数据包后，发送SYN=1，ACK=1，ack=a+1，seq=b的数据包给客户端请求建立连接，变为SYN_RCVD状态
——3：客户端检查数据包后，发送ACK=1，ack=b+1的数据给服务器并变为ESTABLISHED状态，服务器检查数据包后，若数据正确则变为ESTABLISHED状态，表示完成三次握手，允许客户端与服务器端之间传输数据
・传输时：若一方发送"seq=x,ack=y"，且数据长为z，则另一方会回复"seq=y,ack=x+z"
——若先前无ack，则seq为随机数，否则seq会回复的ack；握手和挥手时的数据长度z可看作1
・四次挥手：
——1：客户端发送FIN=1，seq=a并变为FIN_WAIT_1状态
——2：服务器收到FIN后发送ACK=1，ack=a+1，seq=b并变为CLOSE_WAIT状态，客户端收到后变为FIN_WAIT_2 状态，继续等待服务器的FIN报文
——3：服务器端确定数据发送完成后，向客户端发送FIN=1，ACK=1，ack=a+1，seq=c并变为LAST_ACK状态，告诉客户端数据已发完，准备关闭连接
——4：客户端收到报文后会发送ACK=1，ack=c+1，seq=a+1并变为TIME_WAIT状态，如果服务器没有收到ACK则会重传；服务器端收到ACK后即断开连接（变为CLOSED），客户端则会等待2MSL（Maximum Segment Lifetime，报文最大生存时间），若此期间没有收到回复，则证明服务器端已正常关闭，于是客户端也会关闭连接并变为CLOSED，完成四次握手
・连接保障方式：
——建立连接（标志位）：通信前确认通信实体存在
——序号机制（序号、确认号）：确保了数据是按序、完整到达数据校验（校验和）：CRC校验全部数据。
——超时重传（定时器）：保证因链路故障未能到达数据能够被多次重发。
——窗口机制（窗口）和拥塞控制：提供流量控制，避免过量发送。
・为什么等待2MSL：
——客户端发送最后一个ACK包之后，需要等待一段时间以确保这个ACK包已经顺利被服务器接收到并处理完毕
——防止和新创建的连接混淆：若新旧连接的端口和IP地址相同，且旧连接的某些信息没有及时清除，就可能产生数据混乱的情况，服务器会以为旧连接重新启动了
UDP
・属于TCP/IP类的无连接的传输层网络协议
・提供了一种更快，可以多对多通信，但不可靠的数据传输服务
・不提供数据包的顺序保证、错误检测和恢复等机制
・适合于对实时性要求较高但可以容忍一些数据丢失的应用场景，如直播和网游等
Websocket
……
HTTP状态码
・1字头是请求中：包含100：状态正常，客户端可以继续发送请求或忽略这个响应……
・2字头是请求处理成功：
——包含200 OK、204返回无主体内容报文、206部分处理GET请求（常见于断点续传或分块下载）、201 Created、202 Accepted、203 Non-Authoritative Information、205 Reset Content、206 Partial Content、207 Multi-Status……
・3字头是重定向，需要进行附加操作以完成请求：
——300 Multiple Choices、301永久重定向、302临时重定向到GET、303只允许临时重定向到GET、304 Not Modified（请求报文首部的条件不满足）、307临时重定向非POST请求到GET、305 Use Proxy、306 Switch Proxy……
・4字头是客户端请求错误，服务器无法处理请求：
——包含403请求被拒绝、404找不到请求的网页、400请求报文中存在语法错误、401认证失败、402 Payment Required、405 Method Not Allowed、406 Not Acceptable、407 Proxy Authentication Required、408 Request Timeout、409 Conflict、410 Gone……
・5字头是服务器错误：
——包含500服务器执行请求时出错、503服务器因超载或维修而暂时无法处理请求、501 Not Implemented、502 Bad Gateway、504 Gateway Timeout、……
进程与线程
・分为新建态、终止态、运行态、就绪态、阻塞态
・新建态开始，运行态可以走到其它各态，新建/运行/阻塞可以走到就绪，终止态结束
・进程是资源分配的基本单位，对应可执行程序，运行一个程序会创建一个或多个进程，并在CPU内并行
・线程是资源调度的基本单位，也是程序执行的基本单位，是轻量级的进程；每个进程中都有唯一的主线程，但各线程在进程内并发执行，且可互相读取数据
——主线程和进程是相互依存的关系，主线程结束进程也会结束
・协程是用户态的轻量级线程，线程内部调度的基本单位，同时只能执行一个，需由用户手动切换
——进程和线程的切换方式都是用户态→内核态→用户态，由操作系统切换，由内核栈调用；协程只有用户态，由用户栈调用
Threejs相关的啸问题
・在Threejs里用到了哪些几何体（Geometry）？
——基本几何体BoxGeometry、SphereG、CylinderG、ConeG；平面PlaneG、平面图形ShapeG与柱体ExtrudeG、帮助网格EdgesG和边框网格WireframeG；自定义形状的BufferG ……
・在Threejs里用到了哪些材质（Material）？
——线框的LineBasicMaterial、纯色的MeshBasicMaterial，反光的MeshPhongMaterial，为天空盒子做渐变色的ShaderMaterial……
・Phong模型是怎么回事？
——该模型是将环境光，镜面反射和漫反射得到的三种光叠加在一起产生了模型明暗交替的效果
——三种光都受到相应的系数、光照颜色和材质颜色的影响
——环境光在各点处颜色相同；镜面反射与入射方向、相机方向和该点粗糙度有关；漫反射与入射方向和该点法线方向有关
扫一扫
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
