2020年前端面试题·一

前端需要注意哪些SEO优化问题

1. 合理设置 title 、description 、keywords ，三者的搜索权重逐级递减
   title ：重点强调，尽量靠前，关键词不要出现两次，不同页面 title 要有所不同
   description ：页面内容的高度概括，不要过分堆叠关键词，不同页面的 description 要有所不同
   keywords ：列举出重要的关键词
2. 语义化 HTML 代码，遵循 W3C 规则，让搜索引擎更好理解
3. 重要的 HTML 内容要放在前面，因为搜索引擎是从上向下抓取 HTML 代码，且抓取长度有限
4. 非装饰性的图片，img 标签一定要添加 alt 属性，浏览器会重点解析
5. 重要的内容不要放到 JS 中，搜索引擎不会抓取 JS 中的内容
6. 尽量避免使用 iframe ，搜索引擎不会抓取 iframe 中的内容
7. 提高网页速度，速度是搜索引擎优化排名的重要指标
   减少 HTTP 请求，尽量使用精灵图
   使用 CDN 引入外部 CSS 和 JS
   样式引入放在头部，脚本引入放在尾部
   避免使用 CSS 行内表达式
   精简 JS 文件

 

img 标签 title 属性和 alt 属性的区别

title 属性时在鼠标悬停在图片上时展示的内容
alt 是图片不能正常加载的时候所展示的替代内容，会被搜索引擎重点解析

 

浏览器渲染页面的流程

1. 输入 URL 后，浏览器会根据网站的 URL 去向 DNS 请求的到服务器的 IP 地址
2. 浏览器根据 IP 地址与服务器进行连接，期间经过三次握手
3. 浏览器向服务器发送 HTTP 请求，接收响应
4. 浏览器解析响应数据，并渲染页面
5. 由上向下解析 HTML 文档，以 字节 – 字符 – 标签 – 节点 – 树 的转化顺序将文档同步构建为 DOM 树和 CSSOM 树

6. 下载 JS 脚本并执行，下载和执行期间停止对 DOM 和 CSSOM 的解析和构建
7. 脚本执行完毕后将 DOM 和 CSSOM 合并为渲染树，并渲染到页面上
8. 关闭页面时四次挥手断开连接

 

三次握手和四次挥手

客户端和服务器端进行数据交互之前，首先要进行 TCP 连接，连接过程需要通过三次握手进行三次网络传输，交互完成后进行连接释放，释放时会进行四次网络传输完成四次挥手。

TCP中比较重要的字段有：

1. Seq序号（序号）：占32位，用来标识从TCP源端向目的端发送的字节流，发起方发送数据时对此进行标记
2. Ack序号（确认号）：占32位，只有ACK标志位为1时，确认序号字段才有效，Ack = Seq + 1
3. 标志位：URG（紧急指针有效）、ACK（确认号有效）、PSH（接收方应尽快将报文交给应用层）、RSH（重新连接）、SYN（创建连接）、FIN（释放连接）

三次握手：

1. 客户端发送一串报文给服务器端，表示想要建立连接：SYN = 1, Seq = X，客户端进入 SYN-SENT状态
2. 服务器端确认接收报文，并返回一串报文表示可以建立连接：SYN = 1, Seq = Y, ACK = 1, Ack = X + 1，服务器端进入 SYN-SENT 状态
3. 客户端确认接收报文，返回一段报文表示建立连接：Seq = X + 1, ACK = 1, Ack = Y + 1

四次挥手

1. 客户端发送一串报文，表示断开连接：FIN = 1, Seq = X
2. 服务器端接收报文，并返回一段报文表示我准备好要释放连接了：Seq = Y, ACK = 1, Ack = X + 1
3. 服务器端发送报文，表示我已经释放连接了：FIN = 1, Seq = Z, ACK = 1, Ack = X + 1
4. 客户端接收报文，并返回一段报文表示我也释放连接了：Seq = X + 1, ACK = 1, Ack = Z + 1

 

CSS和JS的位置会影响页面的效率，为什么？

CSSOM 和 DOM 是并行解析，越早引入 CSS 越节省时间
相反下载和执行 JS 脚本的时候，会停止对 CSSOM 和 DOM 的解析，所以越晚引入 JS 越好

 

重绘和重排

重绘是指页面会重新进行绘制，在 CSSOM 节点发生变化但不会影响页面的整体结构时会进行重绘，即节点的宽高不发生变化。
重排是指页面会重新进行排列，在 CSSOM 节点发生变化且会影响页面结构时会进行重排。

 

对浏览器内核的理解

浏览器内核分为渲染引擎和 JS 引擎，但随着 JS 引擎越来越独立，现在浏览器内核泛指渲染引擎
  渲染引擎负责获取网页信息，计算网页的显示方式。内核不同，对页面的解释就不同，渲染效果就不同
  JS 引擎负责解析和执行 JS ，来操作页面元素
常见浏览器内核：webkit（苹果）、Gecko（火狐）、Trident（IE）、Blink（谷歌）、Presto（欧鹏）
CSS 私有前缀：

1. -webkit- ：代表苹果（Safari）和谷歌（Chrome）浏览器的私有前缀
2. -moz- ：代表火狐的私有前缀
3. -o- ：代表欧鹏的私有前缀
4. -ms- ：代表 IE 的私有前缀

 

HTTP 状态码

1XX：信息状态码

1. 100：Continue 继续，一般在发送 POST 请求时，已发送了 http header 后，服务器响应此信息，表示确认，之后发送具体参数信息

2XX：成功状态码

1. 200：OK 正常返回信息
2. 201：Created 成功请求并且服务器创建了新的资源
3. 202：Accepted 服务器已接收请求，但未做处理

3XX：重定向

1. 301：Moved Permanently 请求的网页已永久移动到新的位置
2. 302：Found 临时重定向
3. 303：See Other 临时重定向，且总是用 GET 请求新的 URL
4. 304：Not Modified 自上次请求后，请求的网页未修改过

4XX：客户端错误

1. 400：Bad Request 服务器无法理解请求的格式
2. 401：Unanthorized 请求未授权
3. 403：Forbidden 禁止访问
4. 404：Not Found 找不到与 URL 相匹配的资源

5XX：服务器端错误

1. 500：Internal Server Error 最常见的服务器端错误
2. 503：Service Unanvailable 服务器端暂时无法处理请求（可能是过载或维护）

 

cookie、localStorage、sessionStorage 的区别

功能：

1. cookie 一般是用来确定用户身份而存储在浏览器端的数据，在每次向服务器发起请求时需要携带，并且在浏览器端和服务器端来回传递
2. localStorage 和 sessionStorage 只是为了在浏览器端存储数据，不需要在每次请求的时候携带

存储时间：

1. cookie 在设置了有效期时，当到达有效期后数据会被清除，如果没有设置有效期，则在浏览器窗口关闭后失效
2. sessionStorage 在关闭浏览器或窗口后失效
3. localStorage 除非主动删除，否则在浏览器或窗口关闭后依旧有效

存储大小：

1. cookie 只能存储大小不能超过 4kb
2. localStorage 和 sessionStorage 能够存储 5M 甚至更大的数据

 

iframe 有哪些缺点

1. iframe 会阻断主页面的 onload 事件
2. iframe 不利于 SEO 优化
3. 会影响页面的并行加载
4. 向 iframe 中动态添加 DOM 元素时会出现滚动条

 

W3C标准是什么

标签闭合、标签小写、不乱嵌套、使用外链 CSS 和 JS、结构行为表现的分离

 

viewport

<meta name="viewport" content="width=device-width;initial-scale=1.0;user-scalable=false" />
// width：设置 viewport 宽度，为正整数，或者字符串 'device-width'
// device-width：屏幕宽度
// initial-scale：默认缩放比例，数字，可以为小数
// user-scalable：允许用户手动缩放
// minimum-scale：允许最小缩放比
// maximum-scale：允许最大缩放比

 

怎样处理移动端 1px 被渲染为 2px

1. meta 标签中 initial-scale 设置为1.0，rem 按照设计图走，transform: scale(0.5)
2. meta 标签中 initial-scale 设置为 0.5，rem根据设计稿走

 

利用 rem 进行适配

rem 是参考自 html 标签中的 font-size 大小，例：html 标签中 font-size: 14px; ，则 1rem 为 14px

计算 rem ：

1. 假设屏幕宽度为 ScreenX（px），设计稿的宽度为 RealX（px），则令 n = ScreenX / RealX
2. 此时，设计稿中的一个元素宽度为 X ，假设这个元素在屏幕上宽度为 Y ，则 Y / ScreenX = X / RealX ，即 Y = X * ScreenX / RealX ，Y = X * N
3. 此时设置 html 标签中的 font-size: npx; ，则 1rem = n ，所以 Y = X rem

 

渲染优化的方法

1. 禁止使用 iframe
2. 禁止使用 gif 实现 loading 的效果（可以使用 @keyframe）
3. 尽量使用 css3 代替 js 动画 （尽量避免重绘、重排）
4. 对于一些小图标，尽量使用 base64 编码
5. 尽量不要在头部使用 <script>
6. 页面中空的 href 和 src 会阻碍页面中其他资源的加载
7. 设置的样式很多时要是用 className
8. 使用变量将 ajax 返回值保存到本地，避免每次使用都需要去重新请求

 

div + css 布局相较 table 布局的优点

1. 改版的时候更加方便
2. 页面加载速度更快，结构更清晰
3. 变现和结构相分离
4. 对搜索引擎更加友好，便于 SEO

 

优雅降级和渐进增强？

优雅降级和渐进增强是用来处理兼容性的两种方式。
优雅降级是指，一开始就考虑高级浏览器开发好完整功能，在逐步根据低版本浏览器的需求进行兼容。
渐进增强是指，一开始只根据低级浏览器开发基本功能，再针对高级浏览器开发效果，交互，提升用户体验。