1. DOMContentLoaded 和 load 的区别

DOMContentLoaded:当初始的 HTML 文档被加载和解析完成之后， DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。

Load:当一个资源及其依赖资源已完成加载时，将触发 load 事件。
当 HTML 文档解析完就会触 DOMContentLoaded,而所有资源加载完成之后，load 事件才会被触发。

提示：在 Chrome 的 network 一栏中，蓝色的竖线指示着 DOMContentLoaded 的时间点，红色的竖线指示着 Load 的时间点。

2.讲讲 csrf 攻击以及怎么防范

CSRF(Cross-site request forgery)

要完成一次CSRF攻击，受害者必须依次完成两个步骤：

  1. 登陆受信任网站A，并在本地生成Cookie；
  2. 受害者访问危险网站B，网站B中发送请求给网站A，请求会自动带上Cookie。

CSRF 攻击三种方式

自动 GET 请求
自动 POST 请求
诱导点击发送 GET 请求

防范措施

  • Cookie 中有一个关键字段 SameSite 可以设置三个值： Strict、Lax、None，设置成 Strict 就可以了。
  • 验证来源站点：请求头中的两个字段 Origin 和 Referer (Origin 只包含域名信息， Referer 包含具体的 URL 路径)。这两者都可以伪造，在 Ajax 中自定义请求头即可，安全性差。
  • CSRF Token: 浏览器向服务器发送请求时，服务器生成一个字符串，将其植入到返回的页面中。后续浏览器如果要发送请求，就必须带上这个字符串，然后服务器来验证是否合法，如果不合法不予响应。通常第三方站点无法拿到这个 token, 因此会被服务器给拒绝。

CSRF 的防范：

  • 验证码；
  • 检查请求的 Referer 头部
  • Cookie 的 sameSite 属性
  • CSRF Token

3.一个 div 中有一个 image 标签，图片的高度是 500px, div 默认样式，则 div 的高度是多少？

默认 div 的高度会大于 image 的高度。

官方解释：
官方解释
图片是 inline 元素，图片的 bottom 会与基线对齐，基线下会多出空间留给下降空间。

解决方法：

img{display: block;} or img{vertical-align: bottom;}

4. 两栏布局，左边固定宽度，右边自适应，有哪几种方法实现？

1. flex

.container {
    dispaly: flex;
}
.left {
    width: 200px;
}
.right {
    flex: 1;
}

2. calc

.left {
    width: 200px;
}
.right {
    width: calc(100vw-200px);

3. float

.left{
    width: 200px;
    float: left;
}
.right {
    margin-left: 200px;
}

5. 讲讲常见的状态码

HTTP的状态码为三位数，被分为五类：

  • 1xx: 表示协议处理的中间状态，还需要后续操作；
  • 2xx: 表示成功状态；
  • 3xx: 重定向状态，资源位置发生变动，需要重新请求；
  • 4xx: 请求报文有误；
  • 5xx： 服务端发生错误；

101 Switching Protocols。在 HTTP 升级为 WebSocket 的时候，如果服务器同意变更，就会发送状态码 101。
200 Ok. 通常在响应体中放有数据；
204 No Content 含义与 200 相同，但是响应头后没有 body 数据 ；
206 Partial Content. 表示部分内容，它的使用场景为 HTTP 分块下载和断电续传，当然也会带上相应的响应头字段 Content-Range；
301 Moved Permanently。永久重定向，对应 302 临时重定向；
304 Not Modified. 当协商缓存命中时会返回这个状态码；
404 Not Found 资源未找到，表示没有在服务器上找到对应的资源；

6. ES6 新增的特性

7. 谈谈对语义化标签的理解

常用的语义化标签

header（页眉）、footer（页脚）、hgroup、nav (导航)、aside（附属信息、侧边栏）、section（节、段）、article等

语义化的优点

html 语义化让页面内容更加结构化，结构更清晰，便于浏览器和搜索引擎解析；
更加容易阅读；
利于搜索引擎优化（SEO）；
方便其他设备解析，例如盲人阅读器、屏幕阅读器以有意义的方式解析；

8. HTML 基本结构， 标签介绍

基本结构

<html>
<head></head>
<body></body>
</html>

标签

meta 标签常用于定义页面的说明，关键字，最后修改日期和其他的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其他网络服务。

meta 的常见属性

// charset 属性
<meta charset="utf-8" />
// name + content 属性
<meta name="author" content="宋情困" />
<meta name="keywords" content="meta,html" />
<meta name="viewport" content="width=device-width" />
// http-equiv 属性： 相当于 http 的响应头作用，可以想浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。
// 指定网页的过期时间
<meta http-equiv="expires" content="Fri, 12 Jan 2020 18:18:18 GMT" />
// 等待一定的时间刷新或跳转到其他 url
<meta http-equiv="refresh" content="1; url=https://www.baidu.com" />

9. React 生命周期函数

React 生命周期主要分为三个阶段：1. Mounting（挂载阶段）、2. Updating （更新阶段）、3. 卸载阶段

挂载阶段

Mounting 涉及4个钩子函数
constructor(): 加载的时候调用一次，可以初始化 state;

static getDerivedStateFromProps(props, state)
组件每次被重新渲染的时候，包括在组件构建之后（虚拟 dom 之后，实际 dom 挂载之前），每次获取新的props 或 state 之后，每次接收新的 props 之后都会返回一个对象作为新的 state，返回 null 说明不需要更新 state；
render()
react 最重要的步骤，创建虚拟 dom，进行 diff 算法，更新 dom 树都在此进行；
componentDidMount():组件渲染之后之后调用，只调用一次；

更新阶段

Updating（更新阶段：涉及5个钩子函数）
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState)
组件接收到新的 props 或者 state 时调用，return true就会更新 dom （使用 diff 算法更新），return false 能阻止更新（不调用 render）；
render()
getSnapshotBeforeUpdate(prevProps, prevState)
触发时间： update 发生的时候，在 render 之后，在 dom 渲染之前；返回一个值，作为 componentDidUpdate 的第三个参数；
componentDidUpdate()
组件加载时不调用，组件更新完成后调用；

卸载阶段

UnMounting(涉及一个钩子函数)
componentWillUnmount()
组件渲染之后调用，只调用一次；

10. React-Router 两种路由简单介绍

HashRouter 和 BrowserRouter
如果有服务端的动态支持，建议使用 BrowserRouter, 否则建议使用 HashRouter。

11. 使用过的跨域方式，各自的优缺点

跨域问题产生的原因

同源策略：端口相同、域名相同、协议相同

  • 同源策略是浏览器所做的，目的是为了保证用户信息的安全，防止恶意的网站窃取数据。
  • 同源策略限制范围：
    1. Cookie、LocalStorage、IndexDB无法读取；
    2. DOM 无法获取；
    3. AJAX 请求不能发送；

解决方法

CORS(cross-origin resource sharing)跨域资源请求：浏览器发送一个跨域的 ajax 请求的时候，请求头会加上 origin 字段，但是它不知道这个资源服务端是否允许跨域请求。浏览器会发送到服务端，如果服务器返回的头中没有‘Access-Control-Allow-Origin’：‘对应网址或*’的话，那么浏览器会把请求内容给忽略掉，并且会在控制台报错。

CORS 允许简单的请求方法：GET、POST、HEAD
CORS 允许的 Content-Type ： text/plain、multipart/form-data、 application/x-www-form-ulencoded
其他类型的请求方法和 Content-Type 需要通过预请求验证 OPTIONS 后才能发送

JSONP 跨域

原理

浏览器虽然有同源限制，但是像 script 标签、link 标签、img 标签、 iframe 标签，这种标签上通过src 地址来加载一些内容的时候浏览器是允许进行跨域请求的。

各种跨域方式的优缺点

JSONP 的优点是兼容性好，可用于解决主流浏览器跨域数据访问的问题；缺点是仅支持 get 方法，只能用来获取资源，并且无法进行错误处理。
CORS 优点是支持所有类型的请求方法，功能完善，并且可以进行错误处理，用 onerror 监听错误， CORS 更加安全；缺点兼容性不够好，IE10 以下不支持 CORS。

12. css让超宽文字转换为省略号

// 该方法仅适用于单行文本溢出省略处理
// 设置宽度
width: 300px;
// 强制文本在一行中显示
white-space: nowrap;
// 隐藏溢出内容
overflow: hidden;
// 溢出进行省略
text-overflow: ellipsis;

// 多行文字溢出省略处理

display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;

效果展示

13. 前端性能优化的方法

雅虎14条军规

  1. 减少 HTTP 请求；
  2. 使用 CDN （内容分发网络）；
  3. 添加 Expires/Cache-Control 头；
  4. 使用 Gzip 压缩；（LZ77 算法、DEFLATE 算法）
  5. 将 CSS 放在页面的最上面；
  6. 将 script 放在页面的最下面；
  7. 尽量避免使用 CSS 表达式；
  8. 将脚本文件和样式文件放在外部文件中；
  9. 减少 DNS 查找；
  10. 最小化 JS 和 CSS；
  11. 避免重定向；
  12. 避免重复的脚本；
  13. 配置实体标签 ETag;
  14. 使用 Ajax 缓存；