前端兼容性问题分三类

• 浏览器兼容问题

  • IE6、7、8不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容”
  • IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容”
  • IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容”
  • IE11部分支持Flex、WebGL，可被判定为“较易兼容”
  • IE6、7、8、9可视为“老式浏览器”
  • IE10、11可视为“准现代浏览器”
  • Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”

• 屏幕分辩兼容问题

• cookie
• localStorage
• sessionStorage

• LocalStorage

  • 协议域名相同的情况下，会区分端口号 如localhost:80和localhost:90的数据不会掺杂到一起

• Cookie

  • 协议域名相同的情况下，不会区分端口号 如localhost:80和localhost:90的数据会掺杂到一起

参考文章

概念

什么是缓存？ 把一些不需要重新获取的内容再重新获取一次。
为什么需要缓存？ 网络请求相比于 CPU 的计算和页面渲染是非常非常慢的。
哪些资源可以被缓存？ 静态资源，比如 js css img。

• 三种刷新操作对http缓存的影响

  • 正常操作：地址栏输入url，跳转链接，前进后退等。强缓存有效，协商缓存有效
  • 手动刷新：F5，点击刷新按钮，右键菜单刷新。强缓存失效，协商缓存有效
  • 强制刷新：Ctrl + F5，Shift + Command + R。强缓存失效，协商缓存失效

原理

浏览器的同源策略：协议、域名、端口号

http://manage.adlt.clashpig.cn/

• manage - 服务器
• adlt - 域
• clashpig - 机构
• cn - 国家(可省)

解决跨域

参考文章
参考文章

• 输入url

• 查找缓存：浏览器会从浏览器缓存->系统缓存->路由缓存查找是否有该页面

• DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。

• 建立TCP连接，进行三次握手

  

  为什么三次握手：客户端与服务端都需要确认双发的发送和接收能力。

  1. 第一次握手：建立连接时，客户端将初始化的序列号（client_isn）发送SYN包（syn=client_isn）到服务器，并进入SYN_SENT状态，等待服务器确认；
  2. 第二次握手：服务端收到SYN包也初始化自己的序列号（server_isn），然后发送SYN（syn=server_isn）+ACK（ack=client_isn+1）包给客户端，此时服务器进入SYN_RECV状态；
  3. 第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=server_isn+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

  第三次握手是可以携带数据的，前两次握手是不可以携带数据的

• 服务器响应请求并把对应的html文件发送给浏览器（浏览器缓存）

• 关闭TCP连接：通过四次挥手释放TCP连接

  

  为什么四次挥手：因为TCP是全双工的,因此,每个方向都要单独关闭。

  当一方完成数据发送任务后,发送一个FIN来终止这一方向的连接,收到一个FIN只是意味着一方向不会再收到数据了,但是这个TCP连接上仍然能够发送数据,直到这一方也发送了FIN，首先进行关闭的一方执行主动关闭,另一方执行被动关闭.第一个关闭的最后等待2MSL。

  1. 第一次：Client将FIN置为1,序号seq=M,发送给Server,进入FIN_WAIT_1（终止等待1）状态
  2. 第二次：Server收到后,将ACK置为1,ack=M+1,响应给Client,进入CLOSE_WAIT（关闭等待）状态Client收到响应后,进入FIN_WAIT_2（终止等待2）状态
  3. 第三次：Server在结束所有数据传输后,将Fin置为1,seq=N+1,发送给Client,进入LAST_ACK（最后确认）状态
  4. 第四次：Client收到后,将ACK置为1,ack=N+1,响应给Server,进入TIME_WAIT（时间等待）状态,等待 2MSL后,进入CLOSED状态，Server收到后,进入CLOSED状态

• 浏览器渲染

  • 构建DOM树：从上到下解析HTML文档生成DOM节点树，是DOM元素和属性节点组成的，树的根是document对象
  • 构建CSS规则树
  • 构建render树：Web浏览器将DOM和CSSOM结合，生成渲染树
  • 布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上
  • 绘制（painting）：遍历渲染树绘制所有节点，并使用UI后端绘制每个节点

概念

重排

当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。

重绘

当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变。重绘不一定重排，重排一定重绘。

如何触发

1. 添加、删除、更新DOM节点
2. 通过 display: none 隐藏一个DOM节点(隐藏元素并脱离文档流)-触发重排和重绘
3. 通过 visibility: hidden 隐藏一个DOM节点-只触发重绘，因为没有几何变化
   (opacity: 0隐藏元素，不触发回流重绘，会触发绑定事件)
4. 移动或者给页面中的DOM节点添加动画
5. 用户行为，例如调整窗口大小，改变字号，或者滚动