总结前端问题

作者: who_are_you_ | 来源:发表于2019-05-16 21:11 被阅读0次

前端问题总结
前端问题总结
总结前端问题
前端问题总结（二）
前端问题总结（一）
前端小问题总结
前端学习问题总结
寒冬期前端准备总结---浏览器篇
寒冬期前端准备总结---JS篇
寒冬期前端准备总结---CSS篇

前端经典面试题：

1、（前端面试题）https://zhuanlan.zhihu.com/p/84212558?from_voters_page=true
2、（前端网站）https://www.axihe.com/edu/ask.html

HTM（开发中）

3、(前端面试题) https://www.cnblogs.com/feng-mu/p/10530136.html

1、什么是盒模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2、行内、块元素、空元素分别举例

行内元素：
a, b, span, img, input, strong, select, label, em, button, textarea
块级元素：
div, ul, li, dl, dt, dd, p, h1-h6, blockquote
空元素：
br, meta, hr, link, input, img

3、src和href的区别

概括：src用于替代这个元素（这个属性是将资源嵌入到当前文档中元素所在的位置），而href用于建立这个标签与外部资源之间的关系（引用外部资源）。

4、html5为什么只需要写<!

HTML4.01中的doctype需要对DTD进行引用，因为HTML4.01基于SGML。而HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。其中，SGML是标准通用标记语言，简单的说，就是比XML,HTML更老的标准，这两者都是由SGML发展而来的。但是，HTML5不是的。

HTML5大概可以用以下公式说明：HTML5 ≈ HTML + CSS 3 + JavaScript + API.

<DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前。

主要作用是：告知浏览器的解析器用什么标准解析这个文档。DOCTYPE不存在或者格式不正确都会导致文档以怪异模式呈现

5、link和@import的区别

<link href="style.css" rel="stylesheet" />
link：浏览器知道这是个样式表文件，html的解析和渲染不会暂停，css文件的加载是同时进行的，这不同于在style标签里面的内置样式。
import：添加的样式是在页面载入之后再加载，这可能会导致页面因重新渲染而闪烁。
两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

补充：@import最优写法
@import的写法一般有下列几种：

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

外部引用CSS中 link与@import的区别

这两天刚写完XHTML加载CSS的几种方式，其中外部引用CSS分为两种方式link和@import。
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

6、Doctype作用，标准模式与兼容模式有什么区别

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

7、至少用两种方法写两列布局，左列定宽200px，右侧自适应

首先我们假定页面上已有下列元素：

<body >
    <div id="left" ></div>
    <div id="right"></div>    
</body>

方法一浮动布局 float+margin-left：

div{
    height:200px;
}
#left{
    float: left;
    width: 200px;
    background: blue;
}            
#right{
    margin-left: 200px;
    background: red;
}

方法二flex布局 display+flex：

body{
    display: flex;
    flex-flow: row;
}
#left{                
    width: 200px;
    background: blue;
}            
#right{
    flex: 1;
    background: red;
}

8、写出HTML5新增的语义化标签

article:

即定义article(文章)

aside:

定义页面之外的内容（常用于侧边栏，需要注意的是：移除侧边栏（aside标签及其内容）时不能影响网页的主体结构和布局）

audio:

定义声音内容(音频)

各浏览器支持的音频格式
音频格式 chrome fireFox opear safari ie9
OGG 支持支持支持不支持不支持
MP3 支持不支持支持不支持支持
WAV 不支持支持不支持支持不支持

bdi:

定义文本的文本方向，使其脱离其周围文本的方向设置。

canvas:

定义图形

command：

定义命令按钮

datalist：

定义datalist,标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。请使用 <input> 元素的 list 属性来绑定 <datalist> 元素

details:

规定 details 是否可见

embed:

定义外部交互内容或插件

figcaption:

定义 figure 元素的标题

figure：

定义媒介内容的分组，以及它们的标题（常用于和figure配套实现图文效果）

footer：

定义页脚

header：

定义头部

hgroup：

用来对标题元素进行分组。当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1>-<h6>元素进行分组

keygen:

规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器

mark：

定义有记号的文本

meter：

定义预定义范围内的度量

nav:

标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求

output:

标签作为计算结果输出显示(比如执行脚本的输出)

progress:

标签定义运行中的任务进度（进程）

rp：

定义若浏览器不支持 ruby 元素显示的内容

rt：

定义 ruby 注释的解释

ruby：

定义 ruby 注释

section：

定义文档的某个区域。比如章节、头部、底部或者文档的其他区域

source:

定义媒介源

summary:

定义 details 元素的标题

time:

定义日期/时间

track:

定义用在媒体播放器中的文本轨道

video:

定义视频，支持三种格式Ogg、MPEG4、WebM

9、前端页面由那三层构成，分别是什么，作用是什么

Html (结构) : 超文本标记语言, 由 HTML 或 xhtml之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

Css (表现) : 层叠样式表 , 由css负责创建。css对“如何显示有关内容”的问题做出了回答。

Js (行为) : 客户端脚本语言 , 内容应该如何对事件做出反应

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

1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

11、Sass 、 LESS 是什么？大家为什么要使用他们

它们是什么？
它们是 CSS 预处理器。它是 CSS 上的一种抽象层。它们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. Less 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

有什么区别？
1、关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$
2、Less环境较Sass简单：Sass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中。
3、从功能出发，Sass较Less略强大一些
① sass有变量和作用域。

$variable，like php；
｛$variable｝like ruby；

变量有全局和局部之分，并且有优先级。
② sass有函数的概念；
@function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
-@mixin类似function但缺少像function的编程逻辑，更多的是提高css代码段的复用性和模块化，这个用的人也是最多的。
-ruby提供了非常丰富的内置原生api。
③ 进程控制：

条件：@if @else；
循环遍历：@for @each @while
继承：@extend
引用：@import
④数据结构：
-l i s t 类型 = 数组； − list类型=数组； -list类型=数组；−map类型=object；
其余的也有string、number、function等类型
4、Less与Sass处理机制不一样
前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。Less 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 Less 代码一同编译。

12、css 优先级算法如何计算？

CSS 选择符：
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)

可继承的样式：
1.font-size
2.font-family
3.color
4.text-indent

不可继承的样式：
1.border
2.padding
3.margin
4.width
5.height

优先级算法：
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important >  id > class > tag  
4.important 比 内联优先级高，但内联比 id 要高

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

13、javascript的 typeof 返回哪些数据类型

undefined
string
boolean
number
symbol(ES6)
Object
Function

14、例举 3 种强制类型转换和 2 种隐式类型转换

强制类型转换
Number(参数)把任何类型转换成数值类型
parseInt（参数1，参数2）将字符串转换成整数
parseFloat()将字符串转换成浮点数字
string(参数)：可以将任何类型转换成字符串
Boolean()可以将任何类型的值转换成布尔值
隐式类型转换
（1）- 四则运算
加法运算符+是双目运算符，只要其中一个是string类型，表达式的值便是一个String。
对于其他的四则运算，只有其中一个是Number类型，表达式的便是一个Number。
对于非法字符的情况通常会返回NaN:'1''a' // => NaN,这是因为parseInt(a)值为NaN，1NaN还是NaN
（2）- 判断语句

判断语句中的判断条件需要是 Boolean类型，所以条件表达式会被隐式转换为Boolean。其转换规则则同Boolean的构造函数。比如:

var obj = {};if(obj){
      while(obj);
}

（3）.Native代码调用
JavaScript宿主环境都会提供大量的对象，它们往往不少通过JavaScript来实现的。JavaScript给这些函数传入的参数也会进行隐式转换。例如BOM提供的alert方法接受String类型的参数：alert({a:1}); //=>[object Object]

15、数组方法 pop() push() unshift() shift()

pop()：删除数组的最后一个元素，把数组的长度减1，并且返回它被删除元素的值，如果数组变为空，则该方法不改变数组，返回undefine值
push()：向数组末尾添加一个或者多个元素，并返回新的长度（可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度）
shift():用于把数组的第一个元素从其中删除，并返回被删除的值。如果数组是空的，shift()方法将不进行任何操作，返回undefined的值
unshift():方法是向数组的开头添加一个或多个元素，并且返回新的长度

16、window.onload 和 document ready 的区别

关于window.onload与$(document).ready()的差异性

window.onload是javascript原生的方法，$(document).ready()是jquery提供的。

1. window.onload与$(document).ready()的对比

image

注：

$(window).load(function () {
});
// 等价于
window.onload = function () {
};

2.window.onload

该方法是在网页中的所有元素、全部内容（包括元素的所有关联文件、窗口、框架、对象和图像）完全加载到浏览器后才执行。
执行该方法时可以访问网页中的任何元素。
onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数。

3.$(document).ready()

使用该方法可以在DOM载入就绪时（页面全部内容加载前）就对其进行操纵并调用执行它所绑定的函数。
通过该方法注册的事件处理程序，在DOM完全就绪时就可以被调用。DOM元素可以被访问，但是这些元素的关联文件不一定下载完毕，比如：图片。
每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。

17、”==”和“===”的不同

双等：会自动转换数据类型。
三等（全等）：不会转换；全等是先判断左右两边的数据类型，如果数据类型不一致，则直接返回false，之后才会进行两边值的判断。

18、iframe的作用

嵌入式框架：可以把网页的内容和框架嵌入到网页中

<iframe src='1.html'></iframe>

    iframe常用属性:
    frameborder:是否显示边框
    height:作为一个普通元素高度
    width:作为一个普通元素宽度
    name:框架名称
    scrolling:框架是否滚动
    src:内框架的地址

优点:重载页面时不需要整个页面进行重载，只需要重载一个框架页，减少数据传输，增加网页加载速度

缺点:代码复杂，无法被搜索引擎查找，浏览器后退按钮无效，增加http请求

19、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

gif图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色
jpg支持上百万种颜色，有损压缩，压缩比可达180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画
png为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有256色，png24不透明，但不止256色。
webp谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpeg的2/3，有损压缩。高版本的W3C浏览器才支持，google39+，safari7+

20、style标签写在body后与body前有什么区别

写在body后，由于js是从上到下一次解析，会导致页面闪烁

21、在网页中的应该使用奇数还是偶数的字体？为什么呢

偶数字号相对更容易和 web 设计的其他部分构成比例关系

CSS（开发中）

22、未知宽高垂直水平居中
1、通过定位和transform属性来实现

<div class="parent">
    <div class="children">实现未知宽高元素垂直居中的方法1：通过定位和transform来实现</div>
</div>
<style>
        .parent{
            width:100%;
            height:400px;
            background:#666;
            position:relative;
        }
        .children{
            position:absolute;
            top:50%;
            left:50%;
            background:red;
            transform:translate(-50%,-50%);
        }
    </style>

2、通过flex实现

<div class="parent">
    <div class="children">实现未知宽高元素的水平垂直居中方法2:主要是利用flex布局来实现</div>
</div>
<style>
        .parent{
            width:100%;
            height:400px;
            background:#666;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .children{
            background:red;
        }
    </style>

3、通过table属性实现

<div class="parent">
    <div class="children">实现未知宽高元素垂直水平居中,主要原理是将父元素设置为table，子元素设置为table-cell，利用table属性</div>
</div>
<style>
        .parent{
            display:table;
            width:100%;
            height:400px;
            background:#666;
        }
        .children{
            display:table-cell;
            vertical-align:middle;
            text-align:center;
            background:red;
        }
    </style>

23、都知道哪些CSS Hack

https://www.cnblogs.com/mumble/p/4576489.html

24、box-sizing常用的属性及分别有什么用

盒模型：
1、content-box 标准盒模型
2、border-box 怪异盒模型
3、inherit 是否继承父元素

25、position有几种取值？每种取值相对于谁来进行定位

position的值， relative和absolute分别是相对于谁进行定位的

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

26、CSS选择器有哪些？哪些属性可以继承？

css继承特性主要是指文本方面的继承，盒模型相关的属性基本没有继承特性。
不可继承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承的：
visibility和cursor
终极块级元素可继承的：
text-indent和text-align
内联元素可继承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
列表元素可继承的：
list-style、list-style-type、list-style-position、list-style-image

27、移动端分辨率适配

https://blog.csdn.net/azhenplus/article/details/52798888

28、PC常见兼容问题

https://blog.csdn.net/weixin_34007886/article/details/88827990

29、display:none和visibility:hidden的区别

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

30、浏览器中的回流和重绘是什么，分别在什么情况下触发

重绘：当前元素的样式(背景颜色、字体颜色等)发生改变的时候，我们只需要把改变的元素重新的渲染一下即可，重绘对浏览器的性能影响较小，所以一般不考虑。　　发生重绘的情形：改变容器的外观风格等，比如background：black等。改变外观，不改变布局，不影响其他的dom。
回流：是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。　　因为回流可能导致整个dom树的重新构造，所以是性能的一大杀手　　一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流.
https://juejin.cn/post/6844903673500270600

32、px、em、rem的区别

https://www.runoob.com/w3cnote/px-em-rem-different.html

33、清除浮动的方式有哪些，比较好的是哪种

（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。（比较好）
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。

34、简述 readyonly 与 disabled 的区别

readyonly
1，只针对input(text/password)和textarea有效，
2，不可编辑，但是是可以复制。
disabled
1，对于所有的表单元素有效，
2，完全不可编辑，并且是不能复制的。
表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

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

https://zhuanlan.zhihu.com/p/30236218

37、为什么要初始化样式

1.浏览器差异

不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异

2.提高编码质量

如果不初始化，整个页面做完会很糟糕，重复的css样式很多
初始化代码：https://www.cnblogs.com/miluluyo/p/11152926.html

38、Doctype 的作用？严格模式与混杂模式的区别？

一、HTML中Doctype的作用：
<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。
二、严格模式和混杂模式的区别：
首先，严格模式（又称标准模式，Standards模式）和混杂模式（Quirk模式）都是指浏览器的呈现模式，要与Doctype的两种风格区别开来（严格（ strict ）和过渡（ transitional ），过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本）。
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码，呈现页面
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码，即使用一种比较宽松的向后兼容的方式来显示页面
而浏览器究竟是使用严格模式还是混杂模式呈现页面与网页中的 DTD （文件类型定义）直接相关。
对于 HTML 4.01 文档，
包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。
对于HTML5文档，
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

39、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？

1、滚动条

document.documentElement.scrollTop||document.body.scrollTop

2、获取样式兼容

function getStyle(dom, styleName){ return dom.currentStyle? dom.currentStyle[styleName] :getComputedStyle(dom)[styleName];}

3、网页可视区兼容

window.innerHeight || document.documentElement.clientHeight window.innerWidth || document.documentElement.clientWidth

4、事件对象兼容

e  = e || window.event;

5、阻止事件冒泡兼容

event.stopPropagation? event.stopPropagation():event.cancelBubble=true;

6、事件目标对象兼容

var src = event.target || event.srcElement;

7、阻止默认行为兼容

evt.preventDefault?evt.preventDefault():evt.returnValue=false;

42、CSS3 有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image

43、html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

1
2
3
4
5

如何区分：

在文档类型声明上
2.在结构语义上

44、CSS3 新增伪类有那些？

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中。

45、rgba()和opacity的透明效果有什么区别

1.opacity 是属性，rgba()是函数，计算之后是个属性值；
2.opacity 作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；
3.rgba() 一般作为背景色 background-color 或者颜色 color 的属性值，透明度由其中的 alpha 值生效，取值0-1；

扩展：
1.transparent 也是透明，是个属性值，颜色值，跟#000是一类，不过它是关键字来描述。

46、知道css有个content属性吗？有什么用？有什么应用？

css有一个属性叫做content。content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些内容content属性早在CSS2.1的时候就被
引入了，可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持段落注释。但是目在CSS 3 Generated Content工作草案中，
content属性添加了更多的特征，例如：插入以及移除文档内容的能力，以创建脚注，结语，及前还没有浏览器支持content的扩展功能。
2.知识剖析:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素需要注意的是如
果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是
为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等

50、解释css sprites,如何使用？

https://m.html.cn/qa/css3/13363.html

51、用纯css创建一个三角形的原理是什么？

1.采用的是均分原理

非常有意思的是盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部

这里写图片描述

2.代码的实现

第一步保证元素是块级元素

第二步设置元素的边框

第三步不需要显示的边框使用透明色

.square{  
     width:0;  
     height:0;  
     margin:0 auto;  
     border:6px solid transparent;  
     border-top: 6px solid red;  
 }  
第二种写法：
.square{  
     width:0;  
     height:0;  
     margin:0 auto;  
     border-width:6px;
     border-color:red transparent transparent transparent;
     border-style:solid dashed dashed dashed;//为了兼容IE6，把没有的边框都设置为虚线
 }

效果如下：

这里写图片描述

52、一个满屏品字布局如何设计

53、CSS属性overflow属性定义溢出元素内容区的内容会如何处理

参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
默认为visible

54、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景

https://www.jianshu.com/p/0db2e9eb10f0

55、浏览器是怎样解析CSS选择器的

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

56、PC常见兼容问题汇总

移动端：

① 安卓浏览器看背景图片，有些设备会模糊，原因是手机的分辨率太小

解决方案：用2X图片来代替img标签，然后background-size: contain

② 防止手机中页面放大或缩小：在meta中设置viewport user-scalable = no

③ 上下拉滚动条卡顿： overflow-scrolling: touch;

④ 禁止复制选中文本： user-select: none;

⑤ 长时间按住页面出现闪退：-webkit-touch-callout: none;

⑥ 动画定义3D硬件加速： transform: translate 3d(0,0,0);

⑦ formate-detection 启动或禁止自动识别页面中的电话号码，content = "yes/no"

⑧ a标签添加tel是拨号功能

⑨ 安卓手机的圆角失效： background-clip: padding-box;

⑩ 手机端300ms延迟： fastclick

① 横平时字体加粗不一致： text-size-adjust: 100%;

PC端：

① rgba不支持IE8 用opacity属性代替rgba设置透明度

② 图片加a标签在IE9中出现边框解决方案： img{border: none;}

③ IE6不支持display: inline-block 设置为： display: inline

④ position : fixed 不支持IE5/IE6

⑤ IE6，Firfox中，width = width + padding + border

⑥ min-height比兼容IE6/IE7

57、绝对定位和相对定位区别

https://zhidao.baidu.com/question/101820574.html

58、position跟display、overflow、float这些特性相互叠加后会怎么样

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

59、上下margin重合的问题

60、设置元素浮动后，该元素的display值是多少

display: block

61、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法

62、 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

上图：

image.png

引起这种空白间隔的原因：

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

解决方案：

方法一：既然是因为<li>换行导致的，那就可以将<li>代码全部写在一排，消除空格，但是不美观如下:

<div class="wrap">
<h3>li标签空白测试</h3>
<ul>
<li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>
</ul>
</div>

方法二：我们为了代码美观以及方便修改，很多时候我们不可能将<li>全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将<ul>内的字符尺寸直接设为0，将下面样式放入样式表，问题解决。

.wrap ul{font-size:0px;}

但随着而来的就是<ul>中的其他文字就不见了，因为其尺寸被设为0px了，我们只好将<li>标签重新设定字符尺寸。

方法三：本来以为方法二能够完全解决问题，但经测试，将li父级标签字符设置为0在Safari浏览器依然出现间隔空白；既然设置字符大小为0不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是li内的字符间隔也被设置了，我们需要将li内的字符间隔设为默认。

.wrap ul{letter-spacing: -5px;}

之后记得设置li内字符间隔

.wrap ul li{letter-spacing: normal;}

63、简述优雅降级和渐进增强

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

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

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？

JavaScript

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

同步：

同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

异步：

将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

同步和异步本身是相对的

同步就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。

异步就是，当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。

存在就有其道理异步虽然好但是有些问题是要用同步用来解决，比如有些东西我们需要的是拿到返回的数据在进行操作的。这些是异步所无法解决的。

65、怎样添加、移除、复制、创建、查找节点

(1)创建新节点
　　createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点
(2) 添加、移除、替换、插入
　　appendChild()
　　removeChild()
　　redplaceChild()
　　insertBefore() //在已有的子节点前插入一个新的子节点
(3) 查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值(IE容错能力较强会得到一个数组，其中包括id等于name值的)
　　getElementById() //通过元素Id，唯一性

66、实现一个函数clone

什么是值类型、引用类型?
JavaScript中的原始类型：Undefined、Null、Boolean、Number 和 String。

另外,根据变量值传递的方式,我们又可以将数据区分为“值类型”和“引用类型”.

值类型：将一个值类型变量赋给另一个值类型变量时，将复制包含的值

JavaScript中原始类型都属于值类型(string, number, boolean, null, undefined).

引用类型：对象（Object）、数组（Array）、函数（Function）

在传递和赋值时, 数据将自身的引用(又叫“地址”、“指针”)给对方.

注意项：

1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚

2：判断一个变量是什么类型的

3：递归算法的设计

Object.prototype.clone = function(){  //给对象原型添加一个clone函数

        var o = this.constructor === Array ? [] : {}; //判断传入的对象是数组类型的对象，还是其它类型的对象

        for(var e in this){

                o[e] =  typeof this[e]  === "object" ? this[e].clone() : this[e]; //判断传入的值是否为对象，是的话再调用自身clone（），否则直接赋值

        }

        return o;

}

67、数组去重

https://www.jb51.net/article/118657.htm
https://www.cnblogs.com/hanyudanei/p/9496757.html

68、在JavaScript中什么是伪数组？如何将伪数组转化为标准数组

1：什么是伪数组
伪数组是一个含有length属性的json对象，
它是按照索引的方式存储数据，
它并不具有数组的一些方法，只能能通过Array.prototype.slice转换为真正的数组，并且带有length属性的对象。

    var obj = {0:'a',1:'b',length:2}; // 伪数组
    var arr = Array.prototype.slice.call(obj); // 转化为数组    
    console.log(arr);  // 返回["a","b"]

2：它和数组的关系
都是模拟集合
3：为什么会有伪数组
在日常开发中，有许多的对象是由伪数组组成，比如函数内arguments对象，还有像调用getElementsByTagName,document.childNodes之类的，它们都返回NodeList对象都属于伪数组.
第一个借用数组的slice方法

var a ={
        0:'t',
        1:'a',
        2:'r',
        length:3
    }
    let b=Array.prototype.slice.call(a);
    console.log(b)

第二个ES6新增的一个方法

  var a ={
        0:'t',
        1:'a',
        2:'s',
        length:3
      }

      let b=Array.from(a)
      console.log(b)

第三个原型

 var a ={
        0:'t',
        1:'a',
        2:'rr',
        length:3
      }
a.__proto__ = Array.prototype
console.log(a)
将对象转换为数组

var obj = {
            a: 1,
            b: 2,
            c: 3
        };
var newObj=Object.entries(obj);
console.log(newObj)

69、JavaScript中callee和caller的作用

https://www.cnblogs.com/zhihaospace/p/12258900.html

70、简述cookie、sessionStorage、localStorage的区别

https://www.cnblogs.com/pengc/p/8714475.html

71、jQuery的事件委托on、live、delegate之间有什么区别

首先什么是事件委派？
事件委派（委托）：
事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。
当页面同步加载时，会添加事件。有时数据是由异步加载，同步无法给不存在（刚开始）的元素添加事件。此时我们可以在一开始就存在的父元素上添加事件，再通过父元素在触发时找子元素。

事件委托优点
提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。

Jquery的事件委派写法：

    $(父元素).on('click','子元素选择器',function(){
            //代码块
     });

区别在哪里？

live 把事件委托交给了document（根节点），document 向下去寻找符合条件的元素（），不用等待document加载结束也可以生效。
delegate可指定事件委托对象，相比于live性能更优，直接锁定指定选择器；
on事件委托对象选填，如果不填，即给对象自身注册事件，填了作用和delegate一致。
band只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件，存在局限性。

在jQuery 1.7中 .bind()、.live()和.delegate() 统一用on代替，解决混乱问题。

$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);//解除事件

72、如何理解闭包，有何作用，使用场景

https://www.jianshu.com/p/5600f173387d

73、跨域请求资源的方式有哪些

1、什么是跨域？

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：

网络协议不同，如http协议访问https协议。
端口不同，如80端口访问8080端口。
域名不同，如qianduanblog.com访问baidu.com。
子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。
域名和域名对应ip,如www.a.com访问20.205.28.90.

2、跨域请求资源的方法：

(1)、porxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：

[

复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important; white-space: pre-wrap;">res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});</pre>

[

复制代码

](javascript:void(0); "复制代码")

(3)、jsonp

定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。

实例如下：

[

复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important; white-space: pre-wrap;"><script>
    function testjsonp(data) {
       console.log(data.name); // 获取返回的结果
    }
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script></pre>

[

复制代码

](javascript:void(0); "复制代码")

缺点：

1、这种方式无法发送post请求（这里）

2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

74、谈谈垃圾回收机制及内存管理

https://www.jianshu.com/p/b75a1159e943

75、描述一次完整的http请求过程

https://blog.csdn.net/yy19890521/article/details/80770950

76、http状态码有哪些

一、什么是HTTP状态码？

当用户在浏览网页的时候，浏览器会返回一个htttp状态码，主要是用来响应浏览器的请求。

二、常见的HTTP状态码有哪些？

200 OK

　　　　请求正常处理完毕

204 No Content

请求成功处理，没有实体的主体返回

301 Moved Permanently
　　　　永久重定向，资源已永久分配新URI

302 Found
　　　　临时重定向，资源已临时分配新URI

400 Bad Request

请求报文语法错误或参数错误

401 Unauthorized

要通过HTTP认证，或认证失败

403 Forbidden

请求资源被拒绝

404 Not Found
　　　　无法找到请求资源（服务器无理由拒绝）

500 Internal Server Error
　　　　服务器故障或Web应用故障

503 Service Unavailable
　　　　服务器超负载或停机维护

状态码如图：

image

77、如何优化图像，图像格式的区别

1、不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。

2、使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。

基本上，内容图片多为照片之类的，适用于JPEG。

而修饰图片通常更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

4、按照HTTP协议设置合理的缓存。

5、使用字体图标webfont、CSS Sprites等。

6、用CSS或JavaScript实现预加载。

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

图像格式的区别：
矢量图：图标字体，如 font-awesome；svg

位图：gif,jpg(jpeg),png

区别：

1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。

2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。

3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;

优缺点：

1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

78、浏览器是如何渲染页面的

https://www.jianshu.com/p/b7b7a5904223

79、写一个function，清除字符串前后的空格

function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
    }
}

82、移动端点击事件延迟300ms，原因是什么，如何解决

https://zhuanlan.zhihu.com/p/69522350

85、封装一个函数，参数是定时器的时间，.then执行回调函数

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

86、请尽可能详尽的解释ajax的工作原理，以及跨域

第一步：创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

第二步：判断数据传输方式(GET/POST)

第三步：打开链接 open()

第四步：发送 send()

当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

注意：检测XMLHttpRequest对象的readyState属性，该属性表示请求／响应过程的当前活动阶段，属性值如下：

0：未初始化。尚未调用open()方法

1：启动。已经调用open()方法，但尚未调用send()方法

2：发送。已经调用send()方法，但尚未接收到响应

3：接收。已经接收到部分响应数据

4: 完成。已经接收到全部响应数据，而且已经可以在客户端使用了（如果写原生的js ajax请求需要等到 readyState==4的时候再做处理）其他的js库已经做好处理了

87、alert(undefined == null)弹出什么

true
https://www.cnblogs.com/thiaoqueen/p/6904398.html
88、typeof和instanceof相同点与不同点

前言:typeof用于检测数据类型,不必细说,只归纳一下易混淆的概念.

1.对于对象、数组、null 返回的值是 object 。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。
2.对于函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。

// var a = null;
// alert(typeof(a))
//  alert(typeof(Date));            // function(Date使用前需要实例化的原因)
//  alert(typeof(null));            // object
//  alert(typeof(undefined))        // undefined
//  alert(typeof(NaN))              // number
//  alert(typeof(NaN == undefined)) // boolean
//  alert(typeof(NaN == NaN))       // boolean
//  var str = '123abc'
//  alert(typeof(str++))            // number
//  alert(str)                      // NaN

比较typeof与instanceof

相同点：

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。

不同点:

typeof:
1.返回值是一个字符串，用来说明变量的数据类型。
2.typeof 一般只能返回如下几个结果： number, boolean, string, function, object, undefined。

 if (typeof a != "undefined") {
   console.log("ok");

 } eles {
    console.log("not ok");
}
//下面的代码是错误的
// if (a) //因为如果 a 不存在（ 未声明） 则会出错。
// if (a) {
//     console.log("ok");

// } else {
//     console.log('cc');

// }

| 对于 Array, Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。 |

instanceof:
1.返回值为布尔值;
2. instanceof 用于判断一个变量是否属于某个对象的实例。

// var a = new Array();
// alert(a instanceof Array); // true
// alert(a instanceof Object) // true
//如上， 会返回 true， 同时 alert(a instanceof Object) 也会返回 true;
// 这是因为 Array 是 object 的子类。
// alert(b instanceof Array) // b is not defined

// function Test() {};
// var a = new test();
// alert(a instanceof test) // true

89、JavaScript中如何检测一个变量是String类型，写出具体实现函数

方法1、

function isString(obj){
    return typeof(obj) === "string"? true: false;
    // returntypeof obj === "string"? true: false;
}

方法2、

function isString(obj){
    return obj.constructor === String? true: false;
}

方法3、

function isString(obj){
     return Object.prototype.toString.call(obj) === "[object String]" ? true : false;
}
// 如：
var isstring = isString('xiaoming');
console.log(isstring);  // true

90、JavaScript实现二分法查找

var arr = [1,2,3,4,5,6];
function getIndex1(arr,key){
            var low = 0;
            var high = arr.length-1;
            while(low<=high){
                var mid = Math.floor((low+high)/2);
                if(key===arr[mid]){
                    return mid;
                }else if(key>arr[mid]){
                    low = mid+1;
                }else{
                    height = mid-1;
                }
            }
            return -1;
}
console.log(getIndex1(arr,5));//4

思想：从数组中开始查找，如果该元素是要搜索的目标元素，则循环结束，如果不是继续下一步，如果目标元素大于或者小于中间元素，则在数组大于或者小于中间元素的那一半区域进行查找，进而重复上面操作。如果数组是空的，则找不到该目标元素。

91、"aaaasdserdsfssa"中出现次数最多的字符及个数

 8             var s="aaaabbbbssssssss";
 9             var fres={};  //用来记录所有的字符的出现频次
10             var mostFreqChar=''; //用来记录最大频次的字符
11             for(var i=0;i<s.length;i++){
12                 var char=s[i];
13                 if(!fres[char]){
14                     fres[char]=0;
15                 }
16 
17                 fres[char]++;            
18                 if(mostFreqChar==''||fres[char]>fres[mostFreqChar]){
19                     mostFreqChar=char;
20                 }
21 
22             }
23             console.log(mostFreqChar);
24             console.log(fres[mostFreqChar]);

92、谈谈你所了解的Web攻击技术

(1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。

（2）SQL注入攻击

（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

102、第一个人10岁，第二个比第一个大2岁，依次递推，请用递归编写一个方法，可以计算出第8个人多大？（JS编写）

function fn(n) {
  if (n === 1) {
    return 10;
  }
  return fn(n - 1) + 2;
}
console.log(fn(8));
// 24

103、JavaScript获取网页传输过来的参数name和sex的值

https://www.cnblogs.com/wang98/p/7688186.html

104、Common、AMD、CMD的区别

https://www.cnblogs.com/fozero/p/6168359.html

105、正则，把一个字符串转为驼峰

https://blog.csdn.net/wzc_coder/article/details/108688190

107、while、do while、if的区别

https://www.cnblogs.com/alibai/p/3591088.html

108、call、apply、bind方法的作用分别是什么？有什么区别？

1、他们三个都能改变this的指向,第一个参数都是this指向的对象。bind的this指向不可被改变。
2、call、apply可以看作是某个对象中的方法，通过调用对象中方法的形式间接调用函数。也可以理解为让函数在指定的对象下执行，他们属于立即执行。
call与apply不同的地方是参数不同，call()在第一个参数之后的后续所有参数就是传入该函数的值。
apply() 只有两个参数，this指向的对象，第二个是数组，这个数组就是该函数的参数。
3、bind可以理解为创建一个新的函数，调用才会执行，在第一个参数this指向的对象，之后的后续所有的参数都是传入该函数的值。

call举例：

var obj = {x: 1}
function foo() {console.log(this.x)}
foo.call(obj)       //打印结果： 1

apply举例：

var obj = {};
function foo(a, b, c) {
 console.log(b);
}
foo.call(obj, 1, 2, 3)   //打印结果： 2;

bind举例：

var module = {
    x:42,
    getX:function(){
    return this.x;
  }
 }
var unboundGetX = module.getX;
console.log(unboundGetX());  //undefined

var boundGetX = unboundGetX.bind(module);
console.log(boundGetX());  //42

bind的this指向不可被改变，用call、apply也不行：

var obj = {
    z: 1
};
var obj1 = {
    z: 2
};

function fn(x, y) {
    console.log(x + y + this.z);
};
// call与apply
fn.call(obj, 2, 3); //6
fn.apply(obj, [2, 3]); //6

var bound = fn.bind(obj, 2);
bound(3); //6
//尝试修改bind返回函数的this
bound.call(obj1, 3); //6