浏览器缓存、兼容、性能、安全渲染引擎：主要负责将请求的布局文件、样式文件进行解析渲染，呈现出web页面。网络：进行HT

浏览器概念

浏览器的主要组件？

用户界面：UI布局，比如地址栏前后退，收藏夹
浏览器引擎：在用户界面和渲染引擎之间传递指令，同时操作数据存储
渲染引擎：主要负责将请求的布局文件、样式文件进行解析渲染，呈现出web页面。
网络：进行HTTP请求调用。
js解释器：负责解析并执行JavaScript语言。

浏览器的内核及代表？

Trident['traɪdənt]内核：IE浏览器
Gecko['gekəʊ(geikou)]内核：FireFox浏览器
webkit内核：safari浏览器，曾经的chrome[krəʊm]浏览器
presto内核：opera浏览器
blink内核：现在的chrome浏览器

缓存分类

DNS缓存
服务器缓存
cdn缓存:内容分发。
浏览器缓存

浏览器缓存

我们主要讲浏览器缓存。

当浏览器请求一个网站的时候，会加载各种各样的资源，比如：HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容，浏览器会将他们保存在本地的文件中，下次访问相同网站的时候，直接加载这些资源，加速访问。

这些被浏览器保存的文件就被称为缓存（不是指Cookie或者Localstorage）。

使用浏览器缓存的好处？

减少请求
减少页面加载时间
减少服务器负载

浏览器缓存策略

存储策略
过期策略
协商策略

浏览器缓存机制如下：

1）浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如：某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；

2）当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；

3）强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器。

4）当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据。

浏览器header字段

页面的缓存状态是由header决定的。而header中跟缓存有关的属性如下：

通用首部字段

Cache-Control:指定缓存机制，覆盖其他设置，优先级比Expries高。其参数如下：
- public:默认为public，对资源进行缓存
- private：私有缓存，仅在客户端缓存，不会在用户间共享
- no-store：绝对禁止缓存，请求和响应都不缓存
- no-cache：不缓存响应，但是不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。
- max-age:缓存最大的有效时间，单位为s。
- s-maxage:只用于共享缓存，如CDN缓存
Pragma

请求首部字段

if-Match：缓存校验字段, 其值为上次收到的一个或多个etag 值. 常用于判断条件是否满足。
if-None-Match ：缓存校验字段, 结合ETag字段, 常用于判断缓存资源是否有效。
if-Modified-Since：缓存校验字段, 其值为上次响应头的Last-Modified值, 若与请求资源当前的Last-Modified值相同, 那么将返回304状态码的响应, 反之, 将返回200状态码响应.
if-Unmodified-Since：：缓存校验字段,表示资源未修改则正常执行更新, 否则返回412(Precondition Failed)状态码的响应.

响应首部字段

ETag:根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生。

实体首部字段

Expires:缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。需要和Last-modified结合使用
Last-Modified:服务器端文件的最后修改时间，需要和cache-control共同使用。

强缓存

一旦资源命中强缓存, 浏览器便不会向服务器发送请求, 而是直接读取缓存。

强缓存是利用Expires或者Cache-Control这两个http response header实现的，它们都用来表示资源在客户端缓存的有效期。

协商缓存

当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，

缓存判断流程图

引申提问

浏览器缓存是如何控制的？

当浏览器请求资源的时候，会通过两个字段去判断是否使用了强缓存，这两个字段分别是cache-control,缓存的最大有效时间，和Expries缓存过期时间。

如果缓存没有过期，那么浏览器不会向服务器发送请求。

如果缓存过期了，那么浏览器就向服务器发送请求，验证协商缓存。有两种方法判断缓存是否更新：

一是通过字段Last-Modified，表示最后缓存时间，当缓存过期后, 浏览器就会把这个时间放在If-Modified-Since去请求服务器, 判断缓存是否有更新。

二是通过字段Etag，这个字段表示资源缓存状态，服务器会响应一个Etag字段, 一个表示文件唯一的字符串, 一旦文件更新, Etag也会跟着更改, 当缓存过期后, 浏览器会把这个字符串放在If-None-Match去请求服务器, 判断是否有更新。

Etag的优先级比Last-Modified的更高, Etag的出现, 是为了解决一个缓存文件在短时间内被多次修改的问题, 因为Last-Modified只能精确到秒

一次js请求，一般会有哪些缓存处理?

DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。

CDN缓存：内容分发网络

浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。

服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。

浏览器兼容

兼容性问题出现的原因？

因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是我们web前端开发人员经常会碰到和必须要解决的问题。

标准模式与兼容模式各有什么区别？

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

引申提问？

遇到过哪些兼容性问题？

1.浏览器默认的padding和margin不同

2.IE浏览器的添加事件和移除事件

3.IE浏览器获取目标元素的方法不一样，标准浏览器是event.target，而IE下是event.srcElement

4.ajax的实现方式不一样，非IE是XMLHttpRequest，IE是activeXObject

5.IE不支持new File()

做过哪些浏览器兼容？

css初始化，因为浏览器兼容的问题，不同浏览器对标签的默认值是不同的，如果没对css初始化，页面显示就会出现差异。

添加事件和移除事件，在IE中添加事件使用attachEvent``detachEvent非IE中使用，addEventListener``removeEventListener，具体封装如下：

function addEvent(elem, eventName, handler) {
    if (elem.attachEvent) {
        elem.attachEvent("on" + eventName,function(){
                handler.call(elem)//此处使用回调函数call()，让this指向elem&emsp;
            }
        );
  } else if (elem.addEventListener) {
        elem.addEventListener(eventName, handler, false);
  }
}
function removeEvent(elem, eventName, handler) {
    if (elem.detachEvent) {
        elem.detachEvent("on" + eventName,function(){
                handler.call(elem)
            }
        );
    } else if (elem.removeEventListener) {
        elem.removeEventListener(eventName, handler, false);
    }
}

什么叫优雅降级和渐进增强？

优雅降级：最开始使用最新的技术，能让网站正常工作，然后再慢慢向下兼容其他浏览器。

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。

是否有必要兼容？

我们并不需要去了解如何兼容旧IE，而是更加要符合趋势，学习关注优秀的。

是否有必要要去做这个兼容？会耗费多长事件？会耗费多少人力？能否达到预期标准？是否有用户仍然在用旧的IE？

浏览器性能

如何优化性能？

浏览器安全

CSRF攻击

什么是CSRF攻击？

全称是Cross-site request Forgery，跨站请求伪造。是指在用户已经登录网站并且存在cookie的基础上，骗取用于进入恶意网站，然后窃取用户的cookie，给服务器发送请求的攻击方法。

怎样预防？

添加校验的token。token是随机的，每一次敏感请求都要添加token，服务器通过检验token，判断请求的真伪。

XSS

什么是XSS攻击？

全称Cross site script，跨站脚本攻击，原理是攻击者向有XSS漏洞的网站中输入恶意的HTML代码，当用户浏览该网站时，HTML代码自动执行，从而达到攻击目的。

怎样预防？

1.对输入内容的特定字符进行编码，例如HTML的尖括号<>

2.后端接口关键字符过滤

3.将不可信的值输出URL时，需要进行URLEncode转码操作。

SQL注入攻击

什么是SQL注入攻击？

指的是开发过程中，没有对SQL关键字进行过滤，导致用于可以提交sql语句到服务器被执行。

怎样预防？

1.对用户的输入进行校验。

2.不要动态拼装sql

3.过滤掉关键字。