前端大杂烩之浏览器相关（一）

1. 跨域，为什么JS会对跨域做出限制

  如果浏览器不对跨域进行限制，用户的数据很容易被其他人盗取，网站也容易被恶意攻击，所以为了浏览器安全，浏览器实现了同源策略，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源；

2. 前端安全：xss，csrf

 什么是XSS、CSRF

  XSS： 跨站脚本（Cross-site scripting，通常简称为XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。

  CSRF：又称XSRF，冒充用户发起请求（在用户不知情的情况下）,完成一些违背用户意愿的请求（如恶意发帖，删帖，改密码，发邮件等）。

 如何防范XSS、CSRF

  CSRF依赖于XSS，防范了XSS，也就基本防范了CSRF。而防范XSS的方法，除了后端对数据进行过滤，前端也可以做初步的筛选，例如，尽量使用innerText(IE)和textContent(Firefox),也就是jQuery的text()来输出文本内容。

3. 浏览器怎么加载页面的？script脚本阻塞有什么解决方法？defer和async的区别？

 浏览器怎么加载页面的

  1、首先浏览器先把这个HTML文档先转化为DOM树，然后根据这个DOM树，进行渲染，转化为可视的东西；

  2、在渲染的时候，浏览器从上到下依次渲染DOM树，当发现有外链资源或脚本的时候会异步发起请求加载，同时DOM树的解析继续。一般我们都会把style都放在head里面，那么这样浏览器就先拿到了css样式文件，他就知道如何讲每个元素绘出来放在哪个位置;

  3、如果遇到图片浏览器不会等图片加载完再去加载，而是继续加载，这样就会出现个问题，当图片加载完时，在页面插入图片会影响页面的结果，浏览器就又要重新排布，这样浏览器又要花费时间跟经历去排布，所有如果图片是固定的尺寸，我们在写CSS的时候就应该给他加上宽高，浏览器就会预留一个位置给图片，这样就避免了重新排布;

 script脚本阻塞有什么解决方法

  一般解决办法：将script标签放在body最底部、合并脚本文件，将几个脚本文件合并为一个，减少下载次数。

  无阻塞脚本的方法：

  1、为script标签定义一个扩展属性defer。

  2、动态脚本注入，用javascript动态创建script元素及其内容，这种方法重点在于，无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

  3、XMLHtmlRequest脚本注入，先创建一个XHR对象，然后用它下载javascript文件，最后通过创建动态script元素将代码注入页面中。这种方法的主要优点是，下载javascript代码但不立即执行。主要局限性是，javascript文件必须与所请求的页面处于相同的域。

4. 浏览器强缓存和协商缓存

 浏览器在第一次请求获取到资源后，再次请求时：

  1、浏览器会先获取该资源缓存的header信息，根据其中的expires和cahe-control判断是否使用强缓存，若使用则直接从缓存中获取资源，包括缓存的header信息，本次请求不会与服务器进行通信；

  2、如果不使用强缓存，浏览器会发送请求到服务器，该请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/IF-Modified-Since、Etag/IF-None-Match），由服务器根据请求中的相关header信息来判断是否使用协商缓存，若使用，则服务器返回新的响应header信息来更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容。

 强缓存

  Expires：它的值为一个绝对时间的GMT格式的时间字符串，这个时间代表着这个资源的失效时间。

  Cache-Control：主要是利用该字段的max-age值来进行判断，它是一个相对时间。

  Cache-Control与Expires可以在服务端配置同时启用，同时启用的时候Cache-Control优先级高。

 协商缓存

  Last-Modify/If-Modify-Since：浏览器第一次请求一个资源时，会在header上加上Last-Modify，它标识该资源的最后修改时间。当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。

  ETag/If-None-Match：ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。

  Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续对比Last-Modified，如果相同，返回304。

5. web存储、cookies、localstroge等的使用和区别

  sessionStroge和localStroge是HTML5 Web Stroge API提供的，在此之前，cookie是主要的存储方式。

 webstorage与cookie的区别

  1、cookie数据始终在http请求中携带，可以在浏览器和服务器之间传递，而localStorage和sessionStorage的数据仅在本地保存。

  2、cookie的存储数据大小不能超过4k，sessionStorage和localStorage存储数据大小可以达到5M或者更大。

  3、cookie的生命周期一般在其设置的过期时间之前有效。而sessionStorage仅在关闭窗口前有效，localStorage持久有效，直至手动删除。

  4、cookie和localStorage在所有同源窗口中可以共享。sessionStroge在不同浏览器窗口不共享，即使是同一个页面。

  5、web storage支持事件通知机制，可以将数据更新的通知发送给监听者。