浏览器 http css部分

浏览器

CDN是什么

CDN简单来说就是,事先把内容存到不同区域不同线路的服务器上,根据用户发起的访问需求分布,CDN在离用户地域相同的线路服务器上回去内容反馈给用户。

chrome中的performance字段

Loading 载入
Scripting js脚本
Rendering 渲染
Painting 绘制
System
Idle 空闲

说一下websocket原理。

说一下html渲染到页面的过程。

说一下强缓存和协商缓存。

nocache和nostore的区别?

cookie和session的区别?

浏览器内核,不同内核渲染有什么差别

跨域

1.jsonp
script标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行。
JSONP的原型:在客户端创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。

//jquery

   $.ajax({
        url:"http://localhost:20002/MyService.ashx?callback=?",   
        dataType:"jsonp",
        jsonpCallback:"person",
        success:function(data){
            alert(data.name + " is a a" + data.sex);
        }
   });

jsonp
2.cors
几个头部:

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

跨域资源共享 CORS 详解
 浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
  浏览器发出CORS简单请求,只需要在头信息之中增加一个Origin字段。
  浏览器发出CORS非简单请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。
  浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。
  只要同时满足以下两大条件,就属于简单请求。
  (1)请求方法是以下三种方法之一:HEAD、GET、POST
  (2)HTTP的头信息不超出以下几种字段:Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type(只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)
3.cors中间件
4.ngix
反向代理的原理就是将前端地址和后端的地址用nginx转发到同一个地址下,如5500,3000端口转到3003端口下:

  • 打开niginx的conf目录里面nginx.conf
  • location配置:
    实际上就是将两个页面一个放在3003/下 一个放在3003/no或者任意名字下
    5.postMessage
postMessage(JSON.stringify(data), 'http://10.73.154.73:8088');

解决postMessage跨域问题

缓存的key方法

HTTP

TCP三次握手四次挥手

客户端服务端
1 客户端发送连接请求报文段,无应用数据SYN=1
SYN=1,ACK=12 服务端为该tcp连接分配缓存和变量,并向客户端返回确认报文段,允许连接,无应用数据
3 客户端为该tcp连接分配缓存和变量,并向服务端返回确认的确认,可携带应用数据ACK=1
客户端服务端
1 客户端发送连接释放报文段,停止发送数据,主动关闭TCP连接FIN=1
ACK=12 服务端回送一个确认报文段,客户到服务器这个方向连接关闭——半关闭状态
FIN=1,ACK=13 服务器发完数据,就发出连接释放报文段,主动关闭TCP连接
4 客户端回送一个确认报文段,再到时间计时器设置的2MSL(最长报文段寿命)后连接彻底关闭ACK=1

为什么需要三次握手

三次握手的目的是建立可靠的通信信道,说到通讯,简单来说就是数据的发送与接收,而三次握手最主要的目的就是双方确认自己与对方的发送与接收是正常的。

第一次握手:Client 什么都不能确认;Server 确认了对方发送正常,自己接收正常

第二次握手:Client 确认了:自己发送、接收正常,对方发送、接收正常;Server 确认了:对方发送正常,自己接收正常

第三次握手:Client 确认了:自己发送、接收正常,对方发送、接收正常;Server 确认了:自己发送、接收正常,对方发送、接收正常、

只有三次才能确认双方发送接收都正常

为什么要传回 SYN

接收端传回发送端所发送的 SYN 是为了告诉发送端,我接收到的信息确实就是你所发送的信号了。
SYN是同步位,当建立tcp连接时,连接请求和连接请求接收这两个握手时此标志位为1。

传了 SYN,为啥还要传 ACK

双方通信无误必须是两者互相发送信息都无误。传了 SYN,证明发送方到接收方的通道没有问题,但是接收方到发送方的通道还需要 ACK 信号来进行验证。

为何四次挥手

任何一方都可以在数据传送结束后发出连接释放的通知,待对方确认后进入半关闭状态。当另一方也没有数据再发送的时候,则发出连接释放通知,对方确认后就完全关闭了TCP连接。

TCP如何保证可靠传输

1.应用数据被分割成 TCP 认为最适合发送的数据块。
2.TCP 给发送的每一个包进行编号,接收方对数据包进行排序,把有序数据传送给应用层。
3.校验和: TCP 将保持它首部和数据的检验和。这是一个端到端的检验和,目的是检测数据在传输过程中的任何变化。如果收到段的检验和有差错,TCP 将丢弃这个报文段和不确认收到此报文段。
4.TCP 的接收端会丢弃重复的数据。
5.流量控制: TCP 连接的每一方都有固定大小的缓冲空间,TCP的接收端只允许发送端发送接收端缓冲区能接纳的数据。当接收方来不及处理发送方的数据,能提示发送方降低发送的速率,防止包丢失。TCP 使用的流量控制协议是可变大小的滑动窗口协议。 (TCP 利用滑动窗口实现流量控制)
ack传的是下一次滑动的第一个数:

滑动窗口本质上是描述接受方的TCP数据报缓冲区大小的数据,发送方根据这个数据来计算自己最多能发送多长的数据。如果发送方收到接受方的窗口大小为0的TCP数据报,那么发送方将停止发送数据,等到接受方发送窗口大小不为0的数据报的到来。 
窗口合拢:当窗口从左边向右边靠近的时候,这种现象发生在数据被发送和确认的时候。   
窗口张开:当窗口的右边沿向右边移动的时候,这种现象发生在接受端处理了数据以后。   
窗口收缩:当窗口的右边沿向左边移动的时候,这种现象不常发生。   
TCP就是用这个窗口,慢慢的从数据的左边移动到右边,把处于窗口范围内的数据发送出去(但不用发送所有,只是处于窗口内的数据可以发送。)。这就是窗口的意义。窗口的大小是可以通过socket来制定的,4096并不是最理想的窗口大小,而16384则可以使吞吐量大大的增加。

6.拥塞控制: 当网络拥塞时,减少数据的发送。
7.ARQ协议: 也是为了实现可靠传输的,它的基本原理就是每发完一个分组就停止发送,等待对方确认。在收到确认后再发下一个分组。
8.超时重传: 当 TCP 发出一个段后,它启动一个定时器,等待目的端确认收到这个报文段。如果不能及时收到一个确认,将重发这个报文段。

网络协议的几层

在这里插入图片描述

http1.0 1.1 2.0区别

HTTP1.0 没有长连接
在HTTP/1.0中默认使用短连接。也就是说,客户端和服务器每进行一次HTTP操作,就建立一次连接,任务结束就中断连接。当客户端浏览器访问的某个HTML或其他类型的Web页中包含有其他的Web资源(如JavaScript文件、图像文件、CSS文件等),每遇到这样一个Web资源,浏览器就会重新建立一个HTTP会话。

HTTP1.1

  • 默认使用长连接,可有效减少TCP的三次握手开销。在使用长连接的情况下,当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭,客户端再次访问这个服务器时,会继续使用这一条已经建立的连接。Keep-Alive不会永久保持连接,它有一个保持时间,可以在不同的服务器软件(如Apache)中设定这个时间。实现长连接需要客户端和服务端都支持长连接。
    Connection:keep-alive 保持长连接
  • 支持只发送header信息(不带任何body信息),如果服务器认为客户端有权限请求服务器,则返回100,否则返回401。客户端如果接受到100,才开始把请求body发送到服务器。这样当服务器返回401的时候,客户端就可以不用发送请求body了,节约了带宽。另外HTTP还支持传送内容的一部分。这样当客户端已经有一部分的资源后,只需要跟服务器请求另外的部分资源即可。这是支持文件断点续传的基础。
  • HTTP1.0是没有host域的,HTTP1.1才支持这个参数。
    HTTP2.0
  • 使用多路复用技术(Multiplexing),多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。
    “HTTP1.1在同一时间对于同一个域名的请求数量有限制,超过限制就会阻塞请求”。多路复用底层采用"增加二进制分帧层"的方法,使得不改变原来的语义、首部字段的情况下提高传输性能,降低延迟。二进制分帧将所有传输信息分割为更小的帧,用二进制进行编码,多个请求都在同一个TCP连接上完成,可以承载任意数量的双向数据流。HTTP/2更有效的使用TCP连接,得到性能上的提升。

浏览器输入URL发生了什么

1.输入网址:
在输入时就会从书签和历史记录中搜索相关的网址推荐给你。
2.DNS域名解析:
本地hosts文件 -> 本地DNS服务器(由网络接入服务商提供,如中国电信): 先查缓存记录,如有则返回,如没有则DNS根服务器 -> DNS根域名服务器:没有,则告诉本地DNS可去域服务器查询 ->域服务器查询到后,告诉本地DNS服务器解析的地址->本地服务器向解析的服务器发出请求,收到一个域名和IP的对应关系,返回用户电脑,保存到缓存中。
3.建立TCP链接:
以随机端口向web服务器程序80端口发起TCP请求:
三次握手:
客户端:请求连接(SYN数据包)
服务端:回传,以表示确认(SYN/ACK标志的数据包)
客户端:回传,连接成功(ACK标志的数据包)
4.浏览器向WEB服务器发送请求:
请求
5.服务端处理:
web服务器处理请求,解析用户请求,知道需要调度哪些资源,调用数据库信息,将结果返回给浏览器客户端。
6.关闭TCP链接:
当双方没有请求或响应传递时,任意一方都可以发起关闭请求。
四次挥手:
客户端:FIN;
服务端:ACK;
服务端:FIN;
客户端:ACK;
7.浏览器解析资源:
在这里插入图片描述
浏览器通过解析HTML,生成DOM树,解析CSS,生成CSS规则树,然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同,渲染树中并没有head、display为none等不必显示的节点。

在解析CSS的同时,可以继续加载解析HTML,但在解析执行JS脚本时,会停止解析后续HTML,这就会出现阻塞问题。
同步任务和异步任务:
同步任务是放在主线程上执行的任务,异步任务是放在任务队列中的任务。
同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列里放置一个事件。脚本运行时先依次运行执行栈,再从队列里提取事件,这个过程不断重复,叫事件循环(event loop)。

在解析过程中遇到外部资源时,如图像,iconfont,js等,浏览器会重复之前操作下载该资源。这个请求是异步的,不会影响HTML加载,js执行会影响(js有可能修改dom结构,所以html会挂起),js执行前要确保css已经下载并加载完毕(会影响js执行)。
8.浏览器布局渲染:
根据渲染树,计算css样式。
repaint(重绘):屏幕的一部分重画,不影响整体布局,比如css颜色变了,不影响尺寸和位置。
reflow(回流):元素尺寸变了,需要重新验证并计算渲染树。引起回流的操作:屏幕旋转,浏览器视窗改变,与大小位置有关的css、增加与删除dom。
对于动画中常引起的回流操作,最好用transform代替。

性能web优化?

在尽可能短的时间内完成页面的加载;
将以下三个指标压到最小:

  • 关键资源数——初次渲染时以来的资源;
    延迟或异步加载不影响初次渲染的资源
  • 关键资源体积最小——压缩图片或文件
  • 关键资源网络来回数
    内联关键资源
    1、合理利用缓存,将资源放在浏览器端,能不从网络加载资源就不从;即减少HTTP请求;
    2、必须从网络加载资源,则缩短连接时间:DNS优化;
    3、减少响应内容大小,对内容进行压缩。
    4、资源到达后,最耗时的是回流,考虑减少回流次数。

关键js资源解析阻塞优化方法

  • js资源放在底部,延迟js执行
  • script defer属性:被defer的脚本在执行时严格按照HTML文档中出现的顺序执行——可以提早加载js资源,但要解析完html再执行。
    async:不会阻塞html,脚本加载完毕就执行。
    在这里插入图片描述

http报文一些知识

状态码:
1XX 信息,服务器收到请求,需要请求者继续执行操作
2xx 成功,操作被成功接收并处理
200 OK:正常处理并返回
204 No Content:返回的资源不含主体部分(没有可以返回的东西)
206 : 进行了范围请求 包含由Content-Range指定范围的实体内容。
3xx 重定向,需要进一步的操作以完成请求
301:永久重定向
302:临时重定向
303:分配了新的url,应用get请求
304:缓存相关
307:临时重定向,不会从post变成get
4xx 客户端错误,请求包含语法错误或无法完成请求
400 请求无效(字段名/类型错误)
401 请求未授权
403 服务器拒绝
404 无法找到
406 后台传递的内容前端无法解析
5xx 服务器错误,服务器在处理请求的过程中发生了错误
500 服务器执行出错
503 服务器暂时超负载或者在维护

cookie

浏览器将cookie以键值对的形式保存到某个目录下的文本文件内。下次请求该网站时就把cookie发送回服务器。(cookie就是一个小文件,浏览器对其大小一般限制在4k,用来记录一些信息(一般用作标识))
http无状态,数据交换完成断开连接,再次交换要重新建立连接,服务器无法从连接上跟踪会话。
浏览器在发送请求后,服务器除了正常的响应之外,会在响应头里加入一个set-cookie:id=XXX,浏览器接收之后会存入本地文档(txt),下次向该服务器发送请求时,会附带此cookie.
特点:
1.需要遵循浏览器的同源策略。(即 两个网站即使根域名相同,端口或者子域名不同,那这两个网站就分别有自己的cookie,而且不能操作彼此的cookie)
2. 内存大小有限制。(每个浏览器对其个数的限制不相同,每个域名在20~50之间,大小一般都限制在4K)
3. 在本地可以被更改(所以不能放置敏感数据)
操作cookie:

document.cookie="age=18";//增
//不设置时间会是默认为临时cookie,而且同一路径下&&同一域名只能有一个名字的cookie,遵循同源策略。,一条语句语句只能设置一条cookie
//注意,这个方法只能获取非 HttpOnly 类型的cookie)

//获得cookie存储的字符串
var cookieArray = document.cookie;  //获取cookie存储字符串
//直接设置cookie赋值语句
document.cookie="name=value;expires=GMT_String";

//以函数方式
function setcookie(name,value,days){
                var d= new Date();
                d.setTime(d.getTime()+(days*24*60*60*1000));
                var expires = d.toGMTString();
                document.cookie = name+"="+value+";expires="+expires;
            }
//删  将时间设为过期,浏览器就会自动删除,设为0
function delCookie(name)//删除cookie
{
   document.cookie = name+"=;expires="+(new Date(0)).toGMTString();
}

字段:

字段意义
name一个cookie名字
valuecookie值
domain字段为可以访问此cookie的域名
path字段为可以访问此cookie的页面路径,比如domain是abc.com,path是/test,那么只有/test路径下的页面可以读取此cookie。
expires/Max-Age字段为超时时间,那么当到达此时间后,此cookie失效。不设置的话默认值是Session,意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页,而是整个浏览器) 后,此cookie失效。
sizecookie大小
httpOnly若为true,则只有在http请求头中会带有此cookie的信息,而不能通过document.cookie来访问此cookie。
secure是否只能通过https来传递此条cookie

设置不能获取cookie:
http这个选项用来设置cookie是否能通过 js 去访问。默认情况下,cookie不会带httpOnly选项(即为空),所以默认情况下,客户端是可以通过js代码去访问(包括读取、修改、删除等)这个cookie的。当cookie带httpOnly选项时,客户端则无法通过js代码去访问(包括读取、修改、删除等)这个cookie。
在客户端是不能通过js代码去设置一个httpOnly类型的cookie的,这种类型的cookie只能通过服务端来设置。

参考:cookie详解

CSRF

CSS

伪类 伪元素

  • 伪类 :
    可以有多个拼接;
    可在前方和后方;
    添加类,对元素进行修饰;
    基于dom,不创建新对象;
  • 伪元素 ::
    只能有一个,不能拼接;
    只能存在选择符的最后方;
    创建新对象,并进行操作;(添加元素对象,这个元素对象不会占用dom节点)
    在这里插入图片描述
    在这里插入图片描述
    伪元素清除浮动:
    注意是在父元素上添加伪元素;

css选择器权重:

若是行内选择符,则加1、0、0、0
若是ID选择符,则加0、1、0、0
若是类选择符/伪类选择符,则分别加0、0、1、0
若是元素选择符,则分别加0、0、0、1
优先级高低
!important
行内样式
1.id选择器(#myid)
2.class选择器(.myclassname)
3.标签选择器(div,h1,p)
4.子选择器(ul > li)
5.后代选择器(li a)
6.伪类选择(a:hover,li:nth-child)
通配符
浏览器自定义属性和继承属性。

position:relative和absolute,static区别:

那你说一下css3新增了哪些特性?

boxshadow阴影

移动端布局,响应式布局几套方案

  • media 适用于pc端和移动端一套布局
  • rem 移动端单独开发一套
  • flex
  • vh/vw

拓展问题,如何使一个div里面的文字垂直居中,且改文字的大小根据屏幕大小自适应?

绝对布局,相对布局

  1. Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位
    
  2. Fixed:绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。
    
  3. Relative:相对定位,是相对于其原本的位置来定位的。
    
  4. Static:默认值,没有定位。
    
  5. Inherit:继承父元素的position值。
    

css z-index 工作原理,适用范围

  • 文档流
  • 脱离文档流的方式
  • 定位
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页