2020最新web前端开发经典面试题及答案，收罗近5年面试资料，史上最全前端面试宝典
无论你是前端工作者、还是想要入坑的朋友、或者是前端小白，相信你看完这篇面试宝典，一定会获益匪浅
因为文件内容有点多，这里只展示目录
以下是下载地址
https://pan.baidu.com/s/1us7PTgQRggH0yrSz_LYYDw
提取码：msbd
附上目录：
一、HTML 和 CSS … 21
- 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? … 21
- 每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21
- Quirks 模式是什么？它和 Standards 模式有什么区别 … 21
- div+css 的布局较 table 布局有什么优点？ … 22
- img 的 alt 与 title 有何异同？ strong 与 em 的异同？ … 22
- 你能描述一下渐进增强和优雅降级之间的不同吗? … 23
- 为什么利用多个域名来存储网站资源会更有效？ … 23
- 请谈一下你对网页标准和标准制定机构重要性的理解。 … 24
- 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ … 24
- 简述一下 src 与 href 的区别。 … 24
- 知道的网页制作会用到的图片格式有哪些？ … 25
- 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？ … 25
- 在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请
求一般情况下有哪些地方会有缓存处理？ … 25 - 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图
片的加载，给用户更好的体验。 … 26 - 你如何理解 HTML 结构的语义化？ … 26
- 谈谈以前端角度出发做好 SEO 需要考虑什么？… 27
- 有哪项方式可以对一个 DOM 设置它的 CSS 样式？… 28
- CSS 都有哪些选择器？ … 28
- CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
… 29 - 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？ … 30
- 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？ … 30
- 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
… 30 - 什么是外边距重叠？重叠的结果是什么？ … 31
- rgba()和 opacity 的透明效果有什么不同？ … 31
- css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？ … 31
- 如何垂直居中一个浮动元素？ … 32
第 2 页 - px 和 em 的区别。 … 33
- 描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不
同之处？… 33 - Sass、LESS 是什么？大家为什么要使用他们？ … 34
- display:none 与 visibility:hidden 的区别是什么？ … 34
- CSS 中 link 和@import 的区别是： … 34
- 简介盒子模型： … 35
- 为什么要初始化样式？ … 35
- BFC 是什么?.. 35
- html 语义化是什么？ … 36
- Doctype 的作用？严格模式与混杂模式的区别？ … 36
- IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin 比设置的
较大。… 36 - HTML 与 XHTML——二者有什么区别？ … 36
- html 常见兼容性问题？ … 36
- 对 WEB 标准以及 W3C 的理解与认识 … 37
- 行内元素有哪些?块级元素有哪些?CSS 的盒模型?.. 37
- 前端页面有哪三层构成，分别是什么?作用是什么? … 37
- Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? . 37
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ … 38
- CSS 的盒子模型？ … 38
- CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有
那些？… 38 - 如何居中 div,如何居中一个浮动元素? … 39
- 浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是
什么，常用 hack 的技巧 ？ … 40 - 列出 display 的值，说明他们的作用。position 的值， relative 和 absolute 定位原点
是？… 41 - absolute 的 containing block 计算方式跟正常流有什么不同？… 41
- 对 WEB 标准以及 W3C 的理解与认识 … 42
- css 的基本语句构成是? … 42
- 浏览器标准模式和怪异模式之间的区别是什么? … 42
- CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
… 43
第 3 页 - 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
… 43 - 什么是外边距重叠？重叠的结果是什么？ … 43
58、描述一个"reset"的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的
不同之处？… 44 - 说 display 属性有哪些？可以做什么？… 44
- 哪些 css 属性可以继承？ … 44
- css 优先级算法如何计算？ … 44
- b 标签和 strong 标签,i 标签和 em 标签的区别？ … 45
- 有那些行内元素、有哪些块级元素、盒模型？ … 45
- 有哪些选择符，优先级的计算公式是什么？行内样式和！important 哪个优先级
高？… 47 - 我想让行内元素跟上面的元素距离 10px，加 margin-top 和 padding-top 可以吗？47
- CSS 的盒模型由什么组成？ … 47
- 说说 display 属性有哪些？可以做什么？… 47
- 哪些 css 属性可以继承？ … 47
- css 优先级算法如何计算？ … 48
二、JS 基础 … 48 - javascript 的 typeof 返回哪些数据类型 … 48
- 例举 3 种强制类型转换和 2 种隐式类型转换? … 48
- split() 、join() 的区别 … 49
- 数组方法 pop() push() unshift() shift() … 49
- 事件绑定和普通事件有什么区别 … 49
- IE 和 DOM 事件流的区别 … 50
- IE 和标准下有哪些兼容性的写法 … 50
- call 和 apply 的区别 … 50
- b 继承 a 的方法… 51
- 如何阻止事件冒泡和默认事件 … 52
- 添加 删除 替换 插入到某个接点的方法 … 52
- javascript 的本地对象，内置对象和宿主对象 … 52
- window.onload 和 document ready 的区别 … 52
- ””和“=”的不同 … 53
- javascript 的同源策略 … 53
- JavaScript 是一门什么样的语言，它有哪些特点？ … 53
第 4 页 - JavaScript 的数据类型都有什么？ … 54
- 已知 ID 的 Input 输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方
框架) … 54 - 希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架) … 55
- 设置一个已知 ID 的 DIV 的 html 内容为 xxxx，字体颜色设置为黑色(不使用第三方框
架) … 55 - 当一个 DOM 节点被点击时候，我们希望能够执行一个函数，应该怎么做？ … 55
- 看下列代码输出为何？解释原因。 … 56
- 看下列代码,输出什么？解释原因。 … 56
- 看下列代码,输出什么？解释原因。 … 57
- 看代码给答案。 … 58
- 已知数组 var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert 出”This is Baidu
Campus”。 … 58 - 已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示
法”getElementById”。 … 59 - var numberArray = [3,6,2,4,1,5]; （考察基础 API） … 59
- 输出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2014 年 9 月 26 日，则输出
2014-09-26 … 60 - 将字符串”{ KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲
{ name}”中的{ KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替换成 10，{ name}替
换成 Tony （使用正则表达式） … 60- 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函
数 escapeHtml，将<, >, &, “进行转义… 61- foo = foo||bar ，这行代码是什么意思？为什么要这样写？… 61
- 看下列代码，将会输出什么?(变量声明提升) … 62
- 用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序。 … 63
- 把两个数组合并，并删除第二个元素。 … 64
- 怎样添加、移除、移动、复制、创建和查找节点（原生 JS，实在基础，没细写每
一步）… 65- 有这样一个 URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一
段JS 程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value
形式返回到一个 json 结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。 … 66- 正则表达式构造函数 var reg=new RegExp(“xxx”)与正则表达字面量 var reg=//有什么
不同？匹配邮箱的正则表达式？ … 67- 看下面代码，给出输出结果。 … 67
第 5 页- 写一个 function，清除字符串前后的空格。（兼容所有浏览器）… 68
- Javascript 中 callee 和 caller 的作用？ … 69
- Javascript 中, 以下哪条语句一定会产生运行错误？ 答案( B C ) … 70
- 以下两个变量 a 和 b，a+b 的哪个结果是 NaN？ 答案( AC ) … 70
- var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的？答案( B ) … 70
- 下面的JavaScript语句中，（ D ）实现检索当前页面中的表单元素中的所有文本框，
并将它们全部清空 … 70- 要将页面的状态栏中显示“已经选中该文本框”，下列 JavaScript 语句正确的是
（ A ） … 71- 以下哪条语句会产生运行错误：（AD） … 71
- 以下哪个单词不属于 javascript 保留字：（B） … 71
- 请选择结果为真的表达式：（C） … 71
- Javascript 中, 如 果 已 知 HTML 页 面 中的 某 标 签对 象 的 id=”username”， 用
_document.getElementById(‘username’) _方法获得该标签对象。 … 72- typeof 运 算 符 返 回 值 中 有 一 个 跟 javascript 数 据 类 型 不 一 致 ， 它 是
”function”_。 … 72- 定义了一个变量，但没有为该变量赋值，如果 alert 该变量，javascript 弹出的对话
框中显示___undefined______ 。 … 72- 分析代码，得出正确的结果。 … 72
- 写出函数 DateDemo 的返回结果，系统时间假定为今天… 72
- 写出程序运行的结果？ … 73
- 阅读以下代码，请分析出结果： … 73
- 补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗? … 73
- 写出简单描述 html 标签（不带属性的开始标签和结束标签）的正则表达式，并将
以下字符串中的 html 标签去除掉 … 74- 完成 foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。 74
- 完成函数 showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示 76
- 截取字符串 abcdefg 的 efg … 76
- 列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常用方
法至少 5 个… 76- 简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法并做简单
说明… 77- 希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架) … 77
- 简述创建函数的几种方式 … 77
第 6 页- Javascript 如何实现继承？ … 78
- Javascript 创建对象的几种方式？ … 78
- iframe 的优缺点？ … 80
- 请你谈谈 Cookie 的弊端？ … 80
- js 延迟加载的方式有哪些？ … 80
- documen.write 和 innerHTML 的区别？ … 81
- 哪些操作会造成内存泄漏？ … 81
- 判断一个字符串中出现次数最多的字符，统计这个次数 … 81
- 写一个获取非行间样式的函数 … 82
- 事件委托是什么 … 83
- 闭包是什么，有什么特性，对页面有什么影响 … 83
- 解释 jsonp 的原理，以及为什么不是真正的 ajax… 84
- javascript 的本地对象，内置对象和宿主对象 … 84
- 字符串反转，如将 ‘12345678’ 变成 ‘87654321’ … 84
- 将数字 12345678 转化成 RMB 形式 如： 12,345,678 … 85
- 生成 5 个不同的随机数； … 86
- 去掉数组中重复的数字 方法一； … 87
- 阶乘函数；… 88
- window.location.search() 返回的是什么？ … 89
- window.location.hash 返回的是什么？… 89
- window.location.reload() 作用？ … 89
- 、javascript 中的垃圾回收机制？ … 89
- 看题做答：… 90
- 下面输出多少？ … 90
- 再来一个… 91
- a 输出多少？ … 92
- 看程序，写结果 … 93
- JS 的继承性 … 94
- 精度问题: JS 精度不能精确到 0.1 所以 。。。。同时存在于值和差值中… 94
- 加减运算… 95
- 什么是同源策略？ … 95
- 为什么不能定义 1px 左右的 div 容器？ … 95
- 结果是什么？ … 95
- 输出结果… 96
第 7 页- …计
算字符串字节数： … 97- …结
果是：… 97- …声
明对象，添加属性，输出属性 … 98- …匹
配输入的字符：第一个必须是字母或下划线开头，长度 5-20 … 98- …检
测变量类型… 99- …如
何在 HTML 中添加事件，几种方法？ … 99- …B
OM 对象有哪些，列举 window 对象？ … 99- …请
问代码实现 outerHTML … 99- …J
S 中的简单继承 call 方法！ … 102- …b
ind(), live(), delegate()的区别 … 103- …看
下列代码输出什么？ … 103- …看
下列代码,输出什么？ … 103- …你
如何优化自己的代码？ … 103- …请
描述出下列代码运行的结果 … 104- …怎
样实现两栏等高？ … 104- …使
用 js 实现这样的效果：在文本域里输入文字时，当按下 enter 键时不换行，而是替
换成“{ {enter}}”,(只需要考虑在行尾按下 enter 键的情况). … 105- …以
第 8 页
下代码中 end 字符串什么时候输出… 106- …s
pecify(‘hello,world’)//=>’h,e,l,l,o,w,o,r,l,d’实现 specify 函数… 107- …请
将一个 URL 的 search 部分参数与值转换成一个 json 对象 … 107- …请
用原生 js 实现 jquery 的 get\post 功能，以及跨域情况下 … 107- …请
简要描述 web 前端性能需要考虑哪方面，你的优化思路是什么？ … 107- …、
简述 readyonly 与 disabled 的区别 … 107- …写
出 3 个使用 this 的典型应用 … 108- …请
尽可能详尽的解释 ajax 的工作原理 … 108- …、
为什么扩展 javascript 内置对象不是好的做法？ … 108- …什
么是三元表达式？“三元”表示什么意思？… 108- …浏
览器标准模式和怪异模式之间的区别是什么？ … 109- …m
odulo(12,5)//2 实现满足这个结果的 modulo 函数 … 110- …H
TTP 协议中，GET 和 POST 有什么区别？分别适用什么场景 ？ … 110- …H
TTP 状态消息 200 302 304 403 404 500 分别表示什么 … 110- …H
TTP 协议中，header 信息里面，怎么控制页面失效时间（last-modified,cache-
control,Expires 分别代表什么） … 110- …H
TTP 雷锋议目前常用的有哪几个？KEEPALIVE 从哪个版本开始出现的？ … 110- …业
界常用的优化 WEB 页面加载速度的方法（可以分别从页面元素展现，请求连接，
第 9 页
css,js,服务器等方面介绍） … 110- …列
举常用的 web 页面开发，调试以及优化工具 … 110- …解
释什么是 sql 注入，xss 漏洞 … 110- …如
何判断一个 js 变量是数组类型 … 110- …请
列举 js 数组类型中的常用方法 … 110- …F
F 与 IE 中如何阻止事件冒泡，如何获取事件对象，以及如何获取触发事件的元素
… 110- …列
举常用的 js 框架以及分别适用的领域 … 112- …j
s 中如何实现一个 map … 112- …j
s 可否实现面向对象编程，如果可以如何实现 js 对象的继承 … 112- …约
瑟夫环—已知 n 个人（以编号 1，2，3…分别表示）围坐在一张圆桌周围。从编号
为 k 的人开始报数，数到 m 的那个人出列；他的下一个人又从 1 开始报数，数到
m 的那个人又出列；依此规律重复下去，直到圆桌周围的人全部出列。 … 112- …有
1 到 10w 这个 10w 个数，去除 2 个并打乱次序，如何找出那两个数？ … 112- …如
何获取对象 a 拥有的所有属性（可枚举的、不可枚举的，不包括继承来的属性）
… 112- …有
下面这样一段 HTML 结构，使用 css 实现这样的效果：… 112- …下
面这段代码想要循环输出结果 01234，请问输出结果是否正确，如果不正确，请说
明为什么，并修改循环内的代码使其输出正确结果 … 113- …以
下哪些是 javascript 的全局函数：（ABC） … 113
第 10 页- …关
于 IE 的 window 对象表述正确的有：（ACD） … 113- …下
面正确的是 A … 114- …错
误的是 B … 114- …不
用任何插件，如何实现一个 tab 栏切换？… 114- …变
量的命名规范以及命名推荐 … 114- …三
种弹窗的单词以及三种弹窗的功能 … 115- …c
onsole.log( 8 | 1 ); 输出值是多少？ … 116- …只
允许使用 + - * / 和 Math.* ，求一个函数 y = f(x, a, b);当 x > 100 时返回 a 的值，否则
返回 b 的值，不能使用 if else 等条件语句，也不能使用|,?:,数组。 … 116- …J
avaScriptalert(0.4*0.2);结果是多少？和你预期的一样吗？如果不一样该如何处理？
… 117- …一
个 div， 有 几 种 方 式 得 到 这 个 div 的 jQuery 对 象 ？ 想直接获取这个 div 的 dom 对象，如何获取？dom 对象如何
转化为 jQuery 对象？ … 117- …、
主流浏览器内核 … 117- …如
何显示/隐藏一个 dom 元素？请用原生的 JavaScript 方法实现 … 118- …j
Query 框架中$.ajax()的常用参数有哪些？写一个 post 请求并带有发送数据和返回
数据的样例… 118- …J
avaScript 的循环语句有哪些？ … 119- …作
第 11 页
用域-编译期执行期以及全局局部作用域问题 … 119- …闭
包：下面这个 ul，如何点击每一列的时候 alert 其 index？ … 119- …列
出 3 条以上 ff 和 IE 的脚本兼容问题 … 120- …如
现在有一个效果，有显示用户头像、用户昵称、用户其他信息；当用户鼠标移到
头像上时，会弹出用户的所有信息；如果是你，你会如何实现这个功能，请用代
码实现？… 120- …用
正则表达式，写出由字母开头，其余由数字、字母、下划线组成的 6~30 的字符
串？… 121- …列
举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常用方法
至少 5 个 （10 分）… 121- …在
Javascript 中什么是伪数组？如何将伪数组转化为标准数组？ … 121- …写
一个函数可以计算 sum(5,0,-5);输出 0; sum(1,2,3,4);输出 10; … 121- …《
正则》写出正确的正则表达式匹配固话号，区号 3-4 位，第一位为 0，中横线，7-
8 位数字，中横线，3-4 位分机号格式的固话号… 122- …《
算法》 一下 A,B 可任选一题作答，两题全答加分 … 122- …请
写一个正则表达式：要求最短 6 位数，最长 20 位，阿拉伯数和英文字母（不区分
大小写）组成 … 124- …统
计 1 到 400 亿之间的自然数中含有多少个 1？比如 1-21 中，有 1、10、11、21 这
四个自然数有 5 个 1… 124- …删
除与某个字符相邻且相同的字符，比如 fdaffdaaklfjklja 字符串处理之后成为
“fdafdaklfjklja” … 124- …请
第 12 页
写出三种以上的 Firefox 有但，InternetExplorer 没有的属性或者函数 … 124- …请
写出一个程序，在页面加载完成后动态创建一个 form 表单，并在里面添加一个
input 对象并给它任意赋值后义 post 方式提交到：http://127.0.0.1/save.php … 124- …用
JavaScript 实现冒泡排序。数据为 23、45、18、37、92、13、24 … 125- …前
端代码优化的方法 … 126- …下
列 JavaScript 代码执行后，依次 alert 的结果是 … 127- …下
列 JavaScript 代码执行后，iNum 的值是 … 127- …输
出结果是多少？ … 128- …用
程序实现找到 html 中 id 名相同的元素？ … 131- …下
列 JavaScript 代码执行后，运行的结果是 … 132- …下
列 JavaScript 代码执行后，依次 alert 的结果是 … 133- …下
列 JavaScript 代码执行后的效果是 … 134- …下
列 JavaScript 代码执行后的 li 元素的数量是 … 134- …程
序中捕获异常的方法？ … 135- …将
字符串”{ KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲{ name}”中的{ KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替换成 10，{ name}替换
成 Tony （使用正则表达式） … 135- …给
String 对象添加一个方法，传入一个 string 类型的参数，然后将 string 的每个字符
间价格空格返回，例如：addSpace(“hello world”) // -> ‘h e l l o ?w o r l d’ … 136- …数
组和字符串… 136
第 13 页- …下
列控制台都输出什么 … 137
第 2 题： … 137
第 3 题： … 138
第 4 题： … 138
第 5 题： … 138
第 6 题： … 139
第 7 题： … 139
第 8 题： … 139
第 9 题： … 140
第 10 题： … 140
第 11 题：考点：函数声明提前 … 140
第 12 题： … 141
第 13 题： … 141
第 14 题： … 141
第 15 题 … 141
第 16 题：以下执行会有什么输出 … 142
三、HTML5 CSS3 … 143- CSS3 有哪些新特性？ … 143
- html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问
题？如何区分 HTML 和 HTML5？ … 143- 本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别
是什么？… 144- 如何实现浏览器内多个标签页之间的通信? … 144
- 你如何对网站的文件和资源进行优化？ … 144
- 什么是响应式设计？ … 144
- 新的 HTML5 文档类型和字符集是？ … 144
- HTML5 Canvas 元素有什么用？ … 145
- HTML5 存储类型有什么区别？ … 145
- 用 H5+CSS3 解决下导航栏最后一项掉下来的问题… 145
- CSS3 新增伪类有那些？ … 145
- 请用 CSS 实现：一个矩形内容，有投影，有圆角，hover 状态慢慢变透明。 … 145
- 描述下 CSS3 里实现元素动画的方法 … 145
- html5\CSS3 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼
第 14 页
容问题？如何区分 HTML 和 HTML5？ … 146- 你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字
布局 如何设计? … 146- 你能描述一下渐进增强和优雅降级之间的不同吗? … 147
- 为什么利用多个域名来存储网站资源会更有效？ … 147
- 请谈一下你对网页标准和标准制定机构重要性的理解。 … 148
- 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ … 148
- 知道 css 有个 content 属性吗？有什么作用？有什么应用？ … 148
- 如何在 HTML5 页面中嵌入音频?.. 149
- 如何在 HTML5 页面中嵌入视频？ … 149
- HTML5 引入什么新的表单属性？ … 149
- CSS3 新增伪类有那些？ … 150
- (写)描述一段语义的 html 代码吧。 … 150
- cookie 在浏览器和服务器间来回传递。 sessionStorage 和 localStorage 区别… 150
- html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问
题？如何区分 HTML 和 HTML5？ … 151- 如何区分： DOCTYPE 声明\新增的结构元素\功能元素 … 151
- 语义化的理解？ … 151
- HTML5 的离线储存？ … 152
- 写出 HTML5 的文档声明方式 … 152
- HTML5 和 CSS3 的新标签 … 152
- 自己对标签语义化的理解 … 152
四、移动 web 开发 … 152
1、移动端常用类库及优缺点 … 152
2、Zepto 库和 JQ 区别 … 152
五、Ajax … 153
1、Ajax 是什么? 如何创建一个 Ajax？ … 153
2、同步和异步的区别? … 153
3、如何解决跨域问题? … 154
4、页面编码和被请求的资源编码如果不一致如何处理？ … 154
5、简述 ajax 的过程。 … 154
6、阐述一下异步加载。 … 154
7、请解释一下 JavaScript 的同源策略。 … 154
8、GET 和 POST 的区别，何时使用 POST？ … 155
第 15 页
9、ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题? … 155
10、 Ajax 的最大的特点是什么。 … 155
11、ajax 的缺点 … 155
12、ajax 请求的时候 get 和 post 方式的区别 … 155
13、解释 jsonp 的原理，以及为什么不是真正的 ajax… 156
14、什么是 Ajax 和 JSON，它们的优缺点。… 156
15、http 常见的状态码有那些？分别代表是什么意思？ … 156
16、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ … 156
17、ajax 请求的时候 get 和 post 方式的区别 … 157
18、ajax 请求时，如何解释 json 数据 … 157
19、.javascript 的本地对象，内置对象和宿主对象 … 157
20、为什么利用多个域名来存储网站资源会更有效？ … 157
21、请说出三种减低页面加载时间的方法 … 157
22、HTTP 状态码都有那些。 … 158
六、JS 高级 … 158- JQuery 一个对象可以同时绑定多个事件，这是如何实现的？ … 158
- 知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么? … 158
- 如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么
(mocha, sinon, jasmin, qUnit…)? … 158- 简述一下 Handlebars 的基本用法？ … 159
- 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？ . 159
- 用 js 实现千位分隔符? … 159
- 检测浏览器版本版本有哪些方式？ … 159
- 我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会
执行几次事件，然后会先执行冒泡还是捕获 … 159
10、实现一个函数 clone，可以对 JavaScript 中的 5 种主要的数据类型（包括 Number、
String、Object、Array、Boolean）进行值复制 … 159
11、如何消除一个数组里面重复的元素？ … 161
12、小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会
乖乖叫一声(yelp)。从这段描述可以得到以下对象： … 161
13、下面这个 ul，如何点击每一列的时候 alert 其 index?（闭包） … 162
14、编写一个 JavaScript 函数，输入指定类型的选择器(仅需支持 id，class，tagName 三
种简单 CSS 选择器，无需兼容组合选择器)可以返回匹配的 DOM 节点，需考虑浏览器
兼容性和性能。 … 163
第 16 页
15、请评价以下代码并给出改进意见。 … 166
16、给 String 对象添加一个方法，传入一个 string 类型的参数，然后将 string 的每个字
符间价格空格返回，例如： … 167
17、定义一个 log 方法，让它可以代理 console.log 的方法。 … 167
18、在 Javascript 中什么是伪数组？如何将伪数组转化为标准数组？ … 168
19、对作用域上下文和 this 的理解，看下列代码： … 169
20、原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){})有什么不同？
如何用原生 JS 实现 Jq 的 ready 方法？ … 170
21、（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生 JS） … 173
22、请实现如下功能 … 174
23、说出以下函数的作用是？空白区域应该填写什么？ … 177- Javascript 作用链域? … 177
- 谈谈 This 对象的理解。 … 178
- eval 是做什么的？ … 178
- 关于事件，IE 与火狐的事件机制有什么区别？ 如何阻止冒泡？ … 178
- 什么是闭包（closure），为什么要用它？ … 178
29、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？ … 178
30、如何判断一个对象是否属于某个类？ … 179
31、new 操作符具体干了什么呢? … 179
32、用原生 JavaScript 的实现过什么功能吗？ … 179
33、Javascript 中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数
是？… 179
34、对 JSON 的了解？ … 179
35、js 延迟加载的方式有哪些？ … 179
36、模块化开发怎么做？ … 180
37、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规
范区别？… 180
38、requireJS 的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓
存的？）… 180
39、让你自己设计实现一个 requireJS，你会怎么做？ … 180
40、谈一谈你对 ECMAScript6 的了解？ … 180
41、ECMAScript6 怎么写 class 么，为什么会出现 class 这种东西? … 181
42、异步加载的方式有哪些？ … 181
43、documen.write 和 innerHTML 的区别? … 181
第 17 页
44、DOM 操作——怎样添加、移除、移动、复制、创建和查找节点? … 182
45、call() 和 .apply() 的含义和区别？ … 182
46、数组和对象有哪些原生方法，列举一下？ … 182
47、JS 怎么实现一个类。怎么实例化这个类 … 183
48、JavaScript 中的作用域与变量声明提升？ … 183
49、如何编写高性能的 Javascript？ … 184
50、那些操作会造成内存泄漏？ … 184
51、javascript 对象的几种创建方式？ … 184
52、javascript 继承的 6 种方法？ … 185
53、eval 是做什么的？ … 185
54、JavaScript 原型，原型链 ? 有什么特点？ … 185
55、事件、IE 与火狐的事件机制有什么区别？ 如何阻止冒泡？ … 185
56、简述一下 Sass、Less，且说明区别？ … 185
57、关于 javascript 中 apply()和 call()方法的区别？ … 186
58、简述一下 JS 中的闭包？… 186
59、说说你对 this 的理解？ … 186
60、分别阐述 split(),slice(),splice(),join()？ … 186
61、事件委托是什么？ … 187
62、如何阻止事件冒泡和默认事件？ … 187
63、添加 删除 替换 插入到某个接点的方法？ … 187
64、你用过 require.js 吗？它有什么特性？ … 187
65、谈一下 JS 中的递归函数，并且用递归简单实现阶乘？ … 187
66、请用正则表达式写一个简单的邮箱验证。 … 188
67、简述一下你对 web 性能优化的方案？ … 188
68、在 JS 中有哪些会被隐式转换为 false … 188
69、定时器 setInterval 有一个有名函数 fn1，setInterval（fn1,500）与 setInterval
（fn1(),500）有什么区别？ … 188
70、外部 JS 文件出现中文字符，会出现什么问题，怎么解决？ … 188
71、谈谈浏览器的内核，并且说一下什么是内核？ … 188
72、JavaScript 原型，原型链 ? 有什么特点？ … 189
73、写一个通用的事件侦听器函数 … 189
74、事件、IE 与火狐的事件机制有什么区别？ 如何阻止冒泡？ … 191
75、什么是闭包（closure），为什么要用？ … 192
76、如何判断一个对象是否属于某个类？ … 192
第 18 页
77、new 操作符具体干了什么呢? … 192
78、JSON 的了解 … 192
79、js 延迟加载的方式有哪些 … 193
80、模块化怎么做？ … 193
81、异步加载的方式 … 193
82、告诉我答案是多少？ … 193
83、JS 中的 call()和 apply()方法的区别？… 194
84、Jquery 与 jQuery UI 有啥区别？ … 194
85、jquery 中如何将数组转化为 json 字符串，然后再转化回来？ … 194
86、JavaScript 中的作用域与变量声明提升？ … 195
87、前端开发的优化问题（看雅虎 14 条性能优化原则）。 … 195
88、http 状态码有那些？分别代表是什么意思？ … 195
89、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说
的越详细越好） … 196
七、流行框架 … 196
1、JQuery 的源码看过吗？能不能简单概况一下它的实现原理？ … 196
2、jQuery.fn 的 init 方法返回的 this 指的是什么对象？为什么要返回 this？ … 196- jquery 中如何将数组转化为 json 字符串，然后再转化回来？ … 196
- jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？ … 196
- jquery.extend 与 jquery.fn.extend 的区别？ … 196
6、谈一下 Jquery 中的 bind(),live(),delegate(),on()的区别？ … 196
7、JQuery 一个对象可以同时绑定多个事件，这是如何实现的？ … 196- Jquery 与 jQuery UI 有啥区别？ … 197
- jQuery 和 Zepto 的区别？各自的使用场景？ … 197
- 针对 jQuery 的优化方法？ … 197
- Zepto 的点透问题如何解决？ … 197
14、知道各种 JS 框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他
们各自的优点和缺点么? … 198
15、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？ … 198
16、使用过 angular 吗？angular 中的过滤器是干什么用的 … 198
八、移动 APP 开发 … 198
1、移动端最小触控区域是多大？ … 198
九、NodeJs … 198- 对 Node 的优点和缺点提出了自己的看法： … 198
第 19 页- 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正
确响应。给出你的技术实现方案？ … 199- Node.js 的适用场景？ … 199
- (如果会用 node)知道 route, middleware, cluster, nodemon, pm2, server-side rendering
么? … 199- 解释一下 Backbone 的 MVC 实现方式？… 199
- 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
… 200- 对 Node 的优点和缺点提出了自己的看法？ … 200
十、前端概括性问题 … 200- 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？ … 200
- 对 BFC 规范的理解？… 200
- 99%的网站都需要被重构是那本书上写的？ … 201
- WEB 应用从服务器主动推送 Data 到客户端有那些方式？ … 201
- 加班的看法… 201
- 平时如何管理你的项目，如何设计突发大规模并发架构？ … 201
- 那些操作会造成内存泄漏？ … 201
- 你说你热爱前端，那么应该 WEB 行业的发展很关注吧？ 说说最近最流行的一些东
西吧？… 202- 你有了解我们公司吗？说说你的认识？ … 202
- 移动端（比如：Android IOS）怎么做好用户体验? … 202
- 你所知道的页面性能优化方法有那些？ … 202
- 除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？ … 202
- AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范
区别？… 202- 谈谈你认为怎样做能使项目做的更好？ … 202
- 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？ … 203
- php 中下面哪个函数可以打开一个文件，以对文件进行读和写操作？ … 203
- php 中 rmdir 可以直接删除文件夹吗？该目录必须是空的，而且要有相应的权限–
来自 api … 203- phpinset 和 empty 的区别，举例说明 … 203
- php 中$_SERVER 变量中如何得到当前执行脚本路劲 … 204
- 写一个 php 函数，要求两个日期字符串的天数差，如 2012-02-05~2012-03-06 的日
期差数… 204
第 20 页- 一个衣柜中放了许多杂乱的衬衫，如果让你去整理一下，使得更容易找到你想要
的衣服；你会怎么做？请写出你的做法和思路？ … 204- 如何优化网页加载速度？ … 204
- 工作流程，你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? . 204
- 介绍项目经验、合作开发、独立开发。 … 204
- 开发过程中遇到困难，如何解决。 … 205
- …对
前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？ … 205你可能感兴趣的:(前端,html,javascript,css,vue.js)
- 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函