面试题2

[louzhedong]

1.前端是怎么进行缓存的

答：Http缓存机制作为web性能优化的重要手段，是知识体系中的一个基础环节。

强制缓存：

在缓存数据未失效的情况下，可以直接使用缓存数据，不需要通过服务端。

那么浏览器如何判断缓存数据是否失效呢？

在没有缓存数据的时候，浏览器向服务器请求数据时，服务器会将数据以及缓存规则一并返回，缓存信息包含在响应header中。

对于强制缓存来说，响应header中会有两个字段来标明失效规则（Expires和Cache-Control）。

Expires值为服务端返回的到期时间，是HTTP 1.0的东西，作用基本忽略

主要还是使用Cache-Control

Cache-Control常见的取值有

privte:  客户端可以缓存
public:  客户端和代理服务器都可缓存
max-age: 缓存将在多少秒后失效
no-cache: 需要使用对比缓存来验证缓存数据
no-store: 不使用缓存

对比缓存：

如果一个文件可能不定时会更新，服务器希望客户端能时不时询问文件是否过期，如果没有过期，服务器不会返回数据，只回复304，告诉客户端缓存还未过期。那么浏览器就使用本地的缓存数据。

浏览器第一次访问服务器时，服务器将数据和缓存标识一起返回，浏览器将数据和缓存标识保存在本地数据库。再次请求时，浏览器将备份的缓存标识发送给服务器，服务器进行缓存是否过期的判断。

缓存标识有两种，Last-Modified/If-Modified-Since 和Etag/ If-None-Match，后者优先级更高

Last-Modified/If-Modified-Since:

Last-Modified: 服务器在响应请求时，告诉浏览器最后的修改时间。

If-Modified-Since: 浏览器再次请求时发送给服务器，服务器通过这个与资源最后修改时间做比较。

缺点：
标注的最后修改只能精确到秒，如果在一秒内修改过多次，不能准确标注修改时间。文件被编辑或生成，但内容没有变化，也会认为是修改了文件，导致缓存失效。

Etag/If-None-Match:

浏览器第一次访问服务器时，服务器返回这个资源的标签Etag。如果服务器修改了资源，这个标签会不一样。

再次访问时，浏览器通过If-None-Match将标签传递给服务器询问资源是否被修改。

各种刷新方式

1.浏览器写url 回车：

直接检测缓存，有的话就直接拿来用。

2.F5刷新

会去浏览器查询文件是否过期。

3.强制刷新

先将缓存文件删除，再去服务器请求新的资源文件下来。

提示：ETag实际很少使用，因为需要通过算法来得到标签值，会占用服务器资源。

那么前端可以通过上面方式控制缓存呢？

通过meta标签中的http-equiv可以简单地控制缓存

2.抓包工具用过吗？抓包的原理，HTTPS能抓包吗，需要怎么做，原理是什么

答：本质是在客户端与网络请求直接增加代理，通过代理获取请求的数据。

对于HTTPS，原理是代理对客户端伪装成服务器，对服务器伪装成客户端。

具体过程：

1.代理截获真正的HTTPS请求，伪装成客服端向服务器发送请求

2.接受真实服务器响应，用代理的证书伪装成服务器向客户端发送数据内容。

一般情况是客户端对服务器做证书校检。

所以必须按照中间代理的证书，否则浏览器会认为通信不安全而阻止请求。

图解流程

3.前端性能优化

答：页面级优化：

1. 减少HTTP请求数（浏览器进行并发请求的请求数是有限制的）
   • 在设计层面简化页面
   • 合理地设置HTTP缓存
   • 资源合并与压缩
   • CSS Sprites，合并CSS 图片
   • 使用data格式将图片内嵌到页面
   • 图片懒加载
2. 外部JS脚本放在最底部
3. 异步执行JS defer web worker
4. 按需加载
5. CSS放在head中
6. 减少不必要的HTTP跳转

代码级优化：

1. DOM操作
   • 慎用HTML Collection，这个集合返回的是一个动态的结果，性能上比数组会差很多，在使用时尽量缓存起来，不要过多的去访问。
   • 注意页面的重绘与回流：将元素display设置成none，完成修改后再修改回来；使用documentfragment；尽可能少的修改元素style上的属性；尽可能通过className来修改样式；用cssText来设置样式；脱离文档里，使其渲染不影响别的图层
2. 不要使用with：会延长作用域链，影响性能
3. 避免使用eval和Function：代码会有将源代码编译成可执行代码的过程，会很慢
4. 注意作用域链中的变量查找，离的最近的变量是最容易找到的，如果使用全局变量可以把全局变量赋值给局部变量
5. 字符串拼接，用加号拼接效率较低，如果要拼接的数据很多，可以放入数组使用join函数拼接
6. CSS选择符：CSS的解析是从右到左，所以尽量减少DOM的层级
7. HTML优化
8. Image压缩

4.https原理，为什么能加密

OSI七层网络模型

答：https是http协议的一种改进，在TCP(传输层)的上层(会话层)上增加安全处理。

https的加密算法：非对称加密算法和对称加密算法。

https的加密方式：通过非对称加密算法随机加密出一个对称秘钥，然后使用对称秘钥进行通信。

通信双方使用数字证书进行身份认证。没在证书认证机构（CA）中注册的证书浏览器会提示不安全。

数字证书可以保证数据的完整性。

https通信大致流程

5.List和数组的区别

答：在JAVA中比较ArrayList 和Array。ArrayList能自动拓展，不需要固定长度，而数组需要固定长度。其次ArrayList有迭代器，数组无迭代器。

6.createElement怎么生成虚拟DOM

答：function createElement(tag, attrs, ...children){}

7.http2相关知识

答：HTTP/1.1存在的问题：

1. TCP连接数限制

2. 线头阻塞

3. Header内容多

4. 明文传输不安全

HTTP/2的改进：

1. 二进制分帧：HTTP/2采用二进制传输数据。

2. 多路复用：同域名下所有通信都在单个连接中完成，单个请求可以承载任意数量的双向数据流。

3. 服务器推送

4. 头部压缩

8.如何开发一个组件，需要注意什么

9.Viewport的相关内容

答：meta属性中的viewport，即可视区域，通过设置width,initial-scale,maxmum-scale,minmun-sacle,user-scalable等，可以确定文档的宽度，完档和设备的比例

10.HTTPS网站加载HTTP资源

答：HTTPS 网页中加载的 HTTP 资源被称之为 Mixed Content(混合内容)，不同浏览器对 Mixed Content 有不一样的处理规则。

IE会加载图片，JS和CSS需要用户确定是否加载

现代浏览器会加载危险较小的资源，比如图片，视频，但会在控制台给出警告，其他的资源都会被阻止。

移动浏览器大部分都会加载资源。

解决方式

<meta http-equiv='Content-Security-Policy' content='block-all-mixed-content'>  

页面所有的HTTP请求，会被替换成HTTPS再发起请求。

页面内所有的站内链接，点击后会被替换成HTTPS再发起请求。

11.meta标签介绍

答：meta标签主要用来描述一个HTML网页的属性，比如作者，日期，页面刷新等。还可以用于seo优化。

必选属性：content属性

content属性是为了定义与http-equiv或者name属性相关的元信息，其中的内容便于搜索机器人查找信息和分类使用。

可选属性：name和http-equiv。