前端校招笔试面试基础知识点总结(不更了)

前端校招笔试面试基础知识点总结

  • 1 HTTP/浏览器
    • 1.1 HTTP
      • 1.1.1 HTTP请求报文与响应报文
        • 1.1.1.1 HTTP请求报文
        • 1.1.1.2 HTTP响应报文
      • 1.1.2 get与post
      • 1.1.3 HTTP头部
      • 1.1.3.1 常见的HTTP头部
        • 1.1.3.2 HTTP请求头
      • 1.1.4 HTTP状态码
        • 1.1.4.1 常见的HTTP状态码
        • 1.1.4.2 状态码301和302的区别
        • 1.1.4.3 状态码200和304
        • 1.1.4.4 状态码400、401和403
      • 1.1.5 HTTP支持的方法
      • 1.1.6 HTTP与HTTPS
        • 1.1.6.1 http和https的基本概念
        • 1.1.6.2 http和https的区别
        • 1.1.6.3 https协议的工作原理
        • 1.1.6.4 https协议的优点与缺点
      • 1.1.7 HTTP 2.0
      • 1.1.8 谈谈对HTTP控制访问CORS的理解
    • 1.2 OSI七层模型
    • 1.3 TCP/IP与UDP
      • 1.3.1 TCP三次握手
        • 1.3.1.1 TCP三次握手的过程
        • 1.3.1.2 为什么TCP连接是三次握手不是两次握手
        • 1.3.1.3 为什么连接的时候是三次握手,关闭的时候却是四次握手
      • 1.3.2 TCP四次挥手
        • 1.3.2.1 TCP四次挥手的过程
        • 1.3.2.2 为什么是四次挥手
      • 1.3.3 TCP拥塞
        • 1.3.3.1 TCP/IP协议的拥塞控制的4种算法
        • 1.3.3.2 TCP拥塞控制和流量控制的区别
      • 1.3.4 TCP与UDP的区别
    • 1.4 浏览器
      • 1.4.1 从输入URL到页面加载的整个过程
      • 1.4.2 浏览器渲染流程
      • 1.4.3 浏览器缓存机制
      • 1.4.4 浏览器持久化
      • 1.4.5 cookie sessionStorage localStorage
        • 1.4.5.1 cookie sessionStorage localStorage的区别
        • 1.4.5.2 cookie
          • 1.4.5.2.1 cookie的可设置字段
          • 1.4.5.2.2 cookie的编码方式
          • 1.4.5.2.3 cookie弊端
          • 1.4.5.2.4 cookie隔离
      • 1.4.6 实现浏览器内多个标签之间的通信
      • 1.4.7 从浏览器的URL中获取查询字符串参数
      • 1.4.8 同源策略与跨域问题
        • 1.4.8.1 同源策略
        • 1.4.8.2 跨域
          • 1.4.8.2.1 通过JSONP跨域
          • 1.4.8.2.2 当主域相同时,通过document.domain+iframe来跨子域
          • 1.4.8.2.3 使用window.name+iframe来进行跨域
          • 1.4.8.2.4 使用window.postMessage方法来跨域(不常用)
          • 1.4.8.2.5 使用跨域资源共享(CORS)来跨域
          • 1.4.8.2.6 使用location.hash+iframe来跨域(不常用)
          • 1.4.8.2.7 使用WebSocket来跨域
          • 1.4.8.2.8 使用flash URLLoader来跨域
          • 1.4.8.2.9 nginx反向代理跨域
          • 1.2.8.2.10 nodejs中间件代理跨域
        • 1.4.8.3 利用多个域名来存储网站资源更有效的原因
      • 1.4.9 csrf和xss的网络攻击与防御
      • 1.4.10 常用浏览器的内核
    • 1.5 前端性能优化
  • 2 HTML/HTML5
    • 2.1 DOCTYPE标签
      • 2.1.1 DOCTYPE标签的标准模式与兼容模式的区别
      • 2.1.2 DOCTYPE标签在HTML 4.01 与 HTML5之间的差异
    • 2.2 meta标签
    • 2.3 link和@import的区别
    • 2.4 script标签的defer和async
    • 2.5 行内元素/块级元素 非替换元素/替换元素 空元素
    • 2.6 src与href的区别
    • 2.7 img的title与alt的区别
    • 2.8 i、em、b与strong的区别
    • 2.9 readyonly与disabled的区别
    • 2.10 input有哪些type
    • 2.11 table iframe
      • 2.11.1 table的缺点
      • 2.11.2 div+css布局与table布局相比的优点
      • 2.11.3 iframe的优缺点
      • 2.11.4 很多网站不常用table、iframe这两个元素的原因
    • 2.12 Web安全色
    • 2.13 语义化
      • 2.13.1 语义化的理解
      • 2.13.2 用html知识解决seo优化问题
    • 2.14 HTML5
      • 2.14.1 语义化标签
      • 2.14.2 增强型表单
      • 2.14.3 新增表单元素
      • 2.14.4 新增表单属性
      • 2.14.5 音频audio、视频video
      • 2.14.6 canvas与SVG
        • 2.14.6.1 canvas
        • 2.14.6.2 SVG
        • 2.14.6.3 Canvas与SVG的比较
      • 2.14.7 地理定位
      • 2.14.8 拖拽drag api
      • 2.14.9 本地存储localStorage和sessionStorage
      • 2.14.10 WebSocket
  • 3 CSS
    • 3.1 W3C盒模型和怪异盒模型
    • 3.2 BFC
    • 3.3 清除浮动的方法
    • 3.4 position的属性
    • 3.5 水平垂直居中的方法
    • 3.6 flex布局
    • 3.7 双栏布局、三栏布局
    • 3.8 等高布局
      • 3.8.1 flex布局
      • 3.8.2 grid布局
      • 3.8.3 table布局
      • 3.8.4 负margin(兼容性最好)
      • 3.8.5 伪等高布局
    • 3.9 重排和重绘
    • 3.10 CSS隐藏元素的方式
    • 3.11 CSS选择器
    • 3.12 伪类/伪元素
    • 3.13 CSS动画
      • 3.13.1 CSS动画
      • 3.13.2 js动画和css3动画的差异性
      • 3.13.3 CSS3兼容性问题
    • 3.14 CSS画三角形、圆形、椭圆形
    • 3.15 CSS3新增属性用法
    • 3.16 CSS Sprites
    • 3.17 CSS hack
    • 3.18 双边距重叠问题
    • 3.19 px rem em
    • 3.20 自适应正方形
    • 3.21 z-index的定位方法
    • 3.22 SASS与LESS
  • 4 JS
  • 5 JQuery
    • 5.1 JQuery库中的$()是什么?
    • 5.2 JQuery获取的DOM对象和原生DOM对象的区别和相互转换
    • 5.3 JQuery绑定事件的方式
    • 5.4 jQuery.extend和jQuery.fn.extend的区别
    • 5.5 jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?
    • 5.6 jQuery和zepto的区别
    • 5.7 jQuery中attr和prop的区别
    • 5.8 jQuery中detach()和remove()的区别
    • 5.9 jQuery中的find、children、fliter的区别

方便个人学习复习使用。引用博客均有标注链接。

1 HTTP/浏览器

1.1 HTTP

1.1.1 HTTP请求报文与响应报文

1.1.1.1 HTTP请求报文

HTTP请求报文由请求行(request line)、请求头部(header)、空行和请求数据4个部分组成。

  • 请求行:(get/post方法,url中的path路径,http版本)
  • 请求头部(header):关键字/值对组成,每行一对,关键字和值用英文冒号
  • 空行
  • 请求数据body

1.1.1.2 HTTP响应报文

HTTP响应报文由状态行,响应头部,空行,响应数据4个部分组成。

  • 状态码(Status Code):描述了响应的状态。可用来检查是否成功的完成了请求。请求失败的情况下,状态码可用来找出失败的原因。如果Servlet没有返回状态码,默认会返回成功的状态码HTTPServletResponse.SC_OK。
  • HTTP头部(HTTP Header):包含了更多关于响应的信息。比如:头部可以指定认为响应过期的过期日期,或者是指定用来给用户安全的传输实体内容的编码格式。如何在Servlet中检索HTTP的头部看这里。
  • 空行
  • 主体(Body):它包含了响应的内容。可以包含HTML代码、图片等。主体是由传输在HTTP消息中紧跟在头部后面的数据字节组成的。

1.1.2 get与post

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要被处理的数据

Marck3:GET 和 POST 的区别

  • GET和POST方法各有特点,在外在的表现上似乎是有着诸多的不同但是本质相同,并无区别,GET和POST实际均是TCP链接。但是由于 HTTP 的规定以及浏览器/服务器的限制,导致它们在应用过程中可能会有所不同

1.1.3 HTTP头部

1.1.3.1 常见的HTTP头部

  • 可以将http首部分为通用首部,请求首部,响应首部,实体首部。
  • 通用首部表示一些通用信息,比如date表示报文创建时间。
  • 请求首部就是请求报文中独有的,如cookie,和缓存相关的如if-Modified-Since。
  • 响应首部就是响应报文中独有的,如set-cookie,和重定向相关的location。
  • 实体首部用来描述实体部分,如allow用来描述可执行的请求方法,content-type描述主题类型,content-Encoding描述主体的编码方式。

1.1.3.2 HTTP请求头

协议头 说明
Accept 可接受的响应内容类型(Content-Types)。
Accept-Charset 可接受的字符集
Accept-Encoding 可接受的响应内容的编码方式。
Accept-Language 可接受的响应内容语言列表。
Accept-Datetime 可接受的按照时间来表示的响应内容版本
Authorization 用于表示HTTP协议中需要认证资源的认证信息
Cache-Control 用来指定当前的请求/回复中的,是否使用缓存机制。
Connection 客户端(浏览器)想要优先使用的连接类型
Cookie 由之前服务器通过Set-Cookie(见下文)设置的一个HTTP协议Cookie
Content-Length 以8进制表示的请求体的长度
Content-MD5 请求体的内容的二进制 MD5 散列值(数字签名),以 Base64 编码的结果
Content-Type 请求体的MIME类型 (用于POST和PUT请求中)
Date 发送该消息的日期和时间(以RFC 7231中定义的"HTTP日期"格式来发送)
Expect 表示客户端要求服务器做出特定的行为
From 发起此请求的用户的邮件地址
Host 表示服务器的域名以及服务器所监听的端口号。如果所请求的端口是对应的服务的标准端口(80),则端口号可以省略。
If-Match 仅当客户端提供的实体与服务器上对应的实体相匹配时,才进行对应的操作。主要用于像 PUT 这样的方法中,仅当从用户上次更新某个资源后,该资源未被修改的情况下,才更新该资源。
If-Modified-Since 允许在对应的资源未被修改的情况下返回304未修改
If-None-Match 允许在对应的内容未被修改的情况下返回304未修改( 304 Not Modified ),参考 超文本传输协议 的实体标记
If-Range 如果该实体未被修改过,则向返回所缺少的那一个或多个部分。否则,返回整个新的实体
If-Unmodified-Since 仅当该实体自某个特定时间以来未被修改的情况下,才发送回应。
Max-Forwards 限制该消息可被代理及网关转发的次数。
Origin 发起一个针对跨域资源共享的请求(该请求要求服务器在响应中加入一个Access-Control-Allow-Origin的消息头,表示访问控制所允许的来源)。
Pragma 与具体的实现相关,这些字段可能在请求/回应链中的任何时候产生。
Proxy-Authorization 用于向代理进行认证的认证信息。
Range 表示请求某个实体的一部分,字节偏移以0开始。
Referer 表示浏览器所访问的前一个页面,可以认为是之前访问页面的链接将浏览器带到了当前页面。Referer其实是Referrer这个单词,但RFC制作标准时给拼错了,后来也就将错就错使用Referer了。
TE 浏览器预期接受的传输时的编码方式:可使用回应协议头Transfer-Encoding中的值(还可以使用"trailers"表示数据传输时的分块方式)用来表示浏览器希望在最后一个大小为0的块之后还接收到一些额外的字段。
User-Agent 浏览器的身份标识字符串
Upgrade 要求服务器升级到一个高版本协议。
Via 告诉服务器,这个请求是由哪些代理发出的。
Warning 一个一般性的警告,表示在实体内容体中可能存在错误。

1.1.4 HTTP状态码

1.1.4.1 常见的HTTP状态码

200    OK    请求成功。一般用于GET与POST请求

201    Created    已创建。成功请求并创建了新的资源

202    Accepted    已接受。已经接受请求,但未处理完成

203    Non-Authoritative Information    非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本

204    No Content    无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档

205    Reset Content    重置内容。服务器处理成功,用户终端(例如:浏览器)应重置文档视图。可通过此返回码清除浏览器的表单域

206    Partial Content    部分内容。服务器成功处理了部分GET请求

300    Multiple Choices    多种选择。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择

301    Moved Permanently    永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302    Found    临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

303    See Other    查看其它地址。与301类似。使用GET和POST请求查看

304    Not Modified    未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

305    Use Proxy    使用代理。所请求的资源必须通过代理访问

306    Unused    已经被废弃的HTTP状态码

307    Temporary Redirect    临时重定向。与302类似。使用GET请求重定向

400    Bad Request    客户端请求的语法错误,服务器无法理解

401    Unauthorized    请求要求用户的身份认证

402    Payment Required    保留,将来使用

403    Forbidden    服务器理解请求客户端的请求,但是拒绝执行此请求

404    Not Found    服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面

500    Internal Server Error    服务器内部错误,无法完成请求

501    Not Implemented    服务器不支持请求的功能,无法完成请求

502    Bad Gateway    作为网关或者代理工作的服务器尝试执行请求时,从远程服务器接收到了一个无效的响应

503    Service Unavailable    由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

504    Gateway Time-out    充当网关或代理的服务器,未及时从远端服务器获取请求

505    HTTP Version not supported    服务器不支持请求的HTTP协议的版本,无法完成处理

1.1.4.2 状态码301和302的区别

  • 301 Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能,拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定,否则这个响应也是可缓存的。
  • 302 Found 请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下,这个响应才是可缓存的。
  • 区别
    • 301是永久重定向,而302是临时重定向。
    • 301比较常用的场景是使用域名跳转。
    • 302用来做临时跳转,比如未登陆的用户访问用户中心重定向到登录页面。

1.1.4.3 状态码200和304

  • 状态码200:请求已成功,请求所希望的响应头或数据体将随此响应返回。即返回的数据为全量的数据,如果文件不通过GZIP压缩的话,文件是多大,则要有多大传输量。一般用于GET与POST请求。
  • 状态码304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。即客户端和服务器端只需要传输很少的数据量来做文件的校验,如果文件没有修改过,则不需要返回全量的数据。

1.1.4.4 状态码400、401和403

(1)400状态码:请求无效
产生原因:

  • 前端提交数据的字段名称和字段类型与后台的实体没有保持一致
  • 前端提交到后台的数据应该是json字符串类型,但是前端没有将对象JSON.stringify转化成字符串。

解决方法:

  • 对照字段的名称,保持一致性
  • 将obj对象通过JSON.stringify实现序列化

(2)401状态码:当前请求需要用户验证

(3)403状态码:服务器已经得到请求,但是拒绝执行

1.1.5 HTTP支持的方法

  • HEAD
  • OPTIONS
  • PUT
  • DELETE
  • TRACE
  • CONNECT

1.1.6 HTTP与HTTPS

https的SSL加密是在传输层实现的。

1.1.6.1 http和https的基本概念

  • http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。
  • https: 是以安全为目标的HTTP通道,简单讲是HTTP的安全版,即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。
    https协议的主要作用是:建立一个信息安全通道,来确保数组的传输,确保网站的真实性。

1.1.6.2 http和https的区别

  • http传输的数据都是未加密的,也就是明文的,网景公司设置了SSL协议来对http协议传输的数据进行加密处理,简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议,比http协议的安全性更高。
  • 主要的区别如下:
    (1)Https协议需要ca证书,费用较高。
    (2)http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
    (3)使用不同的链接方式,端口也不同,一般而言,http协议的端口为80,https的端口为443
    (4)http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

1.1.6.3 https协议的工作原理

客户端在使用HTTPS方式与Web服务器通信时的步骤:
(1)客户使用https url访问服务器,则要求web 服务器建立ssl链接。
(2)web服务器接收到客户端的请求之后,会将网站的证书(证书中包含了公钥),返回或者说传输给客户端。
(3)客户端和web服务器端开始协商SSL链接的安全等级,也就是加密等级。
(4)客户端浏览器通过双方协商一致的安全等级,建立会话密钥,然后通过网站的公钥来加密会话密钥,并传送给网站。
(5)web服务器通过自己的私钥解密出会话密钥。
(6)web服务器通过会话密钥加密与客户端之间的通信。

1.1.6.4 https协议的优点与缺点

优点

(1)使用HTTPS协议可认证用户和服务器,确保数据发送到正确的客户机和服务器;
(2)HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全,可防止数据在传输过程中不被窃取、改变,确保数据的完整性。
(3)HTTPS是现行架构下最安全的解决方案,虽然不是绝对安全,但它大幅增加了中间人攻击的成本。

缺点

(1)https握手阶段比较费时,会使页面加载时间延长50%,增加10%~20%的耗电。
(2)https缓存不如http高效,会增加数据开销。
(3)SSL证书也需要钱,功能越强大的证书费用越高。
(4)SSL证书需要绑定IP,不能再同一个ip上绑定多个域名,ipv4资源支持不了这种消耗。  

1.1.7 HTTP 2.0

http2.0是基于1999年发布的http1.0之后的首次更新。
(1)提升访问速度(可以对于,请求资源所需时间更少,访问速度更快,相比http1.0)
(2)允许多路复用:多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了:在http1.1中,浏览器客户端在同一时间,针对同一域名下的请求有一定数量限制(连接数量),超过限制会被阻塞。
(3)二进制分帧:HTTP2.0会将所有的传输信息分割为更小的信息或者帧,并对他们进行二进制编码
(4)首部压缩
(5)服务器端推送

1.1.8 谈谈对HTTP控制访问CORS的理解

跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器  让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非响应报文包含了正确CORS响应头。

跨域资源共享标准( cross-origin sharing standard )允许在下列场景中使用跨域 HTTP 请求:
(1)前文提到的由 XMLHttpRequest 或 Fetch 发起的跨域 HTTP 请求。
(2)Web 字体 (CSS 中通过 @font-face 使用跨域字体资源), 因此,网站就可以发布 TrueType 字体资源,并只允许已授权网站进行跨站调用。
(3)WebGL 贴图
(4)使用 drawImage 将 Images/video 画面绘制到 canvas

1.2 OSI七层模型

前端校招笔试面试基础知识点总结(不更了)_第1张图片

1.3 TCP/IP与UDP

青柚_:TCP的三次握手与四次挥手理解及面试题

1.3.1 TCP三次握手

1.3.1.1 TCP三次握手的过程

前端校招笔试面试基础知识点总结(不更了)_第2张图片
(1)首先客户端发出请求连接即SYN=1 ACK=0到服务器,并进入SYN_SENT状态,等待服务器确认。
(2)服务器收到SYN包后进行回复确认,同时发送SYN=1,ACK=1,seq=y,ack=x+1,此时服务器进入SYN_RCVD状态。
(3)客户端收到服务端发过来的SYN+ACK包,向服务器发送确认ACK=1,seq=x+1,ack=y+1,然后客户端和服务器进入ESTABLISHED状态,TCP连接建立成功。

1.3.1.2 为什么TCP连接是三次握手不是两次握手

前端校招笔试面试基础知识点总结(不更了)_第3张图片

1.3.1.3 为什么连接的时候是三次握手,关闭的时候却是四次握手

因为服务器端收到客户端的SYN连接请求报文后,可以直接发送SYN+ACK报文,其中ACK报文用来应答,SYN报文用来同步。但关闭连接时,当服务器端收到FIN报文时,很可能并不会立即关闭SOCKET,所以只能先回复一个ACK报文,告诉客户端已收到它发送的FIN报文。只有等服务器端所有报文都发完了,服务器端才能发送FIN报文,不能一起发送。

1.3.2 TCP四次挥手

1.3.2.1 TCP四次挥手的过程

前端校招笔试面试基础知识点总结(不更了)_第4张图片

1.3.2.2 为什么是四次挥手

因为TCP有个半关闭状态,假设客户端和服务器端要释放连接,那么客户端发送一个释放连接报文给服务器端,服务器端收到后发送确认,此时客户端补发数据,但是服务器端如果发数据,客户端还是要接受,然后服务器端发确认,所以是4次。

1.3.3 TCP拥塞

  • 在某段时间,如果对网络中的某一资源的需求超过了该资源所能提供的可用部分,网络的性能就要发生变化,这种情况叫阻塞。
  • 拥塞产生的原因:①接收方容量不够;②网络内部有瓶颈;

1.3.3.1 TCP/IP协议的拥塞控制的4种算法

①慢开始
②拥塞避免
③快速重传
④快速恢复

1.3.3.2 TCP拥塞控制和流量控制的区别

1.3.4 TCP与UDP的区别

前端校招笔试面试基础知识点总结(不更了)_第5张图片
总结

  • TCP向上层提供面向连接的可靠服务 ,UDP向上层提供无连接不可靠服务。
  • 虽然 UDP 并没有 TCP 传输来的准确,但是也能在很多实时性要求高的地方有所作为
  • 对数据准确性要求高,速度可以相对较慢的,可以选用TCP

1.4 浏览器

1.4.1 从输入URL到页面加载的整个过程

毅江:从输入URL到页面加载的全过程
小火柴的蓝色理想:从输入URL到页面加载的全过程

1.4.2 浏览器渲染流程

(1)解析HTML文件,创建DOM树。
(2)自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
(3)解析CSS。
优先级:浏览器默认设置<用户设置<外部样式<内联样式 (4)将CSS和DOM合并,构建render树。
(5)布局和绘制render树,重绘(repaint)和重排(reflow)。
简书oWSQo:浏览器渲染原理与过程

1.4.3 浏览器缓存机制

简书浪里行舟:深入理解浏览器的缓存机制

  • 缓存分为两种:强缓存和协商缓存,根据响应的header内容来决定。
  • 强缓存相关字段有expires,cache-control。如果cache-control与expires同时存在的话,cache-control的优先级高于expires。
  • 协商缓存相关字段有Last-Modified/If-Modified-Since,Etag/If-None-Match

1.4.4 浏览器持久化

  • 现代浏览器主要有8种缓存机制: HTTP文件缓存、LocalStorage、SessionStorage、indexDB、Web SQL、Cookie、CacheStorage、Application Cache
    happylittlefish:浏览器数据持久化缓存技术 ——《现代前端技术解析》笔记

1.4.5 cookie sessionStorage localStorage

1.4.5.1 cookie sessionStorage localStorage的区别

(1)存储大小限制不同

  • cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。很多浏览器都限制一个站点最多保存20个cookie。
  • sessionStorage和localStorage的存储大小限制比cookie大得多,大约5M或者更大。

(2)数据的有效期不同

  • cookie:一般由服务器生成,可设置失效时间,关闭窗口或浏览器后超过失效时间失效,在失效时间之前能一直保存。
  • sessionStorage:浏览器窗口开启时生成,仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;
  • localStorage:始终有效,窗口或浏览器关闭也一直保存,只要不手动删除就一直存在,因此用作持久数据;

(3)与服务器的交互

  • cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。如果使用cookie保存数据过多会带来性能问题。
  • sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

(4)作用域不同

  • cookie和localStorage在所有同源窗口中共享。
  • sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面。

1.4.5.2 cookie

1.4.5.2.1 cookie的可设置字段
字段 说明
name cookie的名称
value cookie的值
domain 可以访问此cookie的域名
path 可以访问此cookie的页面路径
expires/Max-Age cookie的超时时间。若设置其值为一个时间,那么当到达此时间后,此cookie失效。不设置的话默认值是Session,意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页,而是整个浏览器) 后,此cookie失效。
Size cookie的大小
http cookie的httponly属性。若此属性为true,则只有在http请求头中会带有此cookie的信息,而不能通过document.cookie来访问此cookie。
secure 设置是否只能通过https来传递此条cookie
1.4.5.2.2 cookie的编码方式

encodeURI()

1.4.5.2.3 cookie弊端

(1)cookie限制

  • IE6或更低版本最多20个cookie
  • IE7和之后的版本最后可以有50个cookie。
  • Firefox最多50个cookie
  • chrome和Safari没有做硬性限制
  • Opera会清理近期最少使用的Firefox会随机清理4096字节,为了兼容性,一般不能超过IE提供了一种存储可以持久化用户数据,叫做IE5.0就开始支持。每个数据最多128K,每个域名下最多1M。这个持久化数据放在缓存中,如果缓存没有清理,那么会一直存在。
  • (2)cookie安全性问题
    • cookie欺骗
    • cookie截获
    • cookie泄漏网络隐私
      深入分析cookie的安全性问题
1.4.5.2.4 cookie隔离
  • 通过使用多个非主要域名来请求静态文件,如果静态文件都放在主域名下,那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的,还不如隔离开。
  • 因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,这样可以降低请求头的大小,降低请求时间,从而达到降低整体请求延时的目的。
  • 同时这种方式不会将cookie传入server,也减少了server对cookie的处理分析环节,提高了server的http请求的解析速度。

1.4.6 实现浏览器内多个标签之间的通信

(1)通过WebSocket或者SharedWorker把客户端和服务器端建立socket连接,从而实现通信
(2)localStorage、cookies等本地存储方法。

1.4.7 从浏览器的URL中获取查询字符串参数

Location对象包含当前页面与url相关的信息。

Location对象的8个属性:
href:声明了当前显示文档的完整的URL。
protocol:声明URL的协议部分,包括后缀的冒号,例如http。
host:声明当前URL的主机名和端口号(是hostname和port的合集),例如www.baidu.com:80。
hostname:声明当前URL的主机名,例如www.baidu.com
port:声明当前URL的端口部分,例如80。
pathname:声明当前URL的路径部分,例如news/index.aspx
search:声明当前URL的查询部分,例如?id=1&name=localhost。
hash:声明当前URL的锚的部分,例如#top,指定在文档中的锚记的名称。

如果改变了文档的location.href,那么浏览器会载入新的页面。
如果改变了location.hash,那么页面会跳转到新的锚点,但此时页面不会重载。

location对象的两个方法:
reload():可以重载当前文档。
replace():可以装载一个新文档而无须为其创建一个新的历史记录。即在浏览器的历史列表中,新文档将替换当前文档。

∴通过将url字符串信息赋值给窗口的location属性来装载新文档可以实现返回浏览。

1.4.8 同源策略与跨域问题

1.4.8.1 同源策略

  • 同源的条件:协议相同、域名相同、端口相同
  • 同源的目的:为了保证用户信息的安全,防止恶意的网站窃取数据。
  • 非同源的限制范围:
    随着互联网的发展,同源政策越来越严格。目前,如果非同源,共有三种行为受到限制。
    (1)无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
    (2)无法接触非同源网页的 DOM。
    (3)无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应)。

1.4.8.2 跨域

  • 跨域是指浏览器不能执行其他网站的脚本。它是由浏览器同源策略造成的,是浏览器施加的安全限制。
    萌主_iii:JS中的八种常用的跨域方式及其具体示例的总结
  • 跨域的方法
1.4.8.2.1 通过JSONP跨域

(服务器与客户端跨源通信的常用方法)

  • JSONP的基本思想:网页通过添加一个

你可能感兴趣的:(笔记,html,css,javascript,jquery)