前端面试复习-1-浏览器和计算机网络等

发表于 | 分类于 | 评论数：

前言

打算好好复习面试要用到的知识点，也算是对自己学习的一个总结，一直以来我的学习都是缺乏笔记的（喂你怎么考上大学的？。这次正好培养一下这个习惯。这些笔记可能在我之后看到有错误或者新东西之后继续更新更正，也算是完善一下自己的知识树吧。

浏览器

常见的浏览器内核有哪些？

  • Trident（IE,360搜狗的兼容模式）
  • Gecko（Firefox）
  • Webkit（Chrome,Safari,android Chrome,android,ios,360搜狗的极速模式）

W3C和WHATWG分别是什么？

简而言之就是两个制定标准的组织，W3C党指微软，苹果等。 WHATWG党指谷歌，火狐等。浏览器终究还是商业斗争，web标准也是因为两党的斗争一直难以确定。他们在HTML5争得最多的还是最具争议的视频格式标准，音频格式标准（这两个的格式真的很奇怪……），图片格式标准和一些类似WebRTC，WebGL等谷歌提出的标准。

ECMAScript和JavaScript的区别？

ECMA是欧洲计算机制造商协会（European Computer Manufacturers Association），其中与JavaScript有关的文件叫做ECMA-262。ECMA-262定义了语言的基础，web浏览器只是ECMA的宿主环境之一，JavaScript只是ECMAScript的一种实现。

浏览器为什么给css加前缀？

在标准还未确定时，部分浏览器根据最初的草案实现了部分功能，为了与之后确定下来的标准兼容，每种浏览器使用了自己的私有前缀与标准进行区分。所以带有私有前缀的属性在浏览器之间的实现可能有一点点不同。

计算机网络

HTTP状态码有哪些？

  • 1** (信息类) 表示接收到请求并继续处理
    • 100 (Continue/继续) 表示请求成功，允许继续发送附加信息，例如post请求。
  • 2** (响应成功) 表示请求成功
    • 200 (OK/正常) 一切正常
    • 201 (Created/已创建) 请求成功并且服务器创建了新资源，应在头信息中给出其URL
    • 202 (Accepted/接受) 服务器已接受请求但是没有处理完
    • 205 (Reset Content/重置内容) 没有新资源但是浏览器要重置文档显示，用于强制浏览器清除表单域
    • 206 (Partial Content/局部内容) 在服务器完成了一个包含Range头信息的局部请求时被发送，可以用于断点续传
  • 3** (重定向类) 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
    • 301 (Moved Permanently/永久重定向) 请求的文档在别的地方，新URL会在响应头信息中给出，浏览器自动连接到新URL
    • 302 (Moved Temporarily/临时性重定向) 与301类似，但是头信息中的URL只是临时性的交换地址。
    • 303 (See Other/参见其他信息) 与301，302类似，要求总是用GET请求新的URL
    • 304 (Not Modified/未修正) 自上次请求后，资源未被修改，通过客户端If-Modified-Since头信息来判断。
  • 4** (客户端错误类) 表示客户端的错误
    • 400 (Bad Request/错误请求) 客户端请求语法错误
    • 401 (Unauthorized/未授权) 在授权头信息中没有有效的身份信息，请求未授权。
    • 403 (Forbidden/禁止) 有授权但是服务器拒绝提供资源（权限不同？）
    • 404 (Not Found/未找到) 找不到与URI相匹配的资源
  • 5** (服务器错误类) 表示服务器的错误
    • 500 (Internal Server Error/内部服务器错误) 最常见的服务器端错误
    • 503 (Service Unavailable/服务无法获得) 可能是因为服务器维护或者超载而无法响应

HTTP中与缓存相关的头信息

  • Expires GMT时间，告知浏览器在这个时间前信任缓存中的副本，缺点是客户端时间可能不准
  • Cache-Control 属于http1.1 内容可能有以下几种
    1. public 响应头，通知浏览器无条件缓存该响应
    2. private 响应头，通知浏览器只针对通知浏览器只针对单个用户缓存响应. 且可以具体指定某个字段.如private–”username”
    3. no-cache 请求头，浏览器去服务器取数据并验证缓存。响应头，告诉浏览器必须要回服务器校验，不管有没有缓存。如果确定没有被改，可以使用缓存中的数据。
    4. no-store 要求浏览器任何情况下都不要缓存
    5. max-age 强制浏览器根据该值校验缓存。即与自身的Age值，与请求时间做比较，如果超出max-age值，则强制去服务器端验证。以确保返回一个新鲜的响应。其功能与传统的Expires类似，但区别在于Expires是根据某个特定日期值做比较，一但客户端自身的时间不准确.则结果可能就是错误的，而max-age则都是客户端时间比较。max-age的优先级高于Expires。
  • Last-Modified GMT时间，告诉客户端这个资源的最后修改时间。与其相对应的有If-Modified-Since，客户端在请求时带上这个表示客户端中资源的最后修改时间，然后服务端将两个时间验证，决定是否返回304。

GET和POST扫盲？

  1. GET和POST与数据如何传递没有关系。HTTP协议中，Method和data是正交的两个概念，使用哪个Method与应用层数据如何传递没有关系。我们常见的说法是HTML标准对HTTP协议用法的约定（即GET用URL或Cookie传参，POST用BODY传参）。
  2. HTTP协议中对Http头和BODY都没有长度要求。URL的长度限制有两方面原因
    • 浏览器限制
    • 服务器限制，为了安全和稳定，防止服务器负担太大，是针对所有HTTP请求的限制，与Method没关系
  3. GET和POST都不安全，要安全就用Https。
  4. HTTP协议中GET是安全和幂等的。POST不安全也不幂等。（幂等：一次或多次操作具有相同的作用）安全和幂等的意义在于当操作没有达到预期的目标时，我们可以不停的重试，而不会对资源产生副作用。同理PUT，DELETE也是安全和幂等的。

Https是什么？

以安全为目的的http通道，在http下加入TLS（历史原因，SSL3.0之后被TLS替代）。

  • HTTPS协议需要申请证书，大部分要收费。
  • http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。
  • http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
  • http的连接简单，是无状态的。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

从输入URL到页面加载显示完成，发生了什么？

  1. 浏览器开启一个线程来处理这个请求，对URL分析如果是http协议就按照web方式来处理
  2. 通过DNS解析获取IP地址，设置UA等信息发出第二个GET请求
  3. 进行HTTP协议对话，客户端发送请求报头
  4. 进入到服务器上的Web Server，如Apache、Tomcat、Node.JS等服务器
  5. 进入部署好的后台应用，找到对应的请求处理
  6. 处理结束返回报头和资源，如果是访问过的资源，比较服务器最后修改时间，选择是否返回304
  7. 如果html没有缓存，浏览器就开始下载html文档，同时使用缓存资源
  8. html一边下载一边解析，根据标签建立DOM
  9. 根据url下载所需css，js，图片资源，css是异步下载，同步施行，会阻塞式地建立CSSOM，和DOM一起渲染成完整的render树
  10. js是异步下载同步执行，在js后面的html内容呈现会被阻塞
  11. 当js运行完成，页面加载完成

TIPS：

  • 如果把CSS放在底部，页面会出现无样式布局直到CSS加载完成出现闪屏的现象（CSS加载完成后再次渲染）
  • 当浏览器遇到（内嵌）script标签时，当前浏览器无从获知javaScript是否会修改页面内容。因此，这时浏览器会停止处理页面，先执行javaScript代码，然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加在javaScript的过程中（即外链 javaScript），浏览器必须先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻塞了。也就是说：每当浏览器解析到script标签（无论内嵌还是外链）时，浏览器会（一根筋地）优先下载、解析并执行该标签中的javaScript代码，而阻塞了其后所有页面内容的下载和渲染。从 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 开始都允许并行下载 JavaScript 文件 script标签在下载外部资源时不会阻塞其他script标签。遗憾的是，JavaScript 下载过程仍然会阻塞其他资源的下载，比如样式文件和图片(之前的版本会阻塞所有资源的下载),还是会锁死浏览器的一段时间（无法交互）

前端性能优化方法

  • 请求数量：合并压缩JS和CSS，CSS sprite，拆分初始化负载（按需加载？），划分主域，
  • 请求大小：合并压缩JS和CSS，CSS sprite，开启gzip，精简JS，图像优化
  • 缓存利用：使用CDN，使用外部JavaScript和CSS，减少DNS查找
  • 页面结构：将样式表放在顶部，将脚本放在底部

关于划分主域，浏览器执行“每个服务端最大连接数”的限制是根据URL上的主机名，而不是解析出来的IP地址。为了新域建立一条CNAME记录，CNAME仅仅是域名的一个别名。即使域名都指向同一个服务器，浏览器依旧会为每个主机名开放最大连接数。域的数量最好是两个，过多可能会导致服务器端压力过大。

浏览器客户端安全

XSS原理

XSS，跨站脚本攻击。在页面中插入恶意脚本，在用户浏览时触发。

XSS防范

XSS攻击方法多样，很难彻底防范，最方便的就是检测用户输入。

CSRF原理

CSRF，跨站点请求伪造。未经授权的系统会伪造自己（可能通过使用者的Cookie等信息）让服务器认为它合法。

CSRF防范

  • 验证码
  • 请求加上计算获得的TOKEN