1、src 和 href
<link href="style.css" rel="stylesheet"> 浏览器加载到这里的时候,html的渲染和解析不会暂停,css文件的加载是同时进行的
<script src="script.js"></script> 当浏览器解析到这句代码时,页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件
2、HTTP 与 HTTPS区别
-
HTTP 是超文本传输协议,信息是明文传输,存在安全风险的问题。HTTPS 则解决 HTTP 不安全的缺陷,在 TCP 和 HTTP 网络层之间加入了 SSL/TLS 安全协议,使得报文能够加密传输。
-
HTTP 连接建立相对简单, TCP 三次握手之后便可进行 HTTP 的报文传输。而 HTTPS 在 TCP 三次握手之后,还需进行 SSL/TLS 的握手过程,才可进入加密报文传输。
-
HTTP 的默认端口号是 80,HTTPS 的默认端口号是 443。
-
HTTPS 协议需要向 CA(证书权威机构)申请数字证书,来保证服务器的身份是可信的。
3、表单提交 Get 和 Post
-
Get一般用于从服务器上获取数据;Post向服务器传送数据
-
Get传输的数据是拼接在Url之后的,对用户是可见的;Post的传输数据对用户是不可见的
-
Get传送的数据量较小,不能大于2KB;Post传送的数据量较大,一般被默认为不受限制
-
Get安全性非常低;Post安全性较高
-
Get限制Form表单的数据集的值必须为ASCII字符;而Post支持整个ISO10646字符集
-
在Form提交的时候,如果不指定 Method,则默认为Get请求,Get执行效率却比Post方法好
4、浏览器的内核
IE:trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit、Google、Opera Software共同开发)
5、同源、跨域、反向代理
请求url的协议、域名、端口任意一个与当前页面url不同,即为跨域
协议 | 域名 | 端口号 |
---|---|---|
https | www.a.com | 8080 |
同源策略
浏览器不允许非同源的 URL 之间进行资源的交互 ,简称不允许跨域
解决方案
1、JSONP
早期,利用src请求资源不会产生跨域问题,兼容性好,但仅支持Get请求
通过<script> 标签的 src 属性,把非同源的 JavaScript 代码请求到本地,并执行
动态创建script标签,把src属性设置为接口的url,让后端动态拼接数据返回,拼接的数据是一个自执行函数
2、CORS 跨域资源共享
支持主流浏览器,不兼容IE10以下,需要后端配合开启CORS功能
配置 Access-Control-Allow-Origin 响应头设置为当前网页地址,或者让后端把respons herader返回头中,加一个 Access-Control-Allow-Origin 字段,并且把允许跨域的地址设置为该字段的值,由于该字段只能设置一个值,想要多个域名跨域,可以让后端再返回前动态的设置这个值,考虑到后端可能不会配合你,直接设置为*,但是设置为*,就不能发送Cookie,因为浏览器认为这样不安全
3、nginx 反向代理
前端主流框架都带有proxy反向代理功能,前端开发的时,会在本地启动一个node.js服务,让node服务去请求接口,然后将node服务请求到的数据传给浏览器,相当于在本地起了一个服务器作为中转站,而服务器与服务器之间的请求是不会引发跨域问题的
注:跨域一般由后端处理
6、Session、Cookie、Token
HTTP是无状态协议,不能保存之前请求的信息,每次的请求是独立的
(1)Cookie机制
Cookie技术是客户端的解决方案,Cookie就是由服务器发给客户端的特殊信息,而这些信息以文本文件的方式存放在客户端,然后客户端每次向服务器发送请求的时候,都会带上这些特殊的信息
(2)Session机制
Session是记录客户状态的机制,Session保存在服务器上。客户端访问服务器的时候,服务器把客户端信息以某种形式记录在服务器上。客户端浏览器再次访问时,只需从Session对象中查找该客户端的状态就可
Cookie和session的区别
-
Cookie机制:如果不在浏览器中设置过期事件,Cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种Cookie简称为会话Cookie。如果在浏览器中设置了Cookie的过期事件,Cookie会被保存在硬盘中,关闭浏览器后,Cookie数据仍然存在,直到过期事件结束才消失
-
Session机制:服务器收到请求时,会检查客户端请求中是否有SessionId。如果有,服务器将根据该Id返回对应SessionId对象;如果没有,服务器会创建新的Session对象,并把SessionId在本次响应中返回给客户端。通常使用Cookie存储SessionId到客户端,在交互中浏览器按照规则将SessionId发送给服务器
-
保持状态:Cookie保存在浏览器端;session保存在服务器端
-
存储的大小:单个Cookie保存的数据不能超过4kb;session大小没有限制,取决于服务器
-
存储内容:Cookie 以以文本的方式保存字符串类型;session支持任何类型的对象
-
安全性:session的安全性大于Cookie
(3)Token
1、客户端使用用户名跟密码请求登录
2、服务端收到请求,去验证用户名与密码
3、验证成功后,根据传过来的唯一标识(userId、mac地址等唯一标识),服务端通过算法生成一个token,然后通过BASE64编码一下之后,将这个token发送给客户端
4、客户端收到 Token 后,保存起来,通过如:Cookie 或 Local Storage等
5、客户端向服务端请求资源时,需要携带Token(作为验证过的标识,无需账号密码验证,无则跳转登录页)
6、服务端收到请求,验证Token,验证成功,响应数据(验证时需要解密,得知用户的唯一标识)
7、完整的HTTP事务
1、输入URL地址,浏览器进行解析,获取域名地址和web服务器的IP地址
2、与服务器建立TCP链接(3次握手)
3、浏览器向web服务器发送http请求
4、服务器响应请求,并发送对应的数据至客户端
5、浏览器下载数据,并解析数据,渲染页面,呈现页面
6、关闭TCP链接(4次挥手)
8、浏览器输入url
1、解析URL:浏览器首先对拿到的URL进行识别,抽取出域名字段。
2、DNS解析:查询浏览器缓存、检查系统缓存、路由器缓存、ISP DNS 缓存、递归查询(获得对应的IP地址)
3、浏览器与网站建立TCP连接(三次握手)
第一次握手:浏览器向服务器发送请求(SYN=1) 等待服务器确认
第二次握手:服务器收到请求并确认,回复一个指令(SYN=1,ACK=1)
第三次握手:浏览器收到服务器的回复指令并返回确认(ACK=1)
通过三次握手,成功建立与服务器的连接,可请求和传输数据
4、请求和传输数据
通过请求得到服务器的响应,将响应文件传输到浏览器进行渲染
5、浏览器渲染页面
浏览器收到响应的文件,找到Html和Mime文件,通过Mime的类型,使用页面渲染引擎来处理Html文件
-
浏览器会解析Html源码,然后创建一个 DOM树
-
浏览器解析CSS代码,计算出最终的样式数据,形成css对象模型CSSOM
-
利用DOM和CSSOM构建一个渲染树(rendering tree)
-
浏览器就根据渲染树直接把页面绘制到屏幕上
9、浏览器的缓存机制
缓存:第一次访问服务器时下载的web资源
缓存策略:再次访问时,是否使用缓存中的资源
作用:减少网络带宽的消耗、降低服务器压力、减少网络延时,加快页面打开速度
规则:http协议头 和 html的mate标签中定义,分别从过期机制和校验值来判断是否直接使用该缓存,还是需要从服务器去获取更新的版本
-
新鲜度(过期机制):缓存副本的有效期。缓存副本满足以下条件之一,才会直接使用缓存
-
Http协议头中存在过期时间等信息,并且仍在有效期内
-
浏览器已经使用过这个缓存副本,并且在一个会话中已经检查过新鲜度
-
-
校验值(验证机制):服务器相应中,在响应头中存在Etag标签,存放用来验证资源是否更改的标识,如果缓存的标识和服务器的标识相同则无需重新请求资源,如果不相同,则重新发送资源请求
10、sessionStorage,localStorage
sessionStorage用于本地存储一个会话(session)中的数据,这些数据同一会话中的页面才能访问,且会话结束后数据销毁。非持久化的本地存储,仅仅是会话级别的存储
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远存在
11、浏览器存储数据
Cookie、localStorage、sessionStorage
(1)Cookie
-
Cookie的作用:解决http无状态的缺点,在客户端存储会话信息,记录用户状态和其它的数据
-
Cookie的构成:名称、值、域、路径、失效时间、安全标志...
名称:一个唯一确定Cookie的名称 值:存储在Cookie中的字符串值,值必须被URL编码 域:Cookie对于哪个域是有效的,向该域发送的请求会包含这个Cookie信息 路径:对于指定域中的路径,应该向服务器发送Cookie 失效时间:表示Cookie何时应该被删除的时间戳 安全标志:指定后,Cookie只有在使用ss连接时才发送到服务器
-
Cookie存储数据:服务器发送http响应时指定Set-Cookie进行指定;或使用 JS 生成Cookie
-
Cookie的缺点
-
需要在客户端和服务器端之间来回传送,浪费不必要的资源
-
存储大小有限制,每个域,一般只能设置20个Cookie,且单个大小不能超过4KB
-
安全性比较低,Cookie保存在客户端中,没有加密,容易泄漏
-
区别
1、是否与服务器端交互
Cookie数据始终在同源的http请求中携带,而Storage不会自动把数据发给服务器
2、存储大小限制
Cookie存储不能超过4k,因为每次http请求都会携带Cookie,所以只适合保存很小的数据
Storage存储可以达到5M或更大
3、数据有效期不同
sessionStorage 数据仅在当前回话有效,浏览器窗口关闭或刷新前有效
localStorage 保存数据始终有效,窗口或浏览器关闭也一直保存,因此可用作持久保存数据
Cookie 只在开发人员设置的有效期时间之前一直有效
4、作用域不同
sessionStorage 在不同的浏览器窗口中不能共享,即使是同源页面
localStorage 在所有浏览器的同源窗口中都是共享的
Cookie也是在所有同源窗口中都是共享的
...
12、回流和重绘
回流:渲染树(render tree)因元素的规模尺寸,布局,隐藏等改变而重新构建。第一次加载页面的时候构建render tree,必定回流。
重绘:渲染树中的一些元素更新属性,只是影响元素的外观(颜色等),不影响布局
浏览器的优化机制
浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。使多次的回流、重绘变成一次回流重绘
优化
-
不要通过父级来改变子元素样式,改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸
-
尽量通过class来设计元素样式,切忌用style
-
对于复杂动画效果,使用绝对定位让其脱离文档流,否则会引起父元素及后续元素大量的回流
-
慎用tables布局,tables中某个元素一旦触发reflow,就会导致table里所有的其它元素reflow。在适合用table的场合,可以设置table-layout为auto或fixed
-
避免设置多层内联样式
13、http的状态码
菜鸟教程:HTTP 状态码 | 菜鸟教程
状态码 | 描述 |
---|---|
1** | 提示信息,服务器收到请求,需要请求者继续执行操作,是协议处理中的中间状态 |
2** | 成功,操作被成功接收并处理,服务器成功处理了客户端的请求 |
3** | 重定向,需要进—步的操作以完成请求,客户端请求的资源发生了变动,需要客户端用新的 URL 重新发送请求获取资源 |
4** | 客户端错误,请求包含语法错误或无法完成请求,客户端发送的报文有误,服务器无法处理,是错误码的含义 |
5** | 服务器错误,服务器在处理请求的过程中发生了错误,表示客户端请求报文正确,但是服务器处理时内部发生了错误,属于服务器端的错误码 |
状态码 | 状态码英文 | 描述 |
---|---|---|
200 | OK | 正常,如果是非 Head请求,服务器返回的响应头有 body 数据。常见 |
204 | No Content | 正常,但响应头没有 body 数据。常见 |
206 | Partial Content | 应用于 HTTP 分块下载或断点续传,表示响应返回的 body 数据只是部分资源,也是服务器处理成功的状态 |
301 | Moved Permanently | 表示永久重定向,说明请求的资源已经不存在了,需改用新的 URL 再次访问 |
302 | Found | 表示临时重定向,说明请求的资源还在,但暂时需要用另一个 URL 来访问 |
304 | Not Modified | 不具有跳转的含义,表示资源未修改,重定向已存在的缓冲文件,也称缓存重定向,也就是告诉客户端可以继续使用缓存资源,用于缓存控制。常用(服务器让你用之前缓存的资源,缓存策略) |
400 | Bad Request | 客户端请求的报文有错误,但只是个笼统的错误(如语法错误等) |
403 | Forbidden | 服务器禁止访问资源,并不是客户端的请求出错,权限不够(普通用户) |
404 | Not Found | 表示请求的资源在服务器上不存在或未找到,所以无法提供给客户端。常用(地址写错,资源不存在等) |
409 | 新老版本问题 | |
500 | Internal Server Error | 与 400 类型,是个笼统通用的错误码,服务器发生了什么错误,我们并不知道(错误类型太多) |
501 | Not Implemented | 表示客户端请求的功能还不支持,类似“即将开业,敬请期待”的意思 |
502 | Bad Gateway | 通常是服务器作为网关或代理时返回的错误码,表示服务器自身工作正常,访问后端服务器发生了错误。网关错误,常用 |
503 | Service Unavailable | 表示服务器当前很忙,暂时无法响应客户端,类似“网络服务正忙,请稍后重试”的意思 |
504 | 网关超时,服务器作为网关或代理,但是没有及时从上游服务器收到请求 |
状态码 | 状态码英文 | 状态码描述 |
---|---|---|
100 | Continue | 当前一切正常,客户端应该继续请求,如果已完成请求则忽略 |
101 | Switching Protocols | 服务器应客户端升级协议的请求正在切换协议 |
200 | OK | 服务器已成功处理了请求 |
202 | Accepted | 已经收到请求消息,但是尚未进行处理 |
203 | Non-Authoritative Information | 请求已经成功被响应,但是获得的负载与源头服务器的状态码为 200 的响应相比,经过了拥有转换功能的代理服务器的修改 |
204 | No Content | 请求已经成功了,但是客户端的客户不需要离开当前页面 |
205 | Reset Content | 服务器已成功处理了请求,并通知客户端重置文档视图 |
206 | Partial Content | 请求已经成功,并且主体包含所请求的数据区间 |
300 | Multiple Choices | 该请求拥有多种可能的响应 |
301 | Moved Permanently | 请求的资源已经被移动到了由 Location 首部字段指定的 URL 上, 并且是固定不变的 |
302 | Found | 请求的资源被暂时移动到了由 Location 首部字段指定的URL 上 |
303 | See Other | 重定向链接指向的不是新上传的资源,而是另外一个页面 |
304 | Not Modified | 无须再次传输请求的内容 |
307 | Temporary Redirect | 请求的资源被暂时移动到了由 Location 首部字段指定的 URL 上 307 可以确保请求方法和消息主体不会发生变化;302 则会在一些旧客户端中错误地将请求方法转换为 GET |
308 | Permanent Redirect | 请求的资源已经被永久地移动到了由 Location 首部字段指定的 URL 上 |
400 | Bad Request | 由于语法无效,服务器无法理解该请求 |
401 | Unauthorized | 缺乏目标资源要求的身份验证凭证,发送的请求未得到满足 |
403 | Forbidden | 服务器有能力处理该请求,但是拒绝授权访问 |
404 | Not Found | 服务器无法找到所请求的资源 |
405 | Method Not Allowed | 服务器禁止了使用当前 HTTP 方法的请求 |
406 | Not Acceptable | 服务器无法提供与 Accept-Charset 及 Accept-Language 首部字段相匹配的响应 |
407 | Proxy Authentication Required | 由于缺乏位于浏览器与可以访问所请求资源的服务器之间的代理服务器所要求的身份验证凭证,发送的请求尚未得到满足 |
408 | Request Time-out | 服务器将关闭空闲的连接 |
409 | Conflict | 请求与服务器目标资源的当前状态相冲突 |
410 | Gone | 请求的目标资源在原服务器上不存在了,并且是永久性的丢失 |
411 | Length Required | 由于缺少确定的 Content-Length 首部字段,服务器拒绝客户端的请求 |
412 | Precondition Failed | 目标资源的访问请求被拒绝 |
413 | Request Entity Too Large | 请求主体的大小超过了服务器愿意或有能力处理的限度,服务器可能会关闭连接以防止客户端继续发送该请求 |
414 | Request-URI loo Large | 客户端所请求的 URI 超过了服务器允许的范围 |
415 | Unsupported Media Type | 服务器由于不支持其有效载荷的格式,从而拒绝接受客户端的请求 |
416 | Requested range not satisfiable | 服务器无法处理所请求的数据区间 |
417 | Expectation Failed | 服务器无法满足 Expect 首部字段中的期望条件 |
422 | Unprocessable Entity | 服务器理解请求实体的内容类型,并且请求实体的语法是正确的,但是服务器无法处理所包含的指令 |
426 | Upgrade Required | 服务器拒绝处理客户端使用当前协议发送的请求,但是可以接受其使用升级后的协议发送的请求 |
429 | Too Many Requests | 在一定的时间内用户发送了过多的请求,即超出了“频次限制” |
431 | Request Header Fields Too Large | 请求中的首部字段的值过大,服务器拒绝接受客户端的请求 |
451 | Unavailable For Legal Reasons | 服务器由于法律原因,无法提供客户端请求的资源 |
500 | Internal Server Error | 所请求的服务器遇到意外的情况,并阻止其执行请求 |
501 | Not Implemented | 请求的方法不被服务器支持,因此无法被处理 |
502 | Bad Gateway | 作为网关或代理角色的服务器,从上游服务器中接收的响应是无效的 |
503 | Service Unavailable | 服务器尚未处于可以接受请求的状态 |
504 | Gateway Time-out | 网关或者代理的服务器无法在规定的时间内获得需要的响应 |
505 | HTTP Version not supported | 服务器不支持请求所使用的 HTTP 版本 |
511 | Network Authentication Required | 客户端需要通过验证才能使用该网络 |
14、...
...