JavaScript 简记2

1、从输入URL到渲染出整个页面的过程
（1）DNS解析URL
DNS解析的过程就是寻找哪个服务器上有请求的资源 因为IP地址不容易记忆 一般会使用URL域名作为网址 DNS解析就是把域名翻译成IP地址的过程
①先在本地DNS缓存查看有没有该域名对应的IP地址 有直接跳出 没有接着向下查找
②向根DNS服务器询问域名对应的IP地址
③向顶级DNS服务器询问对应的IP地址
④向权威DNS服务器询问对应的IP地址
⑤向二级DNS服务器询问对应的IP地址
⑥接收到IP地址后会把IP和域名的对应关系放在本地DNS缓存方便下次访问
（www.baidu.com中一级域名是baidu.com 二级域名是一级域名下面的主机名 它是在一级域名前面加上一个字符串）
（2）浏览器发送请求与服务器交互的过程
①首先利用TCP协议通过三次握手与服务器建立连接
②浏览器根据解析到的IP地址和端口号发起http的get请求
③服务器收到http请求后 开始搜索html页面 并使用http返回响应报文
④若状态码为200 表示响应成功 浏览器收到html页面之后开始进行页面的渲染
（3）浏览器对接收到的html进行页面渲染的过程
①浏览器根据深度遍历的方式把html节点遍历成dom树
②将css解析成cssDOM树
③将dom树和cssDOM树构造成render树
④js根据得到的render树计算所有节点在屏幕中的位置 进行布局（回流）
⑤遍历render树并调用硬件API（应用程序编程接口）绘制所有节点
2、重绘(repaint)和重排(reflow)
重绘不一定需要重排 但重排必然导致重绘
引发重排：①添加删除可见的dom ②元素位置的改变 ③元素尺寸的改变 ④页面渲染初始化 ⑤浏览器窗口尺寸的改变 ⑥当获取一些属性时 浏览器为了获取正确的值也会发生重排 这些属性包括offsetTop offsetLeft offsetWidth offsetHeight scrollTop scrollLeft scrollWidth scrollHeight clientTop clientWidth clientLeft clientHeight getComputedStyle
优化：①不要一条一条的修改dom的样式 可以先定义好css的class 然后修改classname
②不要把dom节点的属性值放在一个循环里当成循环里的变量
③为动画的HTML元件使用fixed或者absolute避免reflow
3、display position float的优先级
display>position>float
因为在display的值为none的时候position的任何值都无效 当position为absolute和fixed的时候float也会无效
4、css的三大特性——继承、优先级和层叠。
优先级：! important>行内样式>ID选择器>类选择器>标签>通配符>继承>默认属性。
①行内样式就是把样式直接写在元素内<div style="color:blue;"><?div>
②标签选择器 body div p ul li
③ID选择器 id
④类选择器 class
⑤全局选择器 *
⑥组合选择器 .div .li （注意两个选择器用空格隔开）
⑦后代选择器 ul li
⑧子选择器 ul>li
⑨同胞兄弟选择器 hl+p紧接着的第一个p元素 hl~p后面的所有p元素
⑩伪类选择器 a:link a:hover a:vistied a:active
5、http是一个属于应用层的面向对象的协议
http协议的五大特点：支持客户/服务器模式；简单快速；灵活；无连接；无状态。
①无连接：无连接的含义是限制每次连接只处理一个请求 服务器处理完客户的请求 并收到客户的应答后 就断开连接 采用这种方式可以节省传输事件
早期这么做的原因是http协议产生与互联网 因此服务器需要同时面向全世界数十万百万客户端的网页访问 但每个客户端与服务器之间交换数据的间歇性较大 大部分通道实际上会很空闲 无端占用资源 因此http的设计者有意利用这个特点将协议设计为请求时建立连接 请求完释放连接 以尽快将资源释放出连服务其他客户端
但随着时间的推 网页变得原来越复杂 里面可能嵌入了很多图片 这时候每次访问图片都需要建立一次tcp连接就显得很低效 后来 keep-alive 被提出用来解决这种低效问题
keep-alive可以使客户端到服务器的连接持续有效 当出现对服务器的后续请求时 keep-alive功能避免了重新建立连接
②无状态
无状态指的是协议对于事物处理没有记忆能力 服务器不知道客户端是什么状态 即我们给服务器发送http请求之后 服务器根据请求 会给我们发送数据过来 但是发送完 不会记录任何信息 http是一个无状态协议 这意味着每一个请求都是独立的 keep-alive没能改变这个结果
缺少状态意味着如果后续处理需要前面的消息 则它必须重传 这样会导致每次发送的数据量增大 另一方面 在服务器不需要先前消息时它的应答较快 简化了服务器的设计 使服务器更容易支持大量并发的http请求
http协议的这种特性有优点也有缺点 优点在于解放了服务器 缺点在于可能会传送大量重复信息
客户端与服务器进行动态交互的web应用程序出现之后 http的无状态特性 严重阻碍了这些应用的实现 毕竟交互是需要承前启后的 简单的购物车程序也要知道用户到底在之前选择了什么商品 于是 两种用于保持http状态的技术就应运而生了 即cookie和session
cookie的原理是 服务器为客户端创建一个唯一的识别码 并以此为索引在服务器的后端数据库中产生一个项目 在给客户的响应报文中添加一个叫做set-cookie的首部行 将这个唯一的识别码发送给客户 客户收到响应后 浏览器会在它管理的cookie中添加一行关于这个的信息 当客户继续访问此网站时 浏览器会从cookie文件中取出这个网站的识别码 并放到http请求报文cookie的首部行中 这样就可以跟踪用户在这个网站的活动了 cookie的大小不能超过4kb
session的原理 创建sessionID sessionID保存在cookie中 session的大小没有限制
6、原型链
原型链是针对构造函数的 比如我们先创建了一个函数 然后通过一个变量new了这个函数 那么这个被new出来的函数就会继承创建出来的函数的属性 然后我访问new出来的这个函数的某个属性 但是我们并没有在这个new出来的函数中定义这个变量 那么它就会往上查找 这个查找的过程就叫原型链
就和css中的继承一样如果自身没有定义就会继承父元素的样式
js里完全依靠 原型链 模式来实现继承
proto 原型链指针
prototype 指向原型对象
constructor 每一个原型对象都包括一个指向构造函数的指针 就是constructor
为了实现继承proto会指向上一层的原型对象 而上一层的结构依然类似 Object.prototype. _proto _=null;表示达到最顶端 如此形成了原型链继承
7、作用域链
作用域是针对变量的 比如我们创建了一个函数 这个函数里面又包含了一个函数 那么现在就有三个作用域 即 全局作用域 函数1作用域 函数2作用域
作用域的特点就是 现在自己的变量范围内查找 如果查找不到 就会沿着作用域向上查找
8、强缓存和协商缓存
强缓存就是给资源设置一个过期时间 客户端每次请求资源时都会看是否过期 只有在过期了才会去询问服务器 所以强缓存就是为了给客户端自给自足用的 当客户端请求该资源时发现其过期了 这是就会去请求服务器了 而这时候去请求服务器的过程就可以设置协商缓存了。
强缓存过程：
9、css垂直居中方法
①vertical-align:middle;该设定生效的前提是元素的display:inline-block;
②flex实现垂直居中的方法是 给父元素设置display:flex;而子元素align-self:center;
③设置line-height属性
10、行内元素和块级元素
行内元素：span、img、a、input、lable、i(斜体)、em(强调)、abbr(缩写)、strong、textarea、sub(下标)、sup(上标)、q(短引用)等。
块级元素：div、p、h1~h6、ul、li、table、address、hr、menu、pre、H5新增的header、section、aside、footer等。
11、H5的新特性
①vide视频 audio音频
②使用地理定位 getCurrentPosition()
③本地存储 localStorage sessionStorage
④新事件
onresize 当调整窗口大小时运行脚本
ondrag 当拖动元素时运行脚本
onscroll 元素滚动时执行 有滚动条
onmousewheel 只要鼠标滚动就触发
onerror 发生错误时运行
onplay 当媒体数据开始播放时运行脚本
onpause 当媒体数据停止运行时运行脚本
⑤语义化标签
header footer section(文档中的节) aside(页面侧边栏内容) detailes(用于描述文档或文档某个部分的细节)
artical(定义页面独立内容区域) dialog(定义对话框)
⑥新增表单属性
placehoder
min max 设置最大最小值
require Boolean属性要求填写的输入域不为空
pattern 描述了一个正则表达式用于验证input元素的值
⑦新的表单输入类型
time week email data datatime number month tel search
12、
怪异盒模型：border-box 元素的宽度等于内容宽度
标准盒模型：content-box 元素宽度=padding+border
13、状态码
200 客户端请求成功
304未修改 301永久重定向 302临时重定向
400客户端请求有语法错误
401请求未经授权
403服务器收到请求但拒绝提供服务
404请求的资源不存在
500服务器遇到错误 无法完成请求
503服务器目前无法使用