web前端面试题最全版总结

一、前端必备

1、web前端性能优化

1.1 性能评级工具

PageSpeed 是由谷歌官方开发的一款可以分析页面载入的各个方面，包括资源、网络、DOM以及时间线等等信息的在线检测工具。(Google的插件)

YSlow是Yahoo发布的一款基于FireFox(火狐浏览器)的插件，这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则进行优化。它可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow会列出具体的修改意

1.2 前端性能优化

1、从DOM结构和标签上来优化

• 使用语义化的标签，代码清晰简洁；
• 减少Dom节点，增加渲染速度；
• 使用W3C标准书写闭合小写的标签；
• 给图片和table指定宽高，避免缩放；
• 防止src和href值为空，当为空时，浏览器会把当前页面当做属性值重新加载
• css在头部位置，js在body底部位置
• 尽量合并js和css，对js和css进行压缩，可以缩短文件传输时间；
• 避免在html标签中写style属性

2、从CSS样式上来优化

• 使用link加载样式而不是@import
• 避免使用css表达式；
• 删除重复的css，css简化；
• 使用css 缩写 如#fff，减少代码量；
• 减少css查询层级，如.header .log 要好于.header .top .log；
• 减少css查询范围，如header>div获取直系子元素要好于heade div；

3、从js上来优化

• js尽量少用全局变量；
• 多个js变量声明合并；
• 删除重复的js
• 使用setTimeout来避免页面失去响应
• 图片懒加载（data-src）

4、网络优化

• 减少 HTTP 请求数量
• 利用浏览器缓存，公用依赖包（如vue、Jquery、ui组件等）单独打包/单文件在一起，避免重复请求
• 减小cookie使用，尽量用localStorage代替
• CDN托管静态文件

2、浏览器内核

主要分成两部分：渲染引擎和JS引擎

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页 的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的 效果也不相同。

JS引擎则：解析和执行javascript来实现网页的动态效果

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引

3、常见的浏览器内核有哪些

• Trident内核(IE内核)：用它的浏览器有：ie、360浏览器
• Webkit内核(谷歌内核)：用它的浏览器有：谷歌浏览器、枫树浏览器、太阳花
• Gecko内核： 用它的浏览器有：Netscape6、、火狐浏览器、K-Meleon浏览
• Presto内核：用它的浏览器有：Opera浏览器

4、cookies、sessionStorage、localStorage 和 indexDB 的区别

cookie是网站为了标示用户身份而储存在用户本地的数据

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

1、是否在http请求只能够携带

• cookie数据始终在同源的http请求中携带，跨域需要设置withCredentials = true
• sessionStorage和localStorage和indexDB不会自动把数据发给服务器，仅在本地保存

2、存储大小

• cookie数据大小不能超过4k；
• sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更 大，因不同浏览器大小不同；
• indexDB允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的

3、 有效时间

• cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
• localStorage 硬盘存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
• sessionStorage 存在内存中，数据在当前浏览器窗口关闭后自动删除
• indexDB除非被清理。否则一直存在

5、从输入URL到浏览器显示页面过程中都发生了什么

1、浏览器根据请求的URL交给DNS域名解析，找到真实IP。
2、找到真实的IP地址后，浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手。
简单的讲，通信连接的建立需要经历以下三个过程：
（1）客户端向服务器发送一个建立连接的请求（您好，我想连接您）；
（2）服务器接到请求后发送同意连接的信号（好的，可以连接）；
（3）客户端接到服务器端同意连接的信号后，再次向服务器发送了确认信号（好的，确认连接）。
自此，客户端与服务器两者建立了连接。
（三次握手的过程采用 TCP 协议，其可以保证信息传输的可靠性，三次握手过程中，若一方收不到确认信号，协议会要求重新发送信号）
3、浏览器开始发送HTTP请求
4、服务器处理请求并返回HTTP报文，其实就是服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；服务器将得到的 HTML 文件发送给浏览器；
5、浏览器解析渲染页面
6、连接结束（TCP四次挥手）
（1）主机向服务器发送一个断开连接的请求（不早了，我该走了）；
（2）服务器接到请求后发送确认收到请求的信号，进入CLOSE-WAIT（等待关闭）状态（知道了）；
（3）数据传输完毕后，服务器向主机发送断开通知，服务器进入LAST-ACK（最后确定）（我也该走了）；
（4）主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接，立刻进入CLOSE（关闭）状态

6、对AMD、CMD的理解

相同点：
AMD(异步模块定义)、CMD(通用模块定义)、Commo