web前端面试题[浏览器及http篇]
1、浏览器缓存有哪些,通常缓存有哪几种
1、http缓存是基于HTTP协议的浏览器文件级缓存机制。
2、websql这种方式只有较新的chrome浏览器支持,并以一个独立规范形式出现
3、indexDB 是一个为了能够在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的 API
4、Cookie一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)
5、Localstoragehtml5的一种新的本地缓存方案,目前用的比较多,一般用来存储ajax返回的数据,加快下次页面打开时的渲染速度
6、Sessionstorage和localstorage类似,但是浏览器关闭则会全部删除,api和localstorage相同,实际项目中使用较少。
7、application cache 是将大部分图片资源、js、css等静态资源放在manifest文件配置中
8、cacheStorage是在ServiceWorker的规范中定义的,可以保存每个serverWorker申明的cache对象
9、flash缓存 这种方式基本不用,这一方法主要基于flash有读写浏览器端本地目录的功能
2、谷歌浏览器的核心是?
谷歌浏览器的内核: 以前是Webkit内核,现在是Blink内核。
优点是:不易崩溃,速度快,几乎隐身,搜索简单,标签简单,更加安全。
IE浏览器内核:Trident内核
IE浏览器的优点:
(1)部分只有IE内核才能打开所有网页;
(2)IE内核浏览器更安全;
(3)IE内核占用内存及CPU更少;
(4)IE最新版比chrome的速度快。
IE浏览器的缺点:
(1)拓展性几乎没有;
(2)容易中病毒,出现一些乱七八糟的东西,而且上网速度较慢。
Firefox浏览器内
火狐浏览器的优点:风格简单,速度快,安全性高,拓展性强等。
火狐浏览器的缺点:网页错位,媒体功能不强等。核:Gecko内核
3、打开谷歌会有四个进程,为什么?
单进程浏览器时代
问题:不稳定、不流畅、不安全、

早期多进程设计图:

现在多进程:

多进程浏览器时代:
解决不稳定的问题
由于进程是相互隔离的,所以当一个页面或者插件崩溃时,影响到的仅仅是当前的页面进程或者插件进程,
并不会影响到浏览器和其他页面,这就完美地解决了页面或者插件的崩溃会导致整个浏览器崩溃,也就是不稳定的问题
解决不流畅的问题
同样,JavaScript 也是运行在渲染进程中的,所以即使 JavaScript 阻塞了渲染进程,影响到的也只是当前的渲染页面,
而并不会影响浏览器和其他页面,因为其他页面的脚本是运行在它们自己的渲染进程中的。
所以当我们再在 Chrome 中运行上面那个死循环的脚本时,没有响应的仅仅是当前的页面
解决内存泄漏的问题
因为当关闭一个页面时,整个渲染进程也会被关闭,之后该进程所占用的内存都会被系统回收,这样就轻松解决了浏览器页面的内存泄漏问题
解决安全问题
采用多进程架构的额外好处是可以使用安全沙箱,你可以把沙箱看成是操作系统给进程上了一把锁,沙箱里面的程序可以运行,
但是不能在你的硬盘上写入任何数据,也不能在敏感位置读取任何数据,例如你的文档和桌面。
Chrome 把插件进程和渲染进程锁在沙箱里面,这样即使在渲染进程或者插件进程里面执行了恶意程序,恶意程序也无法突破沙箱去获取系统权限
4、前端怎么解决跨域
1、 通过jsonp跨域,动态创建script标签获取资源
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS),服务端加请求头Access-Control-Allow-Origin,
7、 nginx代理跨域,使用前端代理转发
8、 nodejs中间件代理跨域,node搭建一个前端服务,做为转发中间件
9、 WebSocket协议跨域:它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。
5、cookies sessionStorage和localstorage区别
在同一个页面中设置 Cookie,实际上是按从后往前的顺序进行的。如果要先删除一个 Cookie,再写入一 个 Cookie,则必须先写入语句,再写删除语句,否则会出现错误Cookie是面向路径的。缺省路径 (path) 属性时 ,Web 服务器页会自动传递当前路径给浏览器,指定路径强制服务器使用设置的路径。在一个目录页面里设置的 Cookie 在另一个目录的页面里是看不到的Cookie 必须在 HTML 文件的内容输出之前设置;不同的浏览器 对 Cookie 的处理不一致,使用时一定要考虑;客户端用户如果设置禁止 Cookie,则 Cookie 不能建立。并且在客户端, 一个浏览器能创建的 Cookie 数量最多为 300 个,并且每个不能超过 4KB,每个 Web 站点能设置的 Cookie 总数不能超过 20 个
客户端发送一个http请求到服务器端
服务器端发送一个http响应到客户端,其中包含Set-Cookie头部
客户端发送一个http请求到服务器端,其中包含Cookie头部
服务器端发送一个http响应到客户端
sessionStroage有哪些应用场景?
答: 在不需要和服务器交互的场所,用来存储用户数据之类的,可以在路由页跳转的时候取出更改储存,减少调用接口的次数,减轻服务器压力。
用storage怎么来判断用户是否需要再登陆?
答:可以用加密的方法存储,每次用户访问的时候可以取出调用服务器接口作为参数发送进行对比,存在账号密码就直接跳过登录页。
localStorage是否可以在同源窗口共享?
答:同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage,但是不同页面间无法共享sessionStorage的信息。
6、http 和 https 有何区别?如何灵活使用?
https协议要申请证书到ca,需要一定经济成本;
http是明文传输,https是加密的安全传输;
连接的端口不一样,http是80,https是443;
http使用tcp连接很简单,没有状态;https是ssl加密的传输,身份认证的网络协议,相对http传输比较安全。
流行的对称加密算法有:DES,Triple-DES,RC2和RC4
https(使用的是SSL协议)通信过程
(1)客户使用https的URL访问Web服务器,要求与Web服务器建立SSL连接。
(2)Web服务器收到客户端请求后,会将网站的证书信息(证书中包含公钥)传送一份给客户端。
(3)客户端的浏览器与Web服务器开始协商SSL连接的安全等级,也就是信息加密的等级。
(4)客户端的浏览器根据双方同意的安全等级,建立会话密钥,然后利用网站的公钥将会话密钥加密,并传送给网站。
(5)Web服务器利用自己的私钥解密出会话密钥。
(6)Web服务器利用会话密钥加密与客户端之间的通信。

SSL协议通信过程
(1) 浏览器发送一个连接请求给服务器;服务器将自己的证书(包含服务器公钥S_PuKey)、对称加密算法种类及其他相关信息返回客户端;
(2) 客户端浏览器检查服务器传送到CA证书是否由自己信赖的CA中心签发。若是,执行4步;否则,给客户一个警告信息:询问是否继续访问。
(3) 客户端浏览器比较证书里的信息,如证书有效期、服务器域名和公钥S_PK,与服务器传回的信息是否一致,如果一致,则浏览器完成对服务器的身份认证。
(4) 服务器要求客户端发送客户端证书(包含客户端公钥C_PuKey)、支持的对称加密方案及其他相关信息。收到后,服务器进行相同的身份认证,若没有通过验证,则拒绝连接;
(5) 服务器根据客户端浏览器发送到密码种类,选择一种加密程度最高的方案,用客户端公钥C_PuKey加密后通知到浏览器;
(6) 客户端通过私钥C_PrKey解密后,得知服务器选择的加密方案,并选择一个通话密钥key,接着用服务器公钥S_PuKey加密后发送给服务器;
(7) 服务器接收到的浏览器传送到消息,用私钥S_PrKey解密,获得通话密钥key。
(8) 接下来的数据传输都使用该对称密钥key进行加密。

7、常见的HTTP状态码
基本常见的相应状态码:
- 200("OK") 一切正常。实体主体中的文档(若存在的话)是某资源的表示。
- 400("Bad Request") 客户端方面的问题。实体主题中的文档(若存在的话)是一个错误消息。希望客户端能够理解此错误消息,并改正问题。
- 500("Internal Server Error") 服务期方面的问题。实体主体中的文档(如果存在的话)是一个错误消息。该错误消息通常无济于事,因为客户端无法修复服务器方面的问题。
- 301("Moved Permanently") 当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外,当客户端向一个资源的旧URI发送请求时,也发送此响应代码。
- 404("Not Found") 和410("Gone") 当客户端所请求的URI不对应于任何资源时,发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况;
- 410用于服务器端知道客户端所请求的资源曾经存在,但现在已经不存在了的情况。
- 409("Conflict") 当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时,发送此响应代码。
- SOAP Web服务只使用响应代码200("OK")和500("Internal Server Error")。无论是你发给SOAP服务器的数据有问题,还是服务器在处理数据的过程中出现问题,或者SOAP服务器出现内部问题,
- SOAP服务器均发送500("Internal Server Error")。客户 端只有查看SOAP文档主体(body)(其中包含错误的描述)才能获知错误原因。客户端无法仅靠读取响应的前三个字节得知请求成功与否。
8、优雅降级和渐进增强
- 渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
- 优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
- 可以理解为:向上兼容和向下兼容的概念。渐进增强相当于向上兼容,而优雅降级相当于向下兼容。

浙公网安备 33010602011771号