整理学习：100多道前端面试题（一起加油，且行且珍惜）

前言

当你准备去面试时，你不妨看一些面试的题目（推荐掘金）来提醒自己究竟掌握得怎么样，比如

题目

笔者最近一边写项目，一边整理前端面试题，打算完成项目就差不多去实习了…
没有特别宏大的目标，打算安安分分找一份工作，在实习中保持认真学习的态度就好了。

以下题目大多数是HTML/CSS,较少涉及框架方面的知识。但是我还是建议你在空闲时间多浏览，尽量熟记

1、Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

2、行内元素有哪些？块级元素有哪些？

（1）CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值， 比如 div 默认 display 属性值为“block”，成为“块级”元素； span 默认 display 属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

3、link 和@import 的区别是？

（1）link 属于 XHTML 标签，而@import 是 CSS 提供的;
（2）页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
（3）import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题;
（4）link 方式的样式的权重 高于@import 的权重.

4、浏览器的内核分别是什么?

IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、Opera 内核原为 Presto，现为 Blink；

5、HTML5 有哪些新特性？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas 用于 媒介回 放的 video 和 audio 元素 本地 离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search 新的技术 webworker, websockt, Geolocation

6、对语义化如何理解？

用正确的标签做正确的事情！
HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

7、HTML5 的离线储存有几种方式？

localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。

8、iframe 有那些缺点？

iframe 会阻塞主页面的 Onload 事件；
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。

9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie 在浏览器和服务器间来回传递。 sessionStorage 和 localStorage 不会
sessionStorage 和 localStorage 的 存 储 空 间 更 大 ； sessionStorage 和
localStorage 有更多丰富易用的接口；sessionStorage 和 localStorage 各自独立的存储空间；

10、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

1. id 选择器（ # myid）
2. 类选择器（.myclassname）
3. 标签选择器（div, h1, p）
4. 相邻选择器（h1 + p）
5. 子选择器（ul < li）
6. 后代选择器（li a）
7. 通配符选择器（ * ）
8. 属性选择器（a[rel = “external”]）

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

优先级就近原则，同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag important 比 内联优先级高

11、CSS3 新增伪类举例：

p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled :disabled 控制表单控件的禁用态。
:checked 单选框或复选框被选中。

12、如何居中 div？如何居中一个浮动元素？

给 div 设置一个宽度，然后添加 margin:0 auto 属性

div{ width:200px; margin:0 auto; }

居中一个浮动元素

确定容器的宽高 宽 500 高 300 的层 设置层的外边距 .div { Width:500px ;
height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;
相对定位 background-color:pink;//方便看效果 left:50%; top:50%;}

列出 display 的值，说明他们的作用。

position 的值， relative 和 absolute 定位原点是？
1.block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显
示。 inline-block 象行内元素一样显示，但其内容象块类型元素一样显
示。 list-item 象块类型元素一样显示，并添加样式列表标记。
2. absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素
进行定位。
3.fixed （老 IE 不支持） 生成绝对定位的元素，相对于浏览器窗口进行定
位。
4.relative 生成相对定位的元素，相对于其正常位置进行定位。
5.static 默认值。没有定位，元素出现在正常的流中 *（忽略 top, bottom, left, right z-index 声明）。
6.inherit 规定从父元素继承 position 属性的值。

13、为什么要初始化 CSS 样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS 初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法就是：

 * {padding: 0; margin: 0;} （不建议）

• 淘宝的样式初始化：

   body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset,legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var
{ font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a
{ text-decoration:none; }a:hover { text-decoration:underline; }sup
{ vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend
{ color:#000; }fieldset, img { border:0; }button, input, select, textarea
{ font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

14、css 定义的权重

以下是权重的规则：
标签的权重为 1，
class 的权重为 10，
id 的权重为 100，

15、CSS3 有哪些新特性？

CSS3 实现

• 圆角（border-radius:8px）
• 阴影（box-shadow:10px）
• 对文字加特效 （ text-shadow ）
• 线 性 渐 变 （ gradient ）
• 旋 转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)
• skew(-9deg,0deg);//旋转,缩放,定位,倾斜
• 增加了更多的 CSS 选择器（: not(.input)：所有 class 不是“input”的节点）
• 多背景
• rgba
• 多列布局 （multi-column layout）
• 阴影和反射 （Shadow\Reflect）
• 文字特效 （text-shadow、）
• 文字渲染 （Text-decoration）

16、介绍一下 CSS 的盒子模型？

一个盒子中主要的属性就5个：width、height、padding（内边距）、border、margin（外边距）。

盒模型有标准盒模型和IE的盒模型，

• IE 的 content 部分包含了 border 和 pading;
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)

w3c: box-sizing:content-box
ie: box-sizing:border-box

17.对 WEB 标准以及 W3C 的理解与认识？

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

18.XHTML 和 HTML 有什么区别？

HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。标签名必须用小写字母。
XHTML 文档必须拥有根元素。

19.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

用于声明文档使用那种规范(HTML/XHTML)一般为 严格 过度 基于框架的 html文档加入 XMl 声明可触发，解析方式更改为 IE5.5 拥有 IE5.5 的 bug

20.行内元素有哪些?块级元素有哪些?CSS 的盒模型?

块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css 盒模型:内容，border ,margin，padding

21.CSS 引入的方式有哪些? link 和@import 的区别是?

内联 内嵌 外链 导入
区别 ：同时加载前者无兼容性，后者 CSS2.1 以下浏览器不支持
Link 支持使用 javascript 改变样式，后者不可

22.CSS 选 择 符 有 哪 些 ?哪 些 属 性 可 以 继 承 ?优 先 级 算 法 如 何 计 算 ?内 联 和important 哪个优先级高?

标签选择符 类选择符 id 选择符
继承不如指定 Id>class>标签选择
后者优先级高

23.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 HTML 表示层 CSS 行为层 js

24.CSS 的基本语句构成是?

选择器{属性 1:值 1;属性 2:值 2;……}

25.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie 内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

26.写出几种 IE6 BUG 的解决方法

1.双边距 BUG float 引起的 使用 display
2.3 像素问题 使用 float 引起的 使用 dislpay:inline -3px
3.超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index 问题 给父级添加 position:relative
5.Png 透明 使用 js 代码 改
6.Min-height 最小高度 !Important 解决’
7.select 在 ie6 下遮盖 使用 iframe 嵌套
8.为什么没有办法定义 1px 左右的宽度容器(IE6 默认的行高造成的，使用
over:hidden,zoom:0.08 line-height:1px)
9.ie 6 不支持!important

27.img 标签上 title 与 alt 属性的区别是什么?

Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息

28.描述 css reset 的作用和用途。

Reset 重置浏览器的 css 默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

29.解释 css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

30.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式

31.你如何对网站的文件和资源进行优化?期待的解决方案包括：

• 文件合并
• 文件最小化/文件压缩
• 使用 CDN 托管
• 缓存的使用

32.什么是语义化的 HTML?

直观的认识标签 对于搜索引擎的抓取有好处

33.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both
(理论上能清楚任何标签，增加无意义的标签)
2.使用 overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,使用zoom:1 用于兼容 IE)
3.是用 afert 伪元素清除浮动(用于非 IE 浏览器)

34.javascript 的 typeof 返回哪些数据类型

Object number function boolean underfind

35.例举 3 种强制类型转换和 2 种隐式类型转换?

强制（parseInt,parseFloat,number）
隐式（== – ===）

36.split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

37.数组方法 pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

38.事件绑定和普通事件有什么区别

39.IE 和 DOM 事件流的区别

1.执行顺序不一样、
2.参数不一样
3.事件加不加 on
4.this 指向问题

40.IE 和标准下有哪些兼容性的写法

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

41.ajax 请求的时候 get 和 post 方式的区别

一个在 url 后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

42.call 和 apply 的区别

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

43.ajax 请求时，如何解释 json 数据

使用 eval parse 鉴于安全性考虑 使用 parse 更靠谱

44.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

45.如何阻止事件冒泡和默认事件

canceBubble return false

46.添加 删除 替换 插入到某个接点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

47.解释 jsonp 的原理，以及为什么不是真正的 ajax

动态创建 script 标签，回调函数
Ajax 是页面无刷新请求数据操作

48.javascript 的本地对象，内置对象和宿主对象

本地对象为 array obj regexp 等可以 new 实例化
内置对象为 gload Math 等不可以实例化的
宿主为浏览器自带的 document,window 等

49.document load 和 document ready 的区别

Document.onload 是在结构和样式加载完才执行 js
Document.ready 原生种没有这个方法，jquery 中有 $().ready(function)

50.”==”和“===”的不同

前者会自动转换类型
后者不会

51.javascript 的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

52.编写一个数组去重的方法

function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}
</arr.length;i++)

53.你认为最常遇到的兼容 Bug 有哪些?有哪些问题是你认为解决起来最麻烦的?

IE6 PNG
IE6 Fixed

54.CSS 定位方式有哪些?

在 CSS 中关于定位的内容是：position:relative | absolute | static | fixed
static 没有特别的设定，遵循基本的定位规定，不能通过 z-index 进行层次分级。
relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并
且可以通过 z-index 进行层次分级。
absolute 脱离文档流，通过 top,bottom,left,right 定位。选 53D6 其最近的父级
定位元素，当父级 position 为 static 时，absolute 元素将以 body 坐标原点进
行定位，可以通过 z-index 进行层次分级。
fixed 固定定位，这里他所固定的对像是可视窗口而并非是 body 或是父级元素。
可通过 z-index 进行层次分级。

55.函数的几种定义方法？

function a(){},
var a = function(){}

56.对象的定义方法？

a = new Object(), a = {}

57.类的定义方法（prototype）（继承）

Var a = function(){}
a.prototype = {}
new a();

58.this 关键字的指向

obj.foo() == obj //方法调用模式,this 指向 obj
foo() == window; //函数调用模式,this 指向 window
new obj.foo() == obj //构造器调用模式, this 指向新建立对象
foo.call(obj) == obj;//APPLY 调用模式,this 指向 obj

59.异步 ajax 的优缺点都有什么？

优点：
相对于同步 ajax：不会造成 UI 卡死，用户体验好。
相对于刷新页面，省流量
缺点：
后退按钮无效；
多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需要复杂
的判断机制。
搜索引擎不友好
数据安全

60、介绍 js 的基本数据类型。

number,string,boolean,object,undefined

61、Javascript 如何实现继承？

通过原型和构造器

62、如何创建一个对象? （画出此对象的内存图）

function Person(name, age) { this.name = name; this.age =
age; this.sing = function() { alert(this.name) } }

63、谈谈 This 对象的理解。

this 是 js 的一个关键字，随着函数使用场合不同，this 的值会发生变化。但是有一个总原则，那就是 this 指的是调用函数的那个对象。this 一般情况下：是全局对象Global。 作为方法调用，那么 this 就是指这个对象

64、事件是什么？IE 与火狐的事件机制有什么区别？ 如何阻止冒泡？

（1） 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
（2） 事件处理机制：IE 是事件冒泡、火狐是 事件捕获；
（3） ev.stopPropagation();

65、如何判断一个对象是否属于某个类？

使用 instanceof （待完善） if(a instanceof Person){ alert(‘yes’); }

66、Javascript 中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

67、对 JSON 的了解？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基
于 JavaScript 的一个子集。数据格式简单, 易于读写, 占用带宽小{‘age’:‘12’, ‘name’:‘back’}

68、简述一下 src 与 href 的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

69、简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。
当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

70、px 和 em 的区别

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

71、什么叫优雅降级和渐进增强？

• 渐进增强 progressive enhancement：
  针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  （从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）
• 优雅降级 graceful degradation：
  一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web 站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于 IE 独特的盒模型布局问题，针对不同版本的 IE 的 hack 实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

72、请描述一下 cookies，sessionStorage 和 localStorage 的区别

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一 个 会 话 中 的 页 面 才 能 访 问 并 且 当 会 话 结 束 后 数 据 也 随 之 销 毁 。 因 此sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage 和 cookie 的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。

除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像cookie 需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为了在本地“存储”数据而生。

cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie 数据始终在同源的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

存储大小：

• cookie 数据大小不能超过 4k。
• sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

有期时间：

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

73 、一次完整的 HTTP 事务是怎样的一个过程？

基本流程：
a. 域名解析
b. 发起 TCP 的 3 次握手
c. 建立 TCP 连接后发起 http 请求
d. 服务器端响应 http 请求，浏览器得到 html 代码
e. 浏览器解析 html 代码，并请求 html 代码中的资源
f. 浏览器对页面进行渲染呈现给用户

74、对前端工程师这个职位你是怎么样理解的？

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90 分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到 1px；
c. 与团队成员，UI 设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理 hack，兼容、写出优美的代码格式；

75、html5 有哪些新特性

• HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

• 绘画 canvas;
• 用于媒介回放的 video 和 audio 元素;
• 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
• sessionStorage 的数据在浏览器关闭后自动删除;
• 语意化更好的内容元素，比如 article、footer、header、nav、section;
• 表单控件，calendar、date、time、email、url、search;
• 新的技术 webworker, websocket, Geolocation;

76、网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

77.、position 属性的值有哪些?他们之间的区别是什么?

• block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
• none 缺省值。象行内元素类型一样显示。
• inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
• inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
• list-item 象块类型元素一样显示，并添加样式列表标记。
• table 此元素会作为块级表格来显示。
• inherit 规定应该从父元素继承 display 属性的值。

78、CSS3 的 Flexbox（弹性盒布局模型）,以及适用场景

• 一个用于页面布局的全新 CSS3 功能，Flexbox
  可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
• 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
• 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
• 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
• 常规布局是基于块和内联流方向，而 Flex 布局是基于 flex-flow 流可以很方便的用来做局中，能对不同屏幕大小自适应。

适用场景：

• Flexbox 适用于包含有多个元素的盒子的样式渲染
• Flexbox 适用于在子元素的尺寸未知或者动态的情况下，对子元素的对齐方式、排列方式以及排序顺序进行控制展示

弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。

该布局模型在主流浏览器中都得到了支持。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。

在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。

当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。

弹性盒布局是与方向无关的，可由开发人员操作。

79、纯 CSS 创建一个三角形的原理是什么？

把上、左、右三条边框隐藏掉（颜色设为 transparent）

#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}

80、浏览器默认的 margin 和 padding 不同，怎么解决？

解决方案是给文档中用到的标签设置：margin:0;padding:0;。

81、BFC 的布局规则以及触发条件

Block Formatting Contexts（BFC） ：块级元素格式化上下文
它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

• 块级元素：父级（是一个块元素）
• 内容：子元素（是一个块元素）
• 其他元素：与内容同级别的兄弟元素
• 相互作用：BFC 里的元素与外面的元素不会发生影响

触发（创建）BFC 的方式（一下任意一条就可以）：

1. float 的值不为 none
2. overflow 的值不为 visible
3. display 的值为 table-cell、tabble-caption 和 inline-block 之一
4. position 的值不为 static 或者 releative 中的任何一个

82、为什么需要清除浮动？清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。有时候浮动没处理好也会导致文档错乱情况。
1、父级 div 定义 height；
2、父级 div 也一起浮动；
3、浮动元素的父级 div 定义伪元素::after；

.clearfix::after {
content: " ";
display : block;
clear:both;
overflow:hidden; *zoom: 1;
}

83、什么是外边距合并？

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

1、当一个 div 在另一个 div 里，两个 div 都有 margin 的属性，想让这两个 div 不出现外边距合并的问题，必须给外层 div 添加 border 属性或者 overflow:hidden 属性；如果允许其出现外边距合并，内层 div 始终保持原位置，而外层 div 的 margin 属性会取两者的最大值。

2、当两个 div 不存在嵌套关系时（而是上下关系）一个设置了 margin-bottom，一个设置了margin-top，不管是否有 border 或者 overflow 属性时，两者始终会存在外边距合并问题。

84、CSS 预处理器

Sass 、less 这些
Sass 语法是$
less 语法是@

85、WEB提高性能的方法有哪些

Web 前端性能优化——如何提高页面加载速度

1、减少 HTTP 请求
2、将样式表放在头部
3、将脚本放在底部
4、使用外部的 JavaScript 和 CSS，缓存
5、关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）尽量不用后代选择器，少用子代选择器，最好不要超过三层；提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
6、使用预处理工具或构建工具（gulp 对 css 进行语法检查、自动补前缀、打包压缩、自动优雅降级）

86、margin 和 padding 分别适合什么场景使用？

margin 是用来隔开元素与元素的间距；padding 是用来隔开元素与内容的间隔。
margin 用于布局分开元素使元素与元素互不相干；
padding 用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段空间

87、box-sizing 属性

box-sizing 属性主要用来控制元素的盒模型的解析模式。默认值是 content-box。

• content-box：让元素维持 W3C 的标准盒模型。元素的宽度/高度由 border + padding +content 的宽度/高度决定，设置 width/height 属性指的是 content 部分的宽/高
• border-box：让元素维持 IE 传统盒模型（IE6 以下版本和 IE6~7 的怪异模式）。设置width/height 属性指的是 border + padding + content

88、AJAX 的优缺点

ajax 的优点
1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非
常好。
2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响
应能力。
ajax 的缺点
1、ajax 干掉了 back 按钮，即对浏览器后退机制的破坏。后退按钮是一个
标准的 web 站点的重要功能，但是它没法和 js 进行很好的合作。用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过 Gmail 的知道，Gmail 下面采用的 ajax 技术解决了这个问题，在 Gmail下面是可以后退的，但是，它也并不能改变 ajax 的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的 IFRAME 来重现页面上的变更。（例如，当用户在 Google Maps 中单击后退时，它在一个隐藏的 IFRAME 中进行搜索，然后将搜索结果反映到 Ajax 元素上，以便将应用程序状态恢复到当时的状态。）

89、Js 中严格模式

1. 不允许用 with。
2. 所有变量必须声明，赋值给未声明的变量报错，而不是隐匿创建全局变量。
3. eval 中的代码不能创建 eval 所在作用域下的变量、函数。而是为 eval 单独创建一个作用域，并在 eval 返回时丢弃。
4. 函数中的特殊对象 arguments 是静态副本，而不像非严格模式那样，修改 arguments 或修改参数变量会相互影响。
5. 删除 configurable=false 的属性时报错，而不是忽略。
6. 对象字面量重复属性名报错。
7. 禁止八进制字面量，如 010（八进制的 8）。
8. 严格模式下 eval、arguments 变为关键字，不能用作变量名。
9. 一般函数调用时（不是对象的方法调用，也不使用 apply/call/bind 等修改 this）this 指向null，而不是全局变量。
10. 试图修改不可写属性（writable=false），在不可扩展的对象上添加属性时报 TypeError，而不是忽略。
11. arguments.caller,arguements.callee 被禁用

90、Js 有哪些内置对象

Object 是 JavaScript 中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error

91、JavaScript 的基本规范

1.不要在同一行声明多个变量。
2.请使用 ===/!==来比较 true/false 或者数值
3.使用对象字面量（[]）替代 new Array 这种形式
4.不要使用全局函数，全局函数。
5.Switch 语句必须带有 default 分支
6.函数不应该有时候有返回值，有时候没有返回值。
7.For 循环必须使用大括号
8.If 语句必须使用大括号
9.for-in 循环中的变量 应该使用 var 关键字明确限定作用域，从而避免作用域污染。

92、JavaScript 原型，原型链 ? 有什么特点？

每个对象都会在其内部初始化一个属性，就是 prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个 prototype又会有自己的 prototype，
于是就这样一直找下去，也就是我们平时所说的原型链的概念。

关系：
instance.constructor.prototype = instance.__proto__

特点：
JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

93、Javascript 作用链域?

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。
当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，
直至全局函数，这种组织形式就是作用域链。

94、谈谈 This 对象的理解。

this 总是指向函数的直接调用者（而非间接调用者）；
如果有 new 关键字，this 指向 new 出来的那个对象；
在事件中，this 指向触发这个事件的对象，特殊的是，IE 中的 attachEvent 中的 this 总是指向全局对象 Window；

95、eval 是做什么的？

它的功能是把对应的字符串解析成 JS 代码并运行；
应该避免使用 eval，不安全，非常耗性能（2 次，一次解析成 js 语句，一次执行）。
由 JSON 字符串转换为 JSON 对象的时候可以用 eval，var obj =eval(’(’+ str +’)’);

96、什么是 window 对象? 什么是 document 对象?

window 对象是指浏览器打开的窗口。
document 对象是 Documentd 对象（HTML 文档对象）的一个只读引用，是 window 对象的一个属性。

97、null，undefined 的区别？

null 表示一个对象是“没有值”的值，也就是值为“空”；
undefined 表示一个变量用 var 声明了但有初始化(赋值)；
undefined 不是一个有效的 JSON，而 null 是；
undefined 的类型(typeof)是 undefined；
null 的类型(typeof)是 object；

注意：

在验证 null 时，一定要使用 === ，因为 == 无法分别 null 和 undefined
null == undefined // true
null === undefined // false

98、什么是闭包（closure），为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
闭包的特性：

1. 函数内再嵌套函数
2. 内部函数可以引用外层的参数和变量
3. 参数和变量不会被垃圾回收机制回收
   闭包的作用参考：https://www.cnblogs.com/zachary93/p/6056987.html

99、DOM是什么？

DOM （文档对象模型）就是针对 HTML 和 XML 提供的一个 API（接口）。我们可以通过DOM 来操作页面中各种元素，例如添加元素、删除元素、替换元素等。

100、webpack 和 gulp 区别（模块化与流的区别）

gulp 类似于管道，文件读进来，执行相应的任务然后生成最终文件即可。
gulp 利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次 I/O的过程，流程更清晰，更纯粹。

gulp 强调的是前端开发的工作流程，我们可以通过配置一系列的 task，定义 task 处理的事务（例如文件压缩合并、雪碧图、启动 server、版本控制等），然后定义执行顺序，来让 gulp执行这些 task，从而构建项目的整个前端开发流程。

webpack 是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

101、对前端开发的理解

Web 前端开发简单来说就是网站的开发。最基础的工作就是实现效果图，把视觉稿通过页面代码的方式表现出来能够真实反映视觉稿且能够通 过浏览器的兼容。与设计师和后台人员进行沟通，优化和完善前端项目。

作为一名前端开发人员，必须掌握基本的 Web 前端开发技术，其中包括：CSS(3)、HTML(5)、DOM、javascript、Ajax，jquery 等，了解其他框架如 angular、vue、react 等，适应前端技术发展，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的 Bug。需要了解网站性能优化和一些打包工具如 webpack、gulp，了解 SEO 等等一
下辅助开发的知识。

102、对vue的理解

vue：通过 Vue 对象将数据和 View 完全分离开来了。对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，他们通过 Vue 对象这个 vm 实现相互的绑定。
这就是传说中的 MVVM。

vue 适用的场景：
复杂的单应用页面；复杂数据操作的后台页面，表单填写页面，侧重数据绑定。

103、MVC 与 MVVM 区别？

在 MVC 里，View 是可以直接访问 Model 的！

从而，View 里会包含 Model 信息，不可避免的还要包括一些业务逻辑。

MVC 模型关注的是 Model 的不变，所以，在 MVC 模型里，Model不依赖于 View，但是 View 是依赖于 Model 的。不仅如此，因为有一些业务逻辑在 View 里实现了，导致要更改 View 也是比较困难的，至少那些业务逻辑是无法重用的。

MVVM 在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个 JS里去实现，而这个 JS 文件的主要功能是完成数据的绑定，即把 model 绑定到 UI 的元素上。

有人做过测试：使用 Angular（MVVM）代替 Backbone（MVC）来开发，代码可以减少一半。

此外，MVVM 另一个重要特性，双向绑定。它更方便你同时维护页面上都依赖于某个字段的 N 个区域，而不用手动更新它们

104、让一个元素不可见的方法有哪些

{ display: none; /* 不占据空间，无法点击 */ }
/***************************************************************************
*****/
{ visibility: hidden; /* 占据空间，无法点击 */ }
/***************************************************************************
*****/
{ position: absolute; top: -9999px; /* 不占据空间，无法点击 */ }
/***************************************************************************
*****/
{ position: relative; top: -9999px; /* 占据空间，无法点击 */ }
/***************************************************************************
*****/
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }
/***************************************************************************
*****/
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }
/***************************************************************************
*****/
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
/***************************************************************************
*****/
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点
击 */ }

105、为什么在 ES6 中引入了箭头函数呢？

解决 this 指针的问题。

106、懒加载的原理

先将 img 标签中的 src 链接设为同一张图片（空白图片），将其真正的图片地址存储再 img 标签的自定义属性中（比如 data-src）。当 js 监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到 src 属性中，达到懒加载的效果。

这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

107、页面重绘（repaint）和页面回流（reflow）

css 与 dom 解析完毕后，合并为渲染树（render tree）。

• 重绘(repaint)： 当 render tree中的一些元素需要更新属性，单这些属性只会影响元素的外观，风格，而不会影响到元素的布局，此类的页面渲染叫作页面重绘。
• 回流(reflow) ：当 render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏 等改变而引起的页面重新渲染。

可以看出，回流必将引起重绘，而重绘不一定会引起回流。

当页面布局和几何属性改变时就需要回流。
下述情况会发生浏览器回流：
DOM 树发生变化——如：

• 增加一个元素或删除一个元素（元素为可见元素）；

• 通过 style 控制元素的位置变化——典型的碰壁反弹；

• 元素尺寸的改变——盒模型的每种尺寸均算在其内；

• 内容改变引发的尺寸改变——如：文本文本改变或者图片大小改变而引起的计算值宽度和高度改变；

• 浏览器窗口尺寸改变——resize 事件发生时。

改善由于 dom 操作产生的回流：

1、不要一个一个改变元素的样式属性，直接改变 className，如果动态改变样式，则使用 cssText。
2、使用 DocumentFragment 进行缓存操作,引发一次回流和重绘；
这个主要用于添加元素的时候，就是先把所有要添加到元素添加到 1 个 div 中(这个 div也是新加的)，最后才把这个 div append 到 body 中。
3、使用 display:none 技术，只引发两次回流和重绘；
先 display:none 隐藏元素，然后对该元素进行所有的操作，最后再显示该元素。因对display:none 的元素进行操作不会引起回流、重绘。所以只要操作只会有 2 次回流。
4、使用 cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘

108、apply，call，bind 的区别，以及怎么使用，参数问题

call() 、apply()可以看作是某个对象的方法，通过调用方法的形式来间接调用函数（改变函数内部 this 的指向）。bind() 就是将某个函数绑定到某个对象上。

call()在第一个参数之后的 后续所有参数就是传入该函数的值。就是说要全部列举出来。

apply() 只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。

this 指向他们的第一个参数

bind（）–也是改变函数体内 this 的指向;

bind 会创建一个新函数，称为绑定函数，当调用这个函数的时候，绑定函数会以创建它时传入 bind（）方法的第一个参数作为 this，传入 bind（）方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数；

bind 与 apply、call 最大的区别就是：bind 不会立即调用，其他两个会立即调用

109、箭头函数和普通函数的区别

箭头函数在定义之后，this 就不会发生改变了，无论用什么样的方式调用它，this 都不会改变；

1、箭头函数的 this 永远指向其上下文的 this，任何方法都改变不了其指向，如 call(), bind(), apply()
普通函数的 this 指向调用它的那个对象
2、箭头函数作为匿名函数,是不能作为构造函数的,不能使用 new
3、箭头函数不绑定 arguments,取而代之用 rest 参数…解决
4、通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this 并没有什么影响
5、箭头函数没有原型属性
6、箭头函数不能换行
7、箭头函数不能当做 Generator 函数,不能使用 yield 关键字

110、事件代理事件委托

事件冒泡：子级元素的某个事件被触发，它的上级元素的该事件也被递归触发。
事件委托：使用了事件冒泡的原理，从触发某事件的元素开始，递归地向上级元素传播事件。

事件委托的优点：

1. 对于要大量处理的元素，不必为每个元素都绑定事件，只需要在它们的父元素上绑定一次即可，提高性能。
2. 可以处理动态插入 DOM 中的元素，对动态插入 DOM 中的元素进行直接绑定是不行的。

关于事件委托有一个问题：事件委托给父元素后，如何得知事件是哪个子元素触发的？
答：可以通过 event.target 对象来获取。

window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
//兼容性写法
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}

112、原型、原型链、继承

原型（prototype）：
去改写对象下面公用（不变的）的方法或者属性，让公用的方法或者属性在内存中存在一份，目的是提高性能。

当我们创建一个函数的时候，每个函数会自动生成一个原型（prototype）属性；在函数中就只有这一个原型属性，而这个属性是一个指针，指向一个对象，称为原型对象，原型对象中含有一个 constructor 属性，通过这个属性又可指回函数当我们向函数中添加属性时，实际上添加到了原型对象之中，当我们用 new 操作符创建新实例时，这个新实例是可以共享原型对象中的属性的当我们向新实例中添加属性时，属性被保存到了

原型链：
实例对象与原型之间的连接，用来实现共享属性和继承的（因为原型链的存在，创建出来的对象能找到原型对象（其实原型也是一个对象）下面的东西（包括属性和方法））

113、css 优化，css 放 Body 前和后的区别

推荐放在 head 标签里是因为浏览器代码解析是从上到下的。如果把 css 放在底部，当网速慢时，html 代码加载完成后而 css 没加载完的话，会导致页面没有样式而难以阅读，影响用户体验。所以先加载 css 样式能让页面正常显示。

114、移动端和 PC 端有什么区别

第一： PC 考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是 android 手机还是 ios 手机，一般浏览器使用的都是 webkit 内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

第二：在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是 hover 事件。另外包括移动端弹出的手机键盘的处理，这样的问题在 PC 端都是遇不到的。

第三： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是 rem 布局，感觉很好。

第四： 在动画处理上，PC 端由于要考虑 IE 的兼容性，所以通常使用 JS 做动画的通用性会更好一些，但是 CSS3 做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是 CSS3， 既简单、效率又高。

第五： 微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon 等图标的配置，这些还是要会的。

第六： 百度地图的一些 API 接口，也得去实现一下，这些对于移动端来说，LBS 是一个非常重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。

第七： CSS3 的动画一定要比较熟练，这在移动端用的还是比较多的。

第八：移动端和 pc 端适用的 js 框架也是不一样。 一般 pc 端用 jquery，移动端用 zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个 30k 的资源和一个 80k 的资源，在移动端的差别还是挺大的。而未压缩的 jquery 是 262kb， 压缩的 jquey 是 83kb，可见两者的差别之大。

115、对组件化和模块化的理解

模块化中的模块一般指的是 Javascript 模块，比如一个用来格式化时间的模块。

组件则包含了 template、style 和 script，而它的 Script 可以由各种模块组成。比如一个显示时间的组件会调用上面的那个格式化时间的模块。

组件化更多关注的是 UI 部分，你看到的一个管理界面的弹出框，头部，内容区，确认按钮和页脚都可以是个组件，这些组件可以组成一个弹出框组件，跟其他组件组合又是一个新的组件。

模块化侧重于功能或者数据的封装，一组相关的组件可以定义成一个模块，一个暴露了通用验证方法的对象可以定义成一个模块，一个全局的 json 配置文件也可以定义成一个模块。

封装隔离来后，更重要的是解决模块间的依赖关系。

从包含关系上讲，组件是模块的子集。

116、跨域问题解决办法及原理跨域问题解决办法及原理

同源定义 ：
如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin）。

方式一：图片 ping 或 script 标签跨域

图片 ping 常用于跟踪用户点击页面或动态广告曝光次数。
script 标签可以得到从其他来源数据，这也是 JSONP 依赖的根据。
缺点：只能发送 Get 请求 ，无法访问服务器的响应文本（单向请求）

方式二：JSONP 跨域
JSONP（JSON with Padding）是数据格式 JSON 的一种“使用模式”，可以让网页从别的网域要数据。根据 XmlHttpRequest 对象受到同源策略的影响，而利用 <script>元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据，而这种使用模式就是所谓的JSONP。用 JSONP 抓到的数据并不是 JSON，而是任意的 JavaScript，用 JavaScript 解释器运行而不是用 JSON 解析器解析。所有，通过 Chrome 查看所有 JSONP 发送的 Get 请求都是 js类型，而非 XHR。
缺点：

• 只能使用 Get 请求
• 不能注册 success、error 等事件监听函数，不能很容易的确定 JSONP 请求是否失败
• JSONP 是从其他域中加载代码执行，容易受到跨站请求伪造的攻击，其安全性无法确保

方式三：CORS(跨域资源共享)

Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，提供了Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，确保安全的跨域数据传输。现代浏览器使用 CORS 在 API 容器如 XMLHttpRequest 来减少 HTTP 请求的风险来源。
与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种：

Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

跨域请求默认不会携带 Cookie 信息，如果需要携带，请配置下述参数：

"Access-Control-Allow-Credentials": true
// Ajax 设置
"withCredentials": true

方式四：修改 document.domain 跨子域
前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用 document.domain 进行跨域，所以只能跨子域

在根域范围内，允许把 domain 属性的值设置为它的上一级域。例如，在”aaa.xxx.com”域内，可以把 domain 设置为 “xxx.com” 但不能设置为 “xxx.org” 或者”com”。

现在存在两个域名 aaa.xxx.com 和 bbb.xxx.com。在 aaa 下嵌入 bbb 的页面，由于其document.name 不一致，无法在 aaa 下操作 bbb 的 js。可以在 aaa 和 bbb 下通过 js 将document.name = ‘xxx.com’;设置一致，来达到互相访问的作用。

方式五：WebSocket
WebSocket protocol 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是 server push 技术的一种很棒的实现。

**需要注意：**WebSocket 对象不支持 DOM 2 级事件侦听器，必须使用 DOM 0 级语法分别定义各个事件。

方式六：代理

同源策略是针对浏览器端进行的限制，可以通过服务器端来解决该问题

DomainA 客户端（浏览器） ==> DomainA 服务器 ==> DomainB 服务器 ==> DomainA 客户端
（浏览器）

117、HTTP 与 HTTPS 有什么区别？

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。

HTTPS 协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

HTTP 协议传输的数据都是未加密的，也就是明文的，因此使用 HTTP 协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了 SSL（Secure SocketsLayer）协议用于对 HTTP 协议传输的数据进行加密，从而就诞生了 HTTPS。

简单来说，HTTPS协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比 http 协议安全。

HTTPS 和 HTTP 的区别主要如下：

1、https 协议需要到 ca 申请证书，一般免费证书较少，因而需要一定费用。
2、http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。
3、http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
4、http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全。

118、sql 注入原理

就是通过把 SQL 命令插入到 Web 表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的 SQL 命令。

总的来说有以下几点：
1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2.永远不要使用动态拼装 SQL，可以使用参数化的 SQL 或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4.不要把机密信息明文存放，请加密或者 hash 掉密码和敏感的信息。

119、http 状态码有那些？

1**(信息类)：表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换 HTTP 协议版本

2**(响应成功)：表示动作被成功接收、理解和接受
200——表明该请求被成功地完成，所请求的资源发送回客户端
201——提示知道新文件的 URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的 GET 请求

3**(重定向类)：为了完成指定的动作，必须接受
进一步处理
300——请求的资源可在多处得到
301——本网页被永久性转移到另一个 URL
302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始 URL 地址，重定向，新的 URL 会在 response 中的 Location 中返回，浏览器将会使用新的 URL 发出新的Request。
303——建议客户访问其他 URL 或访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本 HTTP 中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

4**(客户端错误类)：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解
401——请求未经授权，这个状态代码必须和 WWW-Authenticate 报头域一起使用
404——一个 404 错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的 URL
405——用户在 Request-Line 字段定义的方法不允许
406——根据用户发送的 Accept 拖，请求资源不可访问
407——类似 401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的 Content-Length 属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源 URL 长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含 Range 请求头字段，在当前请求资源范围内没有 range 指示值，请求也不包含 If-Range 请求头字段
417——服务器不满足请求 Expect 头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。

5**(服务端错误类)：服务器不能正确执行一个正确
的请求
HTTP 500 – 服务器遇到错误，无法完成请求
HTTP 502 – 网关错误
HTTP 503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常

120、一个页面从输入 URL 到页面加载显示完成的详细过程

1、浏览器查找域名对应的 IP 地址；
2、 浏览器根据 IP 地址与服务器建立 socket连接（三次握手）；

• 主机向服务器发送一个建立连接的请求（ 您好，我想认识您 ）；
• 服务器接到请求后发送同意连接的信号（ 好的，很高兴认识您 ）；
• 主机接到同意连接的信号后，再次向服务器发送了确认信号（ 我也很高兴认识您），自此，主机与服务器两者建立了连接。

3、浏览器与服务器通信： 浏览器请求，服务器处理请求；

• 浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；
• 服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的HTML 文件；
• 服务器将得到的 HTML 文件发送给浏览器；
• 在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；
• 在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript 等文件，
• 过程同请求 HTML ；

4、浏览器与服务器断开连接（四次挥手）。

• 主机向服务器发送一个断开连接的请求（ 不早了，我该走了 ）；
• 服务器接到请求后发送确认收到请求的信号（ 知道了 ）；
• 服务器向主机发送断开通知（ 我也该走了 ）；
• 主机接到断开通知后断开连接并反馈一个确认信号（ 嗯，好的 ），服务器收到确认信号后断开连接；

121、DOM 操作——怎样添加、移除、移动、复制、创建和查找节点?

（1）创建新节点

createDocumentFragment() //创建一个 DOM 片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入

appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找元素

//通过标签名称 document. getElementsByTagName("标签名")
getElementsByTagName()

//通过 name 属性来获取表单元素(IE 容错能力较强，会得到一个数组，其中包括 id 等于 name 值的) 
//document.getElementsByName("name 属性的属性值")
getElementsByName()

//通过元素 Id，唯一性 document.getElementById("id 名")
getElementById()

//通过 class 来选中元素
document. getElementsByClassName("类名")
//querySelector()表示选取满足选择条件的第 1 个元素，querySeletorAll()表示选取满足条件的所有元素。

//选择器直接写 css 选择器形式#id
document.querySelector("选择器");
document.querySeletorAll("选择器");

122、documen.write 和 innerHTML 的区别

document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分

123、Ajax 是什么? 如何创建一个 Ajax？

ajax 的全称：Asynchronous Javascript And XML。
异步传输+js+xml。

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

(1)创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
(2)创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
(3)设置响应 HTTP 请求状态变化的函数
(4)发送 HTTP 请求
(5)获取异步调用返回的数据
(6)使用 JavaScript 和 DOM 实现局部刷新

124、new 操作符具体干了什么呢?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this

125、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

use strict 是一种 ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行, 使 JS 编码更加规范化的模式,消除 Javascript 语法的一些不合理、不严谨之处，减少一些怪异行为。

• 默认支持的糟糕特性都会被禁用，比如不能用 with，也不能在意外的情况下给全局变量赋值;
• 全 局 变 量 的 显 示 声 明 , 函 数 必 须 声 明 在 顶 层 ， 不 允 许 在 非 函 数 代 码 块 内 声 明 函数,arguments.callee 也不允许使用；
• 消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的 arguments 修改，严格模式下的 eval 函数的行为和非严格模式的也不相同;
• 提高编译器效率，增加运行速度；为未来新版本的 Javascript 标准化做铺垫。

126、对引擎的理解？

主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS 引擎则：解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

参考链接：

https://juejin.im/post/5e848dc25188257375467488?utm_source=gold_browser_extension