|
HTTP和浏览器原理*
1.浏览器输入 url 到呈现出内容发生了什么
(1)浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
(2)服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
(3)浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
(4)载入解析到的资源文件，渲染页面，完成。
2.浏览器渲染的过程
(1)浏览器将获取的HTML文档并解析成DOM树。
(2)处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
(3)将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象。
(4)渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素。
(5)将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting.*
3.如何让解决跨域问题
(1)CORS跨域
后端修改请求头
header(‘Access-Control-Allow-Origin:*’);允许访问的网址
header(‘Access-Control-Allow-Method:POST,GET’);允许访问的方式
(2)JSONP
(3)代理机制
4.重绘和重排
(1)重排负责元素的几何属性更新，重绘负责元素的样式更新
(2)重排必然带来重绘，但是重绘未必带来重排
(3)减少重排和重绘：减少js操纵dom元素的集合属性 批量修改DOM 缓存布局信息
5.浏览器如何实现缓存（强缓存和协商缓存）
（1）先根据这个资源的http header判断它是否命中强缓存，如果命中，则直接从本地缓存中获取资源，不会则向服务器请求 资源。
（2）当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，这个过程成为http再验证，如果命中，服务器直接返回请求而不返回资源，而是告诉客户端之间从缓存中获取，客户端收到返回后就直接从客户端获取资源
（3）强缓存和协商缓存的共同之处在于：如果命中缓存，服务器不会返回资源；区别是：强缓存不发送请求打服务器，但是协商缓存会发送请求到服务器
（4）当协商缓存没有命中时，服务器会返回资源给客户端
（5）当ctrl+F5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存
（6）当F5刷新页面时，跳过强缓存但会检查协商缓存
6.前端存储技术（cookie、session、localStorage、sessionStorage）
|