前端面经总结（二）

接前端面经总结（一）

HTML语义化标签理解

语义化即元素本身穿大了关于标签所包含内容类型的一些信息。如<header>、<nav>、<article>、<aside>、<footer>等，使用语义化标签有利于呈现更好的内容结构，有利于SEO，并提升用户体验，便于团队开发维护，以及方便其他设备解析渲染页面，如屏幕阅读器，移动设备等。

RESTful理解

URL中使用名词定位资源，用HTTP动词（GET,POST,DELETE等）描述操作。

iframe通信

• 父子页面通信

  互相调用对方的方法。如window.parent.父级方法、document.getElementById("id").contentWindow.子页面方法.

• localStorage/sessionStorage

• 不同源

  • postMessage()

    父页面使用addEventListener()，子页面通过window.parent获取父页面后使用window.postMessage()。

  • 在window上注册方法，在子iframe中调用。

    父页面：window["messageStr"]=function(arg){console.log(arg)}；
        　　 子页面：window.parent.messageStr("from child");

浏览器缓存

浏览器缓存：浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器可以直接从本地磁盘加载文档

分类：强缓存/协商缓存

浏览器进行资源请求时，判断response headers是否命中强缓存，若命中，资源的State状态码为200(from cache)，直接从本地读取缓存，不向服务器发送请求。若没有命中，发送请求到服务端，判断协商缓存是否命中，若命中，资源State状态码为304(not modified)，服务器将请求返回，不返回资源，告诉浏览器从本地读取缓存，若没命中则服务器直接返回资源。

两者都是从客户端读取资源，但强缓存不会发请求。

• 强缓存

  强缓存利用http头中Expires和Cache-Control两个字段控制，用来表示资源的缓存时间。强缓存被普通刷新忽略但不清除它，需要强制刷新清除。强制刷新请求Cache-Control:no-cache和Pragma=no-cache。只有在地址栏或收藏夹输入网址或通过链接引用资源等情况，强缓存才会被浏览器启用。

  • Expires：失效时间

    http1.0的规范，一个绝对时间的GMT格式的时间字符串。用来表示资源的失效时间，但当同时出现Cache-Control:max-age时，优先max-age。

  • Cache-Control

    http1.1的规范，利用其max-age值来判断，是一个相对时间，代表资源的有效期。其他值有no-cache-不使用缓存、no-store-禁止浏览器缓存数据、public-可以被所有用户缓存、private-只能被终端用户的浏览器缓存，不允许中继缓存服务器对其缓存。

• 协商缓存

  由服务器确定缓存资源是否可用。涉及两组头部字段Etag+If-None-Match、Last-Modified+If-Modified-Since。

  • Etag/If-None-Match

    Etag/If-None-Match返回一个校验码。Etag保证每个资源是唯一的，资源变化则Etag变化。服务器根据If-None-Match判断是否命中缓存。当服务器返回304时，Etag仍会返回，但跟之前的相同，没有变化。

  • Last-Modify/If-Modified-Since

    Last-Modify表示资源的最后修改时间。当浏览器再次请求资源时，request请求头包含If-Modify-Since，为缓存之前返回的Last-Modify，服务器收到后根据资源最后修改时间判断是否命中缓存。

    当Last-Modify和Etag一起使用时，优先验证Etag，验证一致才会对比Last-Modify。

如何判断什么时候用强缓存，什么时候用协商缓存

在缓存有效期内命中缓存，浏览器直接读取本地缓存。当缓存过期后与服务器协商，判断Etag/Last-Modify，若服务器返回304则读取本地缓存。

地址栏输入一个URL到页面呈现中间发生什么

1. 在浏览器输入URL

2. 浏览器查看缓存是否有此URL相关的信息，若有，直接显示页面内容。

3. 若没有，浏览器将请求的URL交给DNS解析获取网址的IP地址。

4. 浏览器向服务器发起tcp连接，通过三次握手建立连接。

5. 连接成功后向服务器发送http请求，请求数据包

6. 服务器处理请求，若浏览器之前访问过，且缓存有对应资源，便与服务器最后修改时间对比，若一致返回304，告诉浏览器使用本地缓存。

7. 浏览器接收到报文后开始下载网页。

8. 下载完的网页交给浏览器内核渲染，其中将HTML网页和资源构建成节点，组建DOM树，同时CSS解释器将CSS文件解释成内部表示结构，生成CSS规则树。

9. 合并CSS规则树和DOM树，生成render渲染树，最后将其布局绘制最终显示。

前端性能优化

1. 减少HTTP请求次数，即压缩JS、CSS源码，控制图片大小，合并资源等。

2. 避免多余的中间访问，即重定向

3. 减少DOM元素、iframe、404页面数量

4. 减小cookie

5. 从外部引入JavaScript和CSS

6. 合理设计事件监听

7. 优化CSS Sprites

8. 减少DNS查询次数（不要嵌入过多推案和脚本）

首页加载缓慢，如何优化

1. 设置浏览器缓存：添加expires/cache-control

2. 使用CDN加速

3. 使用redis等手段快速获取数据

4. 提高sql查询速度

5. 提前生成相关数据，预加载

6. 压缩组件

7. 按照页面或组件分块懒加载，使用到组件时，才想服务器请求文件，再次使用时即可使用缓存。

8. 尽可能缩小打包后生成的包大小

GET/POST区别

1. GET通过url传递，POST在request body中

2. GET请求传递的参数长度有限制，POST没有限制

3. GET安全性较差，所发送的数据是URL的一部分，POST更安全，参数不会保存在浏览器历史或web服务其日志

4. GET数据所有人可见，POST不可见

5. GET用于获取信息，POST用于修改服务器数据

HTTP支持的方法：GET、POST、HEAD、OPTIONS、DELETE、TRACE、CONNECT

HTML5新增内容

1. 增加一些语义元素header、section、footer、main、article、aside等

2. 增加新的表单控件email、search、url等和新的input类型date、datetime等

3. 移除过时的标签big、frame等

4. 增加多媒体audio、video、source等

5. web存储，localStorage和sessionStorage

6. 新增绘画元素canvas

7. 可伸缩矢量图形svg

HTTP常见头部

1. 请求头

   • accept：可接受的响应内容类型

   • Authorization：用于表示HTTP协议中需要认证资源的认证信息

   • Cache-Control：用来指定当前请求/response中缓存机制

   • cookie：由服务器通过Set-Cookie设置的HTTP协议Cookie

2. 响应头

   • Status：说明当前HTTP连接的响应状态

   • Set-Cookie：设置HTTP Cookie

   • Expires： 指定资源失效时间

怎么看网站性能

1. 在页面置入脚本或探针，当用户访问网页时，探针自动采集数据并传回数据库分析

2. 搭建受控环境，使用第三方工具模拟用户发起页面访问请求，主动采集数据分析。

options预检请求作用

浏览器对复杂跨域请求在真正发送请求之前,会先进行一次预请求,就是参数为OPTIONS的请求。其作用是检查服务器响应是否正确,即是否能接受真正的请求,如果在options请求之后获取到的响应是拒绝性质的,例如500等http状态,那么它就会停止第二次的真正请求的访问。

浏览器的渲染原理

1. 解析HTML文档生成DOM树

2. 解析CSS样式，生成CSSOM树，和HTML无先后顺序

3. 根据DOM树和CSSOM树生成用于渲染的渲染树render tree

4. 对渲染树的每个节点进行布局处理，确定在屏幕上的显示位置

5. 遍历渲染树用UI将每个节点绘制出来。

网络模型

1. OSI七层模型：应用层、表示层、会话层、传输层、网络层、数据链路层、物理层

   • 应用层：HTTP/FTP/SMTP等

   • 表示层：Telnet等

   • 会话层：SMTP/DNS

   • 传输层：TCP/UDP

   • 网络层：IP/ICMP/ARP等

   • 数据链路层：PPP等

   • 物理层：IEEE 802.1等

2. TCP/IP四层模型：应用层、运输层、网际层和网络接口层。

   • 网络接口层：网络接口

   • 网际层：IP

   • 运输层：TCP/UDP

   • 应用层：HTTP/DNS/SMTP

3. 五层体系结构：应用层、运输层、网络层、数据链路层、物理层