浏览器渲染和网络请求

1、Ajax使用

全称 ： Asynchronous Javascript And XML

异步，就是向服务器发送请求的时候，不必等待结果，而是可以同时做其他的事情，局部刷新

创建Ajax的过程：

1. 创建XMLHttpRequest对象（异步调用对象）

var xhr = new XMLHttpRequest();

2. 创建新的Http请求（方法、URL、是否异步）

xhr.open(‘get’,’example.php’,false);

3. 设置响应HTTP请求状态变化的函数

onreadystatechange事件中readyState属性等于4。响应的HTTP状态为200(OK)或者304(Not Modified)

4. 发送http请求

xhr.send(data);

5. 获取异步调用返回的数据

2.HTTP、TCP、socket

• HTTP

  • HTTP在每次请求结束后都会主动释放连接

  • HTTP是用于传输如HTML文件,图片文件，查询结果的应用层协议HTTP无状态协议

  • HTTP协议传输的数据都是没有加密的，SSL协议对HTTP传输的数据进行加密，从而诞生了HTTPS

• socket

  • 套接字（socket）是通信的基石，是支持TCP/IP协议的网络通信的基本操作单元

  • 套接字之间的连接过程分为三个步骤：服务器监听，客户端请求，连接确认

• TCP

三次握手(Three-way Handshake)，是指建立一个 TCP 连接时，需要客户端和服务器总共发送3个包

第一次握手(SYN=1, seq=x):

客户端发送一个 TCP 的 SYN 标志位置1的包，指明客户端打算连接的服务器的端口，以及初始序号 X,保存在包头的序列号(Sequence Number)字段里。

发送完毕后，客户端进入 SYN_SEND 状态

• 第二次握手(SYN=1, ACK=1, seq=y, ACKnum=x+1):

  服务器发回确认包(ACK)应答。即 SYN 标志位和 ACK 标志位均为1。服务器端选择自己 ISN 序列号，放到 Seq 域里，同时将确认序号(Acknowledgement Number)设置为客户的 ISN 加1，即X+1。 发送完毕后，服务器端进入 SYN_RCVD 状态。

• 第三次握手(ACK=1，ACKnum=y+1)

  客户端再次发送确认包(ACK)，SYN 标志位为0，ACK 标志位为1，并且把服务器发来 ACK 的序号字段+1，放在确定字段中发送给对方，并且在数据段放写ISN的+1

  发送完毕后，客户端

3、Websocket:

WebSocket是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信

• websocket借用了HTTP的握手，是HTTP的一个解决特定问题的补丁

• websocket相对与HTTP协议来说是一个持久化的协议

• websocket只建立一次连接，那么这个连接就不会断，服务端如果有数据的话，会自动返回数据给客户端

特点:

a、事件驱动

b、异步

c、使用 ws 或者 wss 协议的客户端 socket

d、能够实现真正意义上的推送功能

4、什么是跨域以及几种简单解决方案

同源策略：用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互

• 要同时满足以下3个条件，才能叫同源：

  • 协议相同

  • 端口相同

  • 域名相同

解决方法：

• document.domain方法：用来得到当前网页的域名

  • 将两个页面的document.domain设置成一致

  • 只能解决主域相同的跨域问题

• window.name方法：获取/设置窗口的名称，用于为超链接和表单设置目标

  • 对 window.name 赋值时会自动进行 toString 处理

  • window.name的值只能是字符串的形式，大小最大只能允许2M左右

  • 不同域也可以

• JSONP方法：为了便于客户端使用数据，逐渐形成了一种非正式传输协议

  利用引入script不限制源的特点，把处理函数名作为参数传入，然后返回执行语句

  • 原理：利用script标签的src属性来实现跨域，将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信

  • 动态添加一个script元素到头部，允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

  • 此只支持get方法

  • 跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理

• CORS: 一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）

  • 允许浏览器向跨源服务器，发出XMLHttpRequest请求，克服了AJAX只能同源使用的限制

  • 所有浏览器都支持该功能，IE浏览器不能低于IE10

  • JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据

  • 浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）

    • 把服务器的响应报文里的Access-Control-Allow-Origin设置为*或者包含由 Origin指明的站点

    • 复杂请求比简单请求多了个预检请求，预检请求用的请求方法是OPTIONS，表示请求是用来询问的

• HTML5 window.postMessage：在窗口间进行通信，可以借助其实现跨域通信

  • 在需要发送消息的源窗口调用postMessage方法即可发送消息，只能发送字符串信息

    • postMessage函数接收两个参数：第一个为将要发送的消息，第二个为源窗口的源

  • 要想接收到之前源窗口通过postMessage发出的消息，只需要在目标窗口注册message事件并绑定事件监听函数，就可以在函数参数中获取消息

    • message事件监听函数接收一个参数，Event对象实例，该对象有三个属性：

      • data 发送的具体消息

      • origin 发送消息源

      • source 发送消息窗口的window对象引用

  • 只有当目标窗口的源与postMessage函数中传入的源参数值匹配时，才能接收到消息

5.浏览器渲染流程

• 浏览器渲染页面的过程

从耗时的角度，浏览器请求、加载、渲染一个页面，时间花在下面五件事情上：

1. DNS 查询

2. TCP 连接

3. HTTP 请求即响应

4. 服务器响应

5. 客户端渲染

• 浏览器对内容的渲染，这一部分（渲染树构建、布局及绘制）：

1. 处理 HTML 标记并构建 DOM 树。

2. 处理 CSS 标记并构建 CSSOM 树。

3. 将 DOM 与 CSSOM 合并成一个渲染树。

4. 根据渲染树来布局，以计算每个节点的几何信息。

5. 将各个节点绘制到屏幕上

6.浏览器重排和重绘

重排，我们对DOM的修改引发了DOM几何元素的变化，渲染树需要重新计算

重绘只会改变vidibility、outline、背景色等属性导致样式的变化，使浏览器需要根据新的属性进行绘制

重排会产生比重绘更大的开销

页面首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次重排

浏览器窗口尺寸改变 3.元素位置和尺寸发生改变的时候 4.新增和删除可见元素 5.内容发生改变（文字数量或图片大小等等） 6.元素字体大小变化。 7.激活CSS伪类（例如：:hover）。 8.设置style属性 9.查询某些属性或调用某些方法

重绘的操作主要有vidibility、outline、背景色等属性的改变

重绘不一定导致重排，但重排一定会导致重绘

减少重排和重绘开销

• 分离读写操作

• 样式集中改变

• 缓存布局信息

• 将DOM离线：给元素设置display:none时，元素不会存在于渲染树中，之后的操作将不会触发重排和重绘

• 将position属性设置为absolute或fixed

• 优化动画

• 启用GPU加速

7、浏览器渲染原理, 什么情况会触发重排和重绘？

触发重排的情况：

• 添加或删除可见的DOM元素

• 元素位置改变

• 元素本身的尺寸发生改变

• 内容改变

• 页面渲染器初始化

• 浏览器窗口大小发生改变

触发重绘的情况：

页面样式改变

8、谈谈对前端安全的理解，有什么，怎么防范

XSS攻击,CSRF攻击

对用户输入的信息进行层层检测,

要注意对用户的输出内容进行过滤(进行转义等)重要的内容记得要加密传输,

get与post请求，要严格遵守规范，不要混用，不要将一些危险的提交使用jsonp完成,

对于URL上携带的信息，要谨慎使用

9、对JSON的了解？

JSON中对象通过“{}”来标识，对象的值是键值对的形式

JSON是JS的一个严格的子集，一种轻量级的数据交换格式

• JSON.parse(str)：解析JSON字符串 把JSON字符串变成JavaScript值或对象

• JSON.stringify(obj)：将一个JavaScript值(对象或者数组)转换为一个 JSON字符串

10、XML与JSON的区别？

1. 数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。

2. 数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

3. 数据描述方面。JSON对数据的描述性比XML较差。

4. 传输速度方面。JSON的速度要远远快于XML。

11、如何删除一个cookie？

1） 将cookie的失效时间设置为过去的时间

2）将系统时间设置为当前时间往前一点时间

12. 本地存储几种方式

Cookie:是服务器"种植"在客户端的key-value形式文本文件。但同时客户端也能操作cookie

跨域访问问题；

无法保存太大的数据（最大仅为4KB）；每个域名下cookie的个数现在在20

cookie始终被携带在http请求中

客户端可以通过document.cookie操作cookie，并不安全

本地保存的数据会发送给服务器，浪费带宽

cookie可以设置过期时间、路径、域和httpOnly等字段。如果设置了过期时间，cookie会保存在硬盘里，知道到了设定的过期时间才会失效。若未设置过期时间，在浏览器窗口关闭时，cookie就失效了。路径和域两个字段限制了cookie的作用范围。httpOnly设置为true，则js不能通过document.cookie操作cookie

使用sessionStorage、localStorage

1 缓存数据 2 减少对内存的占用

storage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储

localStorage是一种你不主动清除它，它会一直将存储数据存储在客户端的存储方式，即使你关闭了客户端（浏览器)，属于本地持久层储存

sessionStorage用于本地存储一个会话（session）中的数据，一旦会话关闭，那么数据会消失，比如刷新

它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给服务器，避免带宽浪费