Js 面试经典题目合集（持续更新）

各位看客如果有自己知道的常见面试题还请在下面评论留言啊
此博客是持续更新的

---

问题一：谈谈 cookie 的弊端

• cookie在持久保存客户端数据提供了方便，分担了服务器的负担，但还是有很多的局限性：一是cookie数量和长度有限制；二是安全性问题，如果cookie被人拦截了那人就可以获取所有的session信息；三是有些状态不能保存在客户端。
• 当cookie有极高的扩展性和可用性：一是通过加密和安全传输技术减少cookie被破解的可能；二是只在cookie中存放不敏感数据；三是控制cookie的生命期。

问题二：谈谈浏览器本地存储是怎样的

• 在较高的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中用localStorage取代了globalStorage。
• sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
• localStorage用于持久的本地存储，除非主动删除数据，否则数据是永远不会过期的。

问题三：web storage 与 cookie 的区别

• 两者相似，区别是web storage是为了更大容量存储设计的。cookie的大小受限制，并且在每次请求一个新的页面的时候cookie都会被发送出去，这样无形中会造成浪费，另外cookie还需要指定作用域，不能跨域调用。
• 除此之外，web storage有setltem、getltem，removeltem、clear等方法，不想cookie需要前端开发者自己封装setCookie、getCookie。

问题四：display:none 和 visibility:hidden 的区别

• display:none 隐藏相应元素，在文档布局中不再给他分配空间，它各边的元素会合拢，就当它不存在
• visibility:hidden 隐藏相应元素，但是在文档布局中仍保留原来的空间

问题五：CSS 中 link 和 @import 的区别

• link 属于 HTML 标签，@import 是CSS提供的
• 页面被加载时，link会同时加载，而@import 引用的 CSS 会等到页面被加载完后加载
• import 只在 IE5 以上才能识别，而 link 是HTML标签，不存在兼容问题

问题六：介绍一下 CSS 的盒模型

• 盒模型包括内容（contend）、填充（padding）、边框（border）、边界（margin）
• 盒模型有两种：标准盒模型与 IE盒模型，区别是 IE盒模型的contend部分包含了border和padding。在网页编程中可以通过 border-sizing设置，可选值为contend-box、border-box

问题七：CSS 选择器有哪些？哪些属性可以继承？优先级算法如何运算？CSS3 新增伪类有哪些？

• 可继承属性：font-size、font-family、color、text-indent
• 不可继承属性：boeder、padding、margin、width、height

问题八：列出 display 和 position 的值并说明其作用

• block、inline、inline-block、list-item
• absolute、relative、fixed、static（默认值）、inherit（规定从父元素继承 position 的值）

问题九：CSS3 有哪些新特性

• 圆角（border-radius）、阴影（box-shadow）、线性渐变（gradient）、旋转（transform）、媒体查询（@media）等等。

问题十：为什么要初始化 CSS 样式

• 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，可能会达不到我们想要的结果，且如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

问题十一：对 BFC 规范的理解

• BFC（块级格式化上下文）是一个独立的布局环境，可以理解为一个容器，在这个容器里的物品按一定的规则摆放，但是不会影响其他环境的物品。BFC 的元素布局是不受外届环境影响的，我们往往利用这个特性来消除浮动元素对其非浮动兄弟元素或者子元素的影响。在同一个 BFC 中的两个毗邻的块级盒在垂直方向的margin会发生重叠。

问题十二：CSS sprites 的理解及使用

• CSS sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image、backgroud-repeat、backgroud-position”的组合进行背景定位，backgroud-position可以使用数字能精确的定位出背景图片的位置。这样可以减少很多图片的开销，因为请求耗时比较长。

问题十三：说说对语义化的理解

• HTML 语义化是指在编写网页时，使用正确的标签表达正确的意思，有利于在浏览器中显示清晰的结构
• 有利于SEO（搜索引擎优化）：与搜索引擎建立良好的沟通，有利于爬虫抓取更多的有效信息
• 方便浏览器的解析，以很好的方式进行渲染
• 便于团队的开发与维护，语义化更具可读性

问题十四：Doctype 文档类型有多少种

• 该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档

问题十五：HTML 与 XHTML 的区别

• 主要的不同是指 XHTML 元素必须被正确嵌套、元素必须被关闭、标签名必须小写、文档必须要有根元素。

问题十六：HTML 常见兼容性问题

• 浏览器默认的 margin 和 padding 值不同
• 元素设置浮动后在设置margin，margin 值会加倍（解决方法：display:inline）
• 自定义属性的获取（都使用getAttribute()获取中自定义属性）
• 上下 margin 重合问题
• 怪异盒模型与标准盒模型

问题十七：浮动元素引起的问题和解决方法

• 问题：一是父元素的高度无法被撑开；二是与浮动元素同级的非浮动元素会跟随其后；三是若非第一个元素浮动，则该元素之前的元素也需要浮动，否则影响页面显示的结构
• 解决方法：略

问题十八：IE8 以下版本的浏览器中的盒模型有什么不同

• 模型中定义的元素的宽高包括内边距（padding）和边框（border）

问题十九：DOM 操作——怎样添加、移除、移动、复制、创建和查找节点

• 暂略

问题二十：iframe 的优缺点

• 优点：重载页面时不需要重载整个页面，只需要重载页面中的一个框架页，减少了数据的传输，增加了网页的下载速度
• 缺点：会产生很多页面不容易管理；代码复杂，无法被一些搜索引擎索引到；多框架的页面会增加服务器的http请求；因不符合标准网页设计的理念已经被标准网页设计抛弃

问题二十一：如何实现浏览器内多个便签页之间的通信

• 使用localstorage与cookies等本地存储方式

问题二十二：webSocket 如何兼容低版本浏览器

• 一是使用轮询或长连接的方式实现伪webSocket通信；二是使用flash或其他方法实现一个webSocket客户端

问题二十三：如何对网站的文件和资源进行优化

• 一是减少http请求，如使用雪碧图等；二是将CSS JS 文件从外部引入；三是将CSS放在页面的最顶端，JS放在底端；四是文件最小化，对文件进行压缩；五是使用CDN托管，减少通信距离。

问题二十四：减少页面加载时间的方法

• 图像格式的选择
• 优化CSS，压缩并合并css，如margin-top、margin-left…
• 网址后加斜杠，也就是将资源地址写的更加详细
• 标明元素的高度和宽度
• 减少http请求

问题二十五：什么是FOUC(无样式内容闪烁)？如何避免FOUC

• 引用CSS文件的@import就是造成FOUC的罪魁祸首。IE 会先加载HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的。解决方法就是在 head 之间加入一个 link 就可以了

问题二十六：null 和 undefined 的区别

• null 表示“没有对象”，即该处不存在值，转为数字是0；undefined 表示“缺少值”，就是此处应该有一个值，但是还没有定义，转为数字是nan。

问题二十七：new 操作符具体干了什么

• 创建一个新对象，并且this变量引用该对象，同时继承了该函数的原型；属性和方法被加到this引用的对象中；新创建的对象由this引用，并最后隐式的返回this

问题二十八：对 JSON 的了解

• JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它是基于 JavaScript 的一个子集。数据格式简单，易于读写，占用带宽小。

问题二十九：JS 延迟加载的方式

• defer 和 async
• 动态创建DOM方式，创建script，插入到DOM中，加载完毕后callBack
• 将JS放在文档最后加载，也就是异步加载JS

问题三十：document.write 和 innerHTML 的区别

• document.write 一般只能重绘整个页面，但是 innerHTML 可以重绘页面的一部分

问题三十一：哪些操作会造成内存泄露

• 内存泄漏是指任何对象在你不再拥有或需要它之后仍然存在。造成的操作有闭包、控制台日志和引用循环。

问题三十二：什么叫优雅降级和将近增加

• 优雅降级：一开始就构建完整的功能，然后在针对低版本的浏览器进行兼容
• 渐进增强：一开始针对低版本的浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果交互改进和功能增强

问题三十三：页面加载过程

• 在浏览器输入URL地址——>查看浏览器缓存、系统缓存、路由器缓存，如果缓存中有想要的资源，直接显示到屏幕，如果没有直接下一步——>域名解析，获取响应的IP地址——>浏览器向服务器发送TCP连接，建立tcp三次握手——>浏览器向服务器发送http请求——>服务器收到请求，向浏览器发送数据——>浏览器收到http响应——>读取页面内容，渲染页面，解析HTML源码——>生成DOM树，解析CSS样式JS代码——>浏览器与服务器进行交互——>AJAX查询

问题三十四：前端的安全问题

• XSS：用户在自己的浏览器上运行非法的html标签或者JS脚本就会被攻击
• SQL注入：指的是针对web应用使用的数据库，通过运行非法的SQL而产生的攻击
• OS命令注入：指的是通过web应用，执行非法的操作系统命令达到非法攻击的目的
• CSRF：跨站点请求伪造攻击，攻击者盗用了用户的身份，以用户的名义发送了恶意的请求

问题三十五：什么是 use strict

• 严格模式，是一种在 JavaScript 代码自动实行更严格解析和错误处理的方法，这种模式使得 JavaScript在更严格的条件下运行。主要是为了更好的实现前端页面内容与样式的分离，为优化代码和进一步的前端发展做好准备。

问题三十六：get 与 post 的区别

• get 一般用于信息的获取，使用 URL 传递参数，对所传送的信息的数量也有限制，一般在2000个字符；post 一般用于修改服务器上的资源，对所发送的信息没有限制。get 是通过地址栏来传值，post 是通过上传表单来传值

问题三十七：CSS 阻塞和 JS 阻塞

• JS 阻塞：所有浏览器在下载JS时都会阻止其他一切活动；CSS阻塞：当CSS后面跟着嵌入的JS时，会产生CSS阻塞

问题三十八：eval 是做什么的

• 它的功能是把相应的字符串解析成 JS 代码并执行；应该避免使用 eval，不安全且非常耗性能（2次，一次解析成js代码，一次执行）

问题三十九：web 应用从服务器主动推送 Data 到客户端有哪些方式

• HTML5中的webSocket

问题四十：HTTP 状态码

• HTTP 状态码