缺点行内标签

前端面试题（持续更新中）

万次阅读 多人点赞 2019-11-06 17:16:33

闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数本 2.数据类型基本数据类型：String,Boolean,number,Null,...

全家桶项目源码：Vue全家桶+SSR+Koa2全栈开发美团网[完整版] 链接：https://pan.baidu.com/s/1cwPDVkj_I5z568mYIHni4A 提取码：24g2

2020字节跳动扎心面试题链接（从公众号获取的）：
https://mp.weixin.qq.com/s/B8xRPxwjJfURyYzTQgIxUw

CSS面试题：
1、谈谈你对CSS盒模型的认识？

1、基本概念：标准模型+IE模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内边距（padding），边框（border），margin（外边距），和内容（content）。
标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
怪异(IE)盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）
设置盒模型：box-sizing:border-box

2、CSS是如何设置这两种模型，那么二者怎么转化呢？

content-box: 指的是W3C标准盒模型，也是默认的设置属性。
border-box：指的是IE盒模型，width和height包含了padding和border。

3、JS如何获取盒模型对应的宽和高？

dom.style.width/height：对节点样式可读可写，但只能读或写内嵌的CSS样式对于在(style)或外联样式不能读写。
dom.currentStyle.width/height：拿到的是渲染之后的宽和高，比较真实，但支持IE浏览器
window.getComputedStyle(dom).width/height：方法是只读的，只能获取样式，不能设置。
dom.getBoundingClientRect().width/height：getBoundingClientRect()方法得到8个值，除了 width 和 height 外的属性x、y、left、top、right和bottom都是相对于视口(viewport)的左上角位置而言的。

4、什么是BFC？BFC的原理?

块级格式化上下文。是一种边距重叠解决方案。
应用场景： 1. 解决margin叠加的问题
2. 用于布局（overflow: hidden）
3.BFC不会与浮动盒子叠加。
4. 用于清除浮动，计算BFC高度。

5、行内元素和块级元素有什么区别？

块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，块级元素可以设置宽高，如p,ul,form,div,(h1-h6)等标签元素
行内元素：元素在一行内水平排列，高度由元素的内容决定，行内元素不可以设置宽高，如a,br,span,input等元素。

6、行内元素和块级元素如何转换？

行变块：display:block
块变行：display：inline
display：inline-block(可以在同一行内显示)。

7、什么是伪类选择器和伪元素？列举3个CSS3中引入的伪类选择器和伪元素！

伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
伪元素选择器：dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有）
::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
::selection用来改变浏览网页选中文的默认效果

伪类选择器：一个概念上的类，不是我们定义的，是抽象的。如a:hover，选择a标签（元素选择器）中具有鼠标悬停类的所有元素，这个类是抽象的，不是我们自己定义的，再如first-child，选择第一个，选择具有这个类性质的所有元素，“第一个”，这个类就抽象了，我们没必要定义一个第一个这样的类
列举：:root()选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是（html）。:root选择器等同于（html）元素。
:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

8、px和em，rem的区别？

px 实际上就是像素，用PX设置字体大小时，比较稳定和精确。px是固定长度单位，不随其它元素的变化而变化
em 就是根据基准来缩放字体的大小。em 是相对长度单位。em是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化
rem是CSS3新增的一个相对单位,rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化
例如： ==屏幕宽度/设计宽度 = 1rem的值/预设定rem的值。
1920/1920=100/100 ;
所以 1rem=1920/1920*100 ;
document.documentElement 是html节点
document.documentElement.style.fontSize = ((windowWidth / designWidth) * rem2px) + 'px';
假如，用户将屏幕拖小了，变为960。1rem将自动变为50px;960/1920乘以100=50
这里需要判断下，当屏幕的宽度大于设计稿定义的宽度，用设计稿的宽度，如果小于，用屏幕宽度作为变量屏幕宽度。

10、关于绝对定位，相对定位和固定定位

1、相对定位不脱离标准流，在页面中占位置。
相对于自己原来的位置来进行定位。
2、绝对定位脱离标准流，在页面中不占位置。
如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。
3、固定定位：相对于浏览器窗口进行定位
相对定位：position: relative;
绝对定位：position: absolute;

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

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.2 可以继承的属性：
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;

优先级： !important > id > class > tag
important 比内联优先级高,但内联比 id 要高

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

12、以下是CSS3的几种常用前缀

-webkit
-moz
-ms
-o

13、CSS3新增的伪类有哪些

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

14、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

15、为什么要初始化CSS样式。

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

16、解释下浮动和它的工作原理？清除浮动的技巧

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，清除浮动的本质:主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。
使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
使用after伪对象清除浮动。
该方法只适用于非IE浏览器。
一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
可以给父元素设置overflow：auto或者hidden

#JS的面试问题：
0、如何判断一个变量是对象还是数组？

1、我们能够使用typeof判断变量的身份，判断字符串得到string，数字和NaN得到number，函数会得到function等，但是判断数组，对象和null时都会得到object，这就是typeof的局限性，
2、使用instanceof（比较运算符）可以用来判断一个变量是数组还是对象
3、constructor（构造函数）
4、Object.prototype.toString.call()
总结：判断简单数据类型可以用typeof，判断数组，对象使用instanceof，constructor和 Object.prototype.toString.call()，最好使用Object.prototype.toString.call()，更加精准

1.闭包

闭包就是能够读取其他函数内部变量的函数。
外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象
创建闭包最常见方式，就是在一个函数内部创建另一个函数。
闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都永远不会被释放
在退出函数之前，将不使用的局部变量全部删除。可以使变量赋值为null;

2.数据类型

基本数据类型：String（字符串）,Boolean（布尔）,number（数值）,Null（空值）,undefined（未定义）
引用数据类型：Object(Array,Date,RegExp,Function)

3.javascript 中 == 和 === 的区别是什么？举例说明。

===会自动进行类型转换，==不会

4.请尽可能详尽的解释 ajax 的工作原理

思路：先解释异步，再解释 ajax 如何使用
Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用JS来操作DOM而更新页面。XMLHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
特点：Ajax 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源

ajax是什么？

通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax 在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

Ajax 的缺点：

Ajax 不支持浏览器 back 按钮
安全问题 Ajax 暴露了与服务器交互的细节
对搜索引擎的支持比较弱
破坏了程序的异常机制
不容易调试

HTTP协议类型题目：
5. HTTP 状态消息

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
302：请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当
继续向原有地址发送以后的请求。只有在Cache-Control或 Expires中进行了指定的情况下，
这个响应才是可缓存的
304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上
次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁
止包含消息体，因此始终以消息头后的第一个空行结尾。
403：服务器已经理解请求，但是拒绝执行它。
404：请求失败，请求所希望得到的资源未被在服务器上发现。
500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

6.说一下什么是Http协议

对客户端和服务器端之间数据传输的格式规范，格式简称为“超文本传输协议”

7.什么是Http协议无状态协议?怎么解决Http协议无状态协议?

(1)、无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息
(2)、无状态协议解决办法：通过1、Cookie 2、通过Session会话保存。

8.Http协议中有哪些请求方式?

GET:用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器，从指定的资源请求数据
POST:用于传输信息给服务器, 向指定的资源提交要处理的数据
PUT:传输文件,报文主体中包含文件内容,保存到对应URI位置
HEAD:获得报文首部,与GET方法类似,只是不返回报文主体,一般用于验证URI是否有效
DELETE:删除文件,与PUT方法相反,删除对应URI位置的文件
OPTIONS:查询响应URI支持的HTTP方法

区别:

Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。

在这里插入图片描述

9.Http协议由什么组成?

请求报文包括三部分:
(1).请求行:包含请求方法,URI,HTTP版本协议 (2).请求首部字段 (3).请求内容实体
响应报文包含三部分:
(1).状态行:包含HTTP版本,状态码,状态码原因短语 (2).响应首部字段 (3).响应内容实体

10.HTTP协议的工作原理?

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息，通常情况下会配合数字证书实现。

13.ajax的同步和异步区别：

同步：提交请求 -> 等待服务器处理 -> 处理完毕返回，这个期间客户端浏览器不能干任何事
异步：请求通过事件触发 -> 服务器处理（这是浏览器仍然可以作其他事情）-> 处理完毕
ajax.open方法中，第3个参数是设同步或者异步。

14.跨域? ?

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

14-1、什么情况下会碰到跨域问题？有哪些解决方法？

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。
解决方法：1. JSONP方法:JSONP是服务器与客户端跨源通信的常用方法，Jsonp 需要目标服务器配合一个callback函数网页通过添加一个(script)元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
首先，网页动态插入(script)元素，由它向跨源网址发出请求。
2.通过修改document.domain来跨子域
3.使用window.name来进行跨域
4.通过CORS解决AJAX跨域

15.简述 ajax 的过程。

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

16.axios和ajax的区别

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

②axios特征：
1.自动转换JSON数据
2.从 node.js 创建 http 请求
3.支持 Promise API
4.客户端支持防止CSRF
5.提供了一些并发请求的接口
PS：防止CSRF：就是让你的每个请求都带一个从cookie中拿到的key，根据浏览器同源策略，假冒的网站是拿不到你cookie中得到key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略

17.JavaScript 链原型，原型链 ? 有什么特点？

1.原型对象也是普通的对象，是对象一个自带隐式的 _ proto_ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null 的话，我们就称之为原型链
2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

3.每一次获取对象中的属性都是一次查询过程，如果在自有属性中找不到就会去原型对象中查找，如果原型对象中还查不到，就回去原型对象的原型中查找，也就是按照原型链查找，直到查找到原型链的顶端，也就是Object的原型。

作用域链：
　　一般情况下，变量取值到创建这个变量的函数的作用域中取值。
　　但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

一、作用域
　　在 Javascript 中，作用域分为全局作用域和函数作用域
　　全局作用域：
　　　　代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。
　　函数作用域：
　　　　在固定的代码片段才能被访问

18、JS创建对象有几种方法？

1.new Ｏbject()
2.使用字面量
3.工厂模式
4.构造函数模式（constructor）
5.原型模式（prototype）
6.构造函数+原型模式
还是点击下面链接讲解的比较详细吧 ↓
https://www.jianshu.com/p/1fb0447db852

19、虚拟dom和实体dom的区别？

DOM的本质：
浏览器概念，浏览器从服务器端读取html页面，浏览器将html解析成一棵元素嵌套关系的dom树，用对象来表示页面上的元素，并提供操作dom对象的api。
虚拟DOM：
框架概念，程序员用js对象来模拟页面上dom元素的嵌套关系( 本质 )，为了实现页面元素的高效更新( 目的 )
区别：1、虚拟DOM不会进行重排与重绘操作；
2、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后进行重排和重绘，减少过多DOM节点重排和重绘损耗。
3、虚拟DOM有效降低大面积（真实DOM节点）的重排和重绘，因为最终与真实DOM比较差异，可以局部渲染

20、描述一下事件冒泡机制

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

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

cookie（储存在用户本地终端上的数据）是网站为了标识用户身份而储存在用户本地终端上的数据，cookie数据始终在同源的http请求中携带，只会在浏览器和服务器间来回传递。另外两个不会自动把数据发给服务器，仅在本地保存。

22、js阻止事件冒泡的两种方法

event.stopPropagation( )
event.target

23、JS的内置对象
在这里插入图片描述
24、函数调用的四种方式

函数调用模式
方法调用模式
构造器调用模式
间接调用模式，通过call()和apply()进行

25、JS中常见的几种继承方法

1.原型链继承
原型链实现继承的思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。
原型链的基本概念：当一个原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个指向另一个原型的指针。同时，另一个原型中也包含着一个指向另一个构造函数的指针。如果另一个原型是另一个类型的实例，此时实例和原型就构成了原型链
原型链存在的问题：
1）包含引用类型值的原型属性会被所有实例共享，这会导致对一个实例的修改会影响另一个实例。在通过原型来实现继承时，原型实际上会变成另一个类型的实例。原先的实例属性就变成了现在的原型属性
2）在创建子类型的实例时，不能向超类型的构造函数中传递参数

2.构造函数继承（经典继承）
借用构造函数的基本思想，即在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象，因此通过使用apply()和call()方法可以在新创建的对象上执行构造函数
借用构造函数的优势：可以在子类型构造函数中向超类型构造函数传递参数
借用构造函数的问题：
1）无法避免构造函数模式存在的问题，方法都在构造函数中定义，因此无法复用函数。
2）在超类型的原型中定义的方法，对子类型而言是不可见的。因此这种技术很少单独使用。

3.组合方式继承（构造函数 + 原型链）
组合继承：指的是将原型链和借用构造函数的技术组合到一起。思路是使用原型链实现对原型方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数的复用，又能够保证每个实例都有它自己的属性。
组合继承的优势：
避免了原型链和借用构造函数的缺点，融合了他们的优点，是JavaScript中最常用的继承模式。instanceof和isprototypeOf()也能够用于识别基于组合继承创建的对象

4.es6方法继承

27、JS运行机制

JS为什么是单线程?

JS的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

JS的运行机制：

因为JavaScript是单线程，意味着任务要一个接着一个完成，但是，如果前一个任务执行时间很长，那么后面的任务就得一直阻塞着，这样用户体验十分差。
JavaScript的设计者考虑到了这一点，所以他将JavaScript的任务分为两种，在主线程上执行的任务"同步任务"，被主线程挂载起来的任务"异步任务",后者一般是放在一个叫任务队列的数据结构中。
只有当所有同步任务都执行完了才会，开始观察任务队列中被挂载起来的任务，并且按照队列的特性，先进先出的依次执行。

28、DOM是什么？

DOM是Document Object Model，即文档对象模型，它允许脚本控制Web页面、窗口和文档。

29、DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，
dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

30、数组去重的方法

1.ES6 Set去重

var arr = [1,2,3,3,2,1,5,1];
var arr2 = Array.from(new Set(arr))
console.log(arr2)

var arr = [1,2,3,3,2,1,5,1];
let a = [...new Set(arr)]
console.log(a)

2.利用for嵌套for，然后splice去重
3.利用indexOf去重

var arr = [1,3,4,5,6,7,4,3,2,4,5,6,7,3,2];
function find(){
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) == -1 ) { //也可以换成if（newArr.indexOf(arr[i])<0)
newArr.push(arr[i]);
  }
}
consoloe.log(newArr); // [1, 3, 4, 5, 6, 7, 2]
}
find(arr); //调用这个方法  indexOf对大小写敏感

4.利用filter
filter(x,index,self)可以为数组提供过滤功能，其中x代表元素，index是与X一同传入元素的索引，而self代表数组本身。

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7];
var arr2 = arr.filter(function(x, index,self) {
return self.indexOf(x)===index;
}); 
console.log(arr2); //[1, 2, 3, 4, 5, 6 ,7]

32、事件委托

简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。
举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

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

35、null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0
undefined是一个表示"无"的原始值，转为数值时为NaN
当声明的变量还未被初始化时，变量的默认值为undefined
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象
undefined表示 “缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

1.变量被声明了，但没有赋值时，就等于 undefined
2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined
3. 对象没有赋值的属性，该属性的值为 undefined
4. 函数没有返回值时，默认返回 undefined

null表示“没有对象”，即该处不应该有值。典型用法是：
1. 作为函数的参数，表示该函数的参数不是对象
2. 作为对象原型链的终点

36、哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

37、typeof null返回什么？为什么？

不同的对象在底层都表示为二进制，在javascript中二进制前三位都为0的话会被判断为object类型，
null的二进制表示全0，自然前三位也是0，所以执行typeof时会返回“object”

39、ES6中…运算符能做什么

1.复制数组 2.合并数组 3. 扩展运算符可以与解构赋值结合起来，用于生成数组。 4.扩展运算符还可以将字符串转为真正的数组

42、如何实现浏览器内多个标签页之间的通信?

第一种——调用localStorage
在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；
在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值，实现不同标签页之间的通信。

第二种——调用cookie+setInterval()
将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

43、数据类型的自动转换和隐式转换你知道哪些？

隐式类型转换：
1 == ‘1’
‘1’ + 1
‘1’ - 1
显示类型转换：
parseInt(str,radix)/parseFloat(str,radix)/Number()转变成数字。
Boolean(param)转变成布尔值
subString()转变成字符串

VUE方面的问题：
1.谈谈你对MVVM开发模式的理解

Vue是一个 MVVM框架，其各层的对应关系如下:
View层：在Vue中是绑定dom对象的HTML(代表UI视图，负责数据的展示；)
ViewModel层：在Vue中是实例的vm对象 (负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；)
Model层：在Vue中是data、computed、methods等中的数据(代表数据模型，数据和业务逻辑都在Model层中定义；)
在 Model 层的数据变化时，View层会在ViewModel的作用下，实现自动更新

2、Vue的响应式原理？

Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响
Vue中编写了一个wather来处理数据，在使用getter方法时，总会通知wather实例对view层渲染页面，同样的，在使用setter方法时，总会在变更值的同时，通知wather实例对view层进行更新

3、Vue的生命周期

1.beforeCreate --创建前
触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在此阶段可以做的事情：加loading事件
2.created --创建后
触发的行为：vue实例的数据对象data有了，$el还没有
在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备
3.beforeMount --渲染前
触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换
在此阶段可以做的事情：。。。
4.mounted --渲染后
触发的行为：vue实例挂载完成，data.filter成功渲染
在此阶段可以做的事情：配合路由钩子使用
5.beforeUpdate --更新前
触发的行为：data更新时触发
在此阶段可以做的事情：。。。
6.updated —更新后
触发的行为：data更新时触发
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）
7.beforeDestroy —销毁前
触发的行为：组件销毁时触发
在此阶段可以做的事情：可向用户询问是否销毁
8.destroyed —销毁后
触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
在此阶段可以做的事情：组件销毁时进行提示

4、请详细说下你对vue生命周期的理解？

答：总共分为8个阶段：创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。
创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

5、vue生命周期在真实场景下的业务应用

created：进行ajax请求异步数据的获取、初始化数据
mounted：挂载元素内dom节点的获取
nextTick：针对单一事件更新数据后立即操作dom
updated：任何数据的更新，如果要做统一的业务逻辑处理
watch：监听具体数据变化，并做相应的处理

7、Vue中双向数据绑定是如何实现的？

Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被解除过后的数据会有两个属性：一个叫getter，一个叫setter。
getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher(可以收到属性的变化通知并执行相应的函数，从而更新视图。)监听，通知dom修改刷新。

8、父组件与子组件传值

父向子传值：属性传值，父组件通过给子组件标签上定义属性，子组件通过props方法接收数据；
子向父传值：事件传值，子组件通过$emit(‘自定义事件名’，值)，父组件通过子组件上的@自定义事件名=“函数”接收 ($emit方法传递参数)

10、如何让css只在当前组件中起作用

将当前组件的 (style)修改为(styple scoped)

11、第一次加载页面会触发哪几个钩子

第一次加载会触发 beforeCreate、created、beforeMount、mounted四个钩子

12、Vuex是什么？

Vuex是专门为Vue服务，用于管理页面的数据状态、提供统一数据操作的生态系统
vuex:是vue提供的状态管理工具，简单解释就是vue各个组件直接的变量是不能直接共享的，组件直接的参数传递才多层的时候变得异常复杂，所以就诞生了vuex的状态管理工具，保证了状态的统一和可追踪
①：这个状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
②：使用vuex管理数据的好处：
能够在vuex中集中管理共享的数据，便于开发和后期进行维护
能够高效的实现组件之间的数据共享，提高开发效率
存储在vuex中的数据是响应式的，当数据放生改变时，页面中的数据会同步更新
③：vuex中的数据和data中的数据与什么区别？
vuex中的数据是全局的，共享的，data中的数据是私有的
vuex中的数据是响应式的，只要vuex中的数据发生改变，引用vuex中的数据的文件会同步更新
vuex中的数据是单向的，想要修改vuex中的数据必须在mutation中修改

13、router是什么？

1.router：this.$router 是路由【导航对象】，用它可以方便的使用 JS 代码，实现路由的前进、后退、跳转到新的 URL 地址
2.routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象
3.route：this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它

14、vue单页面应用及优缺点

vue核心是一个响应的数据绑定系统，mvvm，数据驱动，组件化，轻量，简洁，高效，快速，模块友好。
缺点：不支持低版本浏览器，最低到IE9，不利于SEO的优化，首页加载时间较长，不可以使用浏览器的导航按钮需要自行实现前进后退。

15、vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

16、vue.nextTick()的用处？

nextTick可以使我们在下次DOM更新循环结束之后执行延迟回调，用于获得更新后的DOM。

18、兄弟组件之间如何传值？

可以用过一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发 $e m i t 和监听$ on来实现组件之间的通信和参数传递，类似window的全局自定义事件。类似与子传父，只不过是利用一个新的vue示例作为媒介，而不是当前vue示例(this)

19、jquery和vue的控制DOM元素的主要区别是什么？

jquery操作的是直接dom元素。vue操作的是dom元素对象。
vue.js优势是（视图-模型）双向绑定，简化了dom的操作（不用重写大量的html标签），提高dom的复用率（以最少代码实现更多的功能），倾向于数据读写，虽然看上去使用比较繁琐，但是利于后期的维护。
jquery优势是jquery语义化，容易理解，比较简单，可拓展的插件多。
总结:如果dom操作频繁，不需要动画效果，就使用vue.js。如果dom操作不频繁，但又需要复杂的动画效果，就使用jquery. vue.js比较适合于后台管理页面，jquery比较适合于前台用户交互页面。

20、vue2模版template的四种写法？

1.写在构造器里的：
2.写在(template)标签里
3.写在(script type=“x-template”)标签里

21、var let const声明的变量的区别

let不允许在相同作用域内，重复声明同一个变量。let声明的变量只在其所在代码块内有效
const是定义常量的,而且定义一次以后不能再进行更改，否者会报错；
使用const定义的常量，拥有let一样的特性（无声明提前，有块状作用域，重复声明）

let：* 声明的变量只在它所在的代码块有效； * 需要先声明然后再使用，否则报错
var：* 声明的变量在全局范围内都有效；

var定义的变量可以修改，如果不初始化会输出undefined，不会报错

const： * 声明一个只读的常量，一旦声明，常量的值就不允许改变；

一旦声明了变量，就必须初始化，不能留到以后赋值；
只在声明所在的块级作用域内有效；

22、如何理解JSON？

JSON是一种轻量级的数据交换格式,作用：通常用于服务端向页面传输数据。
JSON 是一个 JS 对象，有 2 个 API
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

23、函数声明和函数表达式的区别（作用域）

1.以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的.
2.以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用.
3.以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而函数表达式可以在任何地方声明.

24、关于动态路由

不能传递参数的是静态路由，可以传递参数，但是其对应的路由数量是不确定的，叫动态路由
在参数名前面加上：,然后将参数写在路由的path内
这是无参数跳转

query和params两者都可以传递参数，区别是什么？
1.query 传参配置的是path，而params传参配置的是name，在params中配置path无效
2.query在路由配置不需要设置参数，而params必须设置
3.query传递的参数会显示在地址栏中
4.params传参刷新会无效，但是query会保存传递过来的值，刷新不变

25、vue是什么？跟JS有什么区别？

vue就是一个js库，并且无依赖别的js库，跟jquery差不多。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。
区别：在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或者js来添加各种特效功能，需要去选中每一个元素进行命令，这样太繁琐了
vue的好处：1.数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染。
2.组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。
一句话概括：用数据绑定的思想，vue可以简单写单个页面，也可以写一个大的前端系统，也可以做手机app的界面。

26、Vue-CLi是啥？

它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具

27、vue是怎么渲染的？

1.原有模板语法，挂载渲染：就是对使用Vue标签语法的hmtl进行渲染。
2.使用render属性，createElement函数直接渲染：原本无html，通过JavaScript 的完全编程的能力生成页面。
3.使用render属性，配合组件的template属性，createElement函数渲染
4.使用render属性，配合单文件组件，createElement函数渲染

28、vue常用的5个事件修饰符
.stop: 阻止事件冒泡；
.prevent: 阻止默认事件；
.capture: 实现捕获触发事件的机制 ;
.self: 实现只有点击当前元素时候，才会触发事件处理函数 ;
.once: 事件只触发一次；

26、vue-router 有哪几种导航钩子？

第一种：全局导航钩子
第二种：单独路由独享钩子
第三种：组件内的钩子

29、vue-router 路由模式有几种？

Hash: 使用URL的hash值来作为路由。支持所有浏览器。
History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
Abstract：支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。

30、Vue组件通信的六种方法

1.父组件向子组件传值： props/$emit
2.子组件向父组件传值（通过事件形式） $ emit/$on
3.vuex
4.$ attrs/$ listeners
$ attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$ attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
$ listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
5.provide/inject
6.$parent / $children与 ref
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例

31、veu中的三要素

响应式：vue如何监听到 data 每个属性变化?
vue的响应式原理：Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被解除过后的数据会有两个属性：一个叫getter，一个叫setter。
getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher(可以收到属性的变化通知并执行相应的函数，从而更新视图。)监听，通知dom修改刷新。

模板引擎：vue的模板如何被解析，指令如何处理？
. 本质就是个字符串。模板最终必须转换成JS代码。因为：
. 有逻辑，如（v-if v-for）,必须用JS才能实现
. 转换为html渲染页面，必须用JS才能实现
. 因此，模板最重要转化成JS函数(render函数）

渲染：vue 的模板如何被渲染成 html?
模板解析成render函数---->返回JS模拟的虚拟DOM结构：模板是一段字符串，模板解析生成render函数，执行render函数返回为vnode，vnode表明了各个节点的层级关系、特性、样式、绑定的事件。
2、 vnode---->html：通过 updateComponent函数调用vm._update（）传入vnode，利用基于snabbdom的patch（)方法改造的生成真实DOM节点并渲染页面。

32、v-if跟v-show的区别

v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;
v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

33、在ES6中，Promise对象只有三种状态

异步操作“未完成”（pending）
异步操作“已完成”（resolved，又称fulfilled）
异步操作“失败”（rejected）

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

,不需要通过function关键字创建函数,并且可以省略return关键字.但函数体内的this对象指的是定义时所在的对象,而不是使用时所在的对象;
①不绑定this,箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
普通函数的this指向调用它的那个对象。
②箭头函数不能作为构造函数，不能使用new
③箭头函数不绑定arguments
④箭头函数通过call和apply调用，不会改变this指向，只会传入参数
⑤箭头函数没有原型属性

35、ES6有哪些新特性

1.模板字符串:模板字符串是为了解决使用+号拼接字符串的不便利而出现的

2.解析结构

函数默认参数

4.展开运算符

5.class类

收起

展开全文

前端面试题

2021年前端面试题及答案

万次阅读 多人点赞 2020-02-11 19:29:34

如何进行：如何XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行...

前端面试汇总（2020年）

一

大纲

1、前言

2、前端工程化

3、前端设计模式

4、前端安全性问题

5、前端跨域问题

6、前端数据加密

7、前端http相关问题

8、*前端基础知识点面试题

9、前端技术栈问题

前言

由于新冠肺炎疫情，现在成天呆在家里，加上也要准备面试，就在家里看面试题，看着网上一堆面试题，决定收集常见题目汇总一下。关于面试大纲，我认为每个人都是千差万别的。因为面试官都是对简历所写的项目经验进行深挖或者对你所掌握的基本技能进行考察。

前端工程化

什么是"前端工程化"？

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。

如何做"前端工程化"？

前端工程化就是为了让前端开发能够“自成体系”，个人认为主要应该从模块化、组件化、规范化、自动化四个方面思考。

前端设计模式

前端常见的设计模式主要有以下几种，具体设计模式查看这篇文章。
1. 单例模式
2. 工厂模式
3. 策略模式
4. 代理模式
5. 观察者模式
6. 模块模式
7. 构造函数模式
8. 混合模式

前端安全性问题

这个是老的话题，有的在初中级前端面试中可能不会提到。但是在高级面试的时候，你要说出前端安全性问题防御，及前端常见安全性问题的攻击原理是什么。

xss跨站脚本攻击原理？如何进行？防御手段？

如何进行：如何XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

主要原理：过于信任客户端提交的数据！

防御手段：不信任任何客户端提交的数据，只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。

CSRF跨站请求伪造原理？如何进行？防御手段？

如何进行：当你在某网页登录之后，在没有关闭网页的情况下，收到别人的链接。例如:http://127.0.0.1/dvwa/vulnerabilities/csrf/?password_new=1&password_conf=1&Change=Change#

点击链接，会利用浏览器的cookie把密码改掉。

主要原理：在没有关闭相关网页的情况下，点击其他人发来的CSRF链接，利用客户端的cookie直接向服务器发送请求。

防御手段：

检测Referer

Anti-CSRF token机制

业务上要求用户输入原始密码（简单粗暴），攻击者在不知道原始密码的情况下，无论如何都无法进行CSRF攻击。

Sql脚本注入原理？如何进行？防御手段？

如何进行：利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

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

防御手段：

使用预编译，绑定变量（推荐）。

检查数据类型。

过滤特殊字符和语句。

页面不错误回显。

web上传漏洞原理？如何进行？防御手段？

如何进行：用户上传了一个可执行的脚本文件，并通过此脚本文件获得了执行服务器端命令的能力。

主要原理：当文件上传时没有对文件的格式和上传用户做验证，导致任意用户可以上传任意文件，那么这就是一个上传漏洞。

防御手段：

1. 最有效的，将文件上传目录直接设置为不可执行，对于Linux而言，撤销其目录的'x'权限；实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理，一是方便使用缓存加速降低能耗，二是杜绝了脚本执行的可能性；
2. 文件类型检查：强烈推荐白名单方式，结合MIME Type、后缀检查等方式；此外对于图片的处理可以使用压缩函数或resize函数，处理图片的同时破坏其包含的HTML代码；
3. 使用随机数改写文件名和文件路径，使得用户不能轻易访问自己上传的文件；
4. 单独设置文件服务器的域名；

前端跨越问题

什么是跨域？

由浏览器同源策略限制的一类请求场景，当不同地址，不同端口，不同级别，不同协议就会构成跨域。

什么是同源策略？

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

如何解决跨域？能说1，2，7，8就行。

1、通过jsonp跨域

2、CORS

3、 document.domain + iframe跨域

4、 location.hash + iframe

5、 window.name + iframe跨域

6、 postMessage跨域

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

前端数据加密问题

一般如何处理用户敏感信息？

前端一般使用md5、base64加密、sha1加密，想要了解详情请自行百度。

前端http相关问题

HTTP常用状态码及其含义？

1xx：指示信息--表示请求已接收，继续处理

100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）

101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议（HTTP 1.1新）

2xx：成功--表示请求已被成功接收、理解、接受

200 OK 一切正常，对GET和POST请求的应答文档跟在后面。

201 Created 服务器已经创建了文档，Location头给出了它的URL。

202 Accepted 已经接受请求，但处理尚未完成。

203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝（HTTP 1.1新）。

204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。

205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。

206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它（HTTP 1.1新）。

3xx：重定向--要完成请求必须进行更进一步的操作

300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。

301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。

302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求http://host/~user（缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。

303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。

304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取（HTTP 1.1新）。

307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。（HTTP 1.1新）

4xx：客户端错误--请求有语法错误或请求无法实现

400 Bad Request 请求出现语法错误。

401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。

403 Forbidden 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。

404 Not Found 无法找到指定位置的资源。这也是一个常用的应答。

405 Method Not Allowed 请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用。（HTTP 1.1新）

406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容（HTTP 1.1新）。

407 Proxy Authentication Required 类似于401，表示客户必须先经过代理服务器的授权。（HTTP 1.1新）

408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。（HTTP 1.1新）

409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP 1.1新）

410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。（HTTP 1.1新）

411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头。（HTTP 1.1新）

412 Precondition Failed 请求头中指定的一些前提条件失败（HTTP 1.1新）。

413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头（HTTP 1.1新）。

414 Request URI Too Long URI太长（HTTP 1.1新）。

416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。（HTTP 1.1新）

5xx：服务器端错误--服务器未能实现合法的请求

500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。

501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求。

502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。

503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。

504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新）505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。（HTTP 1.1新）

websocket和轮询及长轮询区别

轮询如下：

客户端：啦啦啦，有没有新信息(Request)服务端：没有（Response）客户端：啦啦啦，有没有新信息(Request)服务端：没有。。（Response）客户端：啦啦啦，有没有新信息(Request)服务端：你好烦啊，没有啊。。（Response）客户端：啦啦啦，有没有新消息（Request）服务端：好啦好啦，有啦给你。（Response）客户端：啦啦啦，有没有新消息（Request）服务端：。。。。。没。。。。没。。。没有（Response） ---- loop

长轮询如下：

客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）服务端：额。。 等待到有消息的时候。。来 给你（Response）客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request） -loop

websocket如下：

websocket解决了HTTP的这几个难题。首先，被动性，当服务器完成协议升级后（HTTP->Websocket），服务端就可以主动推送信息给客户端啦。

所以上面的情景可以做如下修改。

客户端：啦啦啦，我要建立Websocket协议，需要的服务：chat，Websocket协议版本：17（HTTP Request）服务端：ok，确认，已升级为Websocket协议（HTTP Protocols Switched）客户端：麻烦你有信息的时候推送给我噢。。服务端：ok，有的时候会告诉你的。服务端：balabalabalabala服务端：balabalabalabala服务端：哈哈哈哈哈啊哈哈哈哈服务端：笑死我了哈哈哈哈哈哈哈

Http和Https的区别？

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

*前端基础知识点面试题

HTML/5、CSS/3相关

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

新特性：

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(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；
h5新标签兼容：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何区分：
DOCTYPE声明\新增的结构元素\功能元素

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

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）

可以继承的属性：

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

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

优先级：

!important > id > class > tag

important 比内联优先级高,但内联比 id 要高

CSS3新增伪类举例：

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

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

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

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

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

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

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

三、CSS3有哪些新特性？

更详细的请见：https://www.cnblogs.com/qianduantuanzhang/p/7793638.html

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

四、解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？

1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，宽度 = 边框 + padding + 内容宽度； chrom、IE9+、(添加doctype) 使用标准盒模型，宽度 = 内容宽度。
2. box-sizing : 为了解决标准黑子和IE盒子的不同，CSS3增添了盒模型属性box-sizing，content-box(默认)，border-box 让元素维持IE传统盒子模型， inherit 继承父盒子模型；
3. 边界塌陷：块元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为外边距塌陷。
4. 负值作用：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。

五、BFC（Block Formatting Context）是什么？应用？

1. BFC 就是 ‘块级格式上下文’ 的格式，创建了BFC的元素就是一个独立的盒子，不过只有BLock-level box可以参与创建BFC，它规定了内部的Bloc-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
2. 应用场景：
1. 解决margin叠加的问题
2. 用于布局（overflow: hidden）,BFC不会与浮动盒子叠加。
3. 用于清除浮动，计算BFC高度。

六、如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

七、简要说一下CSS的元素分类

块级元素：div,p,h1,form,ul,li;
行内元素 : span,a,label,input,img,strong,em;

八、解释下浮动和它的工作原理？清除浮动的方法

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

2.使用after伪对象清除浮动

　该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

#parent:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

　}

3.设置overflow为hidden或者auto

4.浮动外部元素

九、CSS隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

十、如何让一个盒子水平垂直居中

复制代码

//已知宽高<div class="div1"></div><style>
    .div1{
        width:400px;
        height:400px;
        position:absolute;
        left:50%;
        top:50% 
        margin:-200px 0 0 -200px;    }   
</style>//未知宽高<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>
        .div1{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            border: 1px solid #000;
            width: 400px;
            height: 400px;        }    </style></head><body>    <div class="div1"></div></body></html>//未知宽高方法二：<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>
        .div1{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            border: 1px solid #000;
            width: 400px;
            height: 400px;        }    </style></head><body>    <div class="div1"></div></body></html>

JS部分

1、cookie、localStorage、sessionStorage的区别和使用？

cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。   localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；
   创建和访问localStorage：
        1）、设置数据：
        var forgetData = {phone:vm.phone};        localStorage.setItem("forgetData",JSON.Stringfy(forgetData));    //forgetData是存储在localStorage里边的本地数据；JSON.Stringfy(forgetData)是将数据转化为字符串格式；
            获取数据：
        vm.forgetData=JSON.parse(localStorage.getItem("forgetData"));  //将字符串转化为JSON化；
        2）、设置：localStorage.name = "zhao";
             获取：localStorage.name    //zhao        localStorage.setItem(key,value);//设置数据        localStorage.getItem(key);//获取数据        localStorage.removeItem(key);//删除单个数据        localStorage.clear();//清除所有localStorage的数据

    sessionStorage：当用户的浏览器窗口关闭时，数据会被清除；
    
    共同点：都是保存在浏览器端，且同源的。
    区别：
        cookie数据始终在同源的http请求中携带9即使不需要)，即cookie在浏览器和服务器之间来回传递；cookie数据还有路径的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。
        sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小限制，但是要比cookie大得多，可以达到5M或者更大。
        数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；localStorage：始终有效，浏览器窗口关闭也一直保存；cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。
        作用域不同，sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；localStorage在所有的同源窗口中都是共享的；cookie也是在同源窗口中共享的，

2、如何实现浏览器多标签页之间的通信？

    调用localStorage、cookie本地存储方式。

3、JavaScript的typeof返回类型有哪些？

Object（null和Array）、number、undefined、string、Boolean、function

4、类型转换

强制转换：parseInt();parseFloat();number();

5、数组的方法

var list = [1,2,3];list.pop();//删除数组的最后一个元素 var list = [1,2];list.unshift(0,1);//头部添加  var list = [0,1,1,2,3];list.push(4,5);//尾部添加   var list = [1,2,3,4,5];var arr = list.concat(4,[5,6]);//把两个数组连接起来 //var arr = [1,2,3,4,5];  //var list = [1,2,3];list.join("-");    //1-2-3list.reverse();//3,2,1list.slice(1);//var list = [2,3];list.slice(1,2);//var list = [2];list.slice(1,-2);//设置了两个参数，终止下标为负数，当出现负数时，将负数加上数组长度的值来替换该位置的数。var arr = list.splice(0,1);//删除 var list = [2,3];  var arr = [1];可以删除任意数量的项，只需指定2个参数；要删除的第一项的位置和要删除的项数。例如splice(0,2);会删除当前数组的前两项list.splice(2,0,4,6);//插入，var list = [1,2,4,6,3]; 可以向指定位置插入任意数量的项，需要3个参数，起始位置、0（要删除的项数）、要插入的任意数量的项。例如splice(2,0,4,6);会从第二个位置插入4和6；list.splice(2,1,4,6);//替换，var list = [1,2,6,3]; 可以向指定位置插入任意数量的项，同时删除任意数量的项，需要3个参数，起始位置、要删除的项数、要插入的任意数量的项。例如splice(2,1,4,6);会从位置 2 开始插入4和6。list.sort();//按照第一个数字大小进行排序;function compare(a,b){
    return a-b;//正序；
    return b-a;//倒序；}list.sort(compare);

6、ajax请求时get和post的区别？

get：从服务器上获取数据，传送数据量小，安全性低，请求会被缓存，缓存是针对URL进行缓存的，get请求参数直接加在URL地址后面，一种参数组合就会产生一种URL的缓存，重复的请求结果是相同的；post：向服务器发送数据；传送数据量大，请求不会被缓存，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全，所以涉及用户隐私的数据都要用post传送；

7、ajax请求时，如何解释json数据？

使用eval方法解析的时候，eval();不会去判断该字符串是否合法，而且json对象里的js方法也会被执行，这是非常危险的；推荐使用JSON.parse(); JSON.parse();把字符串转化成json。

8、call和apply的区别？

共同点：
    都可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
    另一种说法，都能够改变方法的执行上下文（执行环境），将一个对象的方法交给另一个对象来执行，并且是立即执行。
不同点：
    apply();//最多只能有两个参数--新this对象和一个数组argArray，如果给该方法传递多个参数，则把参数都写进这个数组里边，当然，即使只有一个参数，也要写进数组里边。
    call();//可以接收多个参数，第一个参数apply()一样，后面则是一串参数列表。
    实际上，apply和call的功能是一样的，只是传入的参数列表的形式不同。

9、http常用状态码？

    100  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息    200  OK   正常返回信息    201  Created  请求成功并且服务器创建了新的资源    202  Accepted  服务器已接受请求，但尚未处理    301  Moved Permanently  请求的网页已永久移动到新位置。    302 Found  临时性重定向。    303 See Other  临时性重定向，且总是使用 GET 请求新的 URI。    304  Not Modified  自从上次请求后，请求的网页未修改过。    400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。    401 Unauthorized  请求未授权。    403 Forbidden  禁止访问。    404 Not Found  找不到如何与 URI 相匹配的资源。    500 Internal Server Error  最常见的服务器端错误。    503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

10.你有哪些性能优化的方法？

    （详情请看雅虎14条性能优化原则）。

      （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

      （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

      （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

      （4） 当需要设置的样式很多时设置className而不是直接操作style。

      （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

      （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

      （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

11.深拷贝和浅拷贝

    基本类型指的是简单的数据段，引用类型指的是多个值构成的对象；    var name = "John"; // 基本类型值

    var obj = new Object(); 
    obj.name = "John"; 
    // obj 为引用类型值
    
    在复制变量中，对于基本类型来说，两者互不影响，    var num = 1;    var num1 = num; // num1 = 1;

    var num1 = 3; // num还是1,不会变
    
    浅拷贝和深拷贝的区别：
    对于浅拷贝来说，对于一个数组（数组是一个对象），只要我们修改了一个拷贝数组，原数组也会跟着改变。
    因为他们引用的是同一个地址的数据，拷贝的时候并没有给b数组创造独立的内存，只是把a数组指向数据的指针拷贝给了b；
    而深拷贝就与其相反，将会给b数组创造独立的内存，并且将a数组的内容一一拷贝进来，两者互不影响。
    
    实现深拷贝：
    一：层级拷贝，用递归实现；
    二：JSON解析        var b = JSON.parse(JSON.stringify(a));

其他

一、怎么让Chrome支持小于12px 的文字？

这个我们在做移动端的时候，设计师图片上的文字假如是10px，我们实现在网页上之后。往往设计师回来找我们，这个字体能小一些吗？我设计的是10px？为啥是12px?其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？

我们的做法是：

针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！

<style>pspan{font-size:10px;-webkit-transform:scale(0.8);display:block;}</style><p><span>haorooms博客测试10px</span></p>

二、IOS手机浏览器字体齿轮

修改-webkit-font-smoothing属性，结果是：-webkit-font-smoothing:none:无抗锯齿-webkit-font-smoothing: antialiased | subpixel-antialiased |default:灰度平滑

三、如何修改chrome记住密码后自动填充表单的黄色背景？

大体可以通过input : -webkit-autofill来进行修改！

input:-webkit-autofill {background-color:#FAFFBD;background-image: none;color:#000;}

四、谷歌浏览器运行下面代码，并解释！

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

运行上面代码之后，会发现HTML层都被使用不同的颜色添加了一个高亮的边框。为什么会这样呢？

首先我们来看

[].forEach.call()，关于call()和apply()，我前面有文章也写过，具体可以看http://www.haorooms.com/post/js_constructor_pro

[].forEach.call()等价于Array.prototype.forEach.call()

其次我们来看$$("*")

你可以在你的Chrome浏览器控制台中输入$$('a')，然后你就能得到一个当前页面中所有锚元素的列表。

$$函数是许多现代浏览器命令行API中的一个部分，它等价于document.querySelectorAll,你可以将一个CSS选择器作为这个函数的参数，然后你就能够获得当前页面中所有匹配这个CSS选择器的元素列表。如果你在浏览器控制台以外的地方，你可以使用document.querySelectorAll('')来代替$$('')

为元素添加颜色

为了让元素都有一个漂亮的边框，我们在上面的代码中使用了CSS属性outline。outline属性位于CSS盒模型之外，因此它并不影响元素的属性或者元素在布局中的位置，这对于我们来说非常有用。这个属性和修改border属性非常类似，因此下面的代码应该不会很难理解：

a.style.outline="1px solid #"+ color

真正有趣的地方在于定义颜色部分：

（~~(Math.random()*(1<<24))).toString(16)

~~的作用相当于parseInt，和我前面讲解的“|”功能类似，关于运算符“I” ，可以去看看！

通过上面代码可以获取到一个随机的颜色值！

五、input [type=search] 搜索框右侧小图标如何美化？

美化效果如下图：

enter image description here

右侧默认的比较难看的按钮，美化成右侧效果。

input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;height:15px;width:15px;border-radius:8px;background:url("images/searchicon.png")no-repeat 00;background-size:15px15px;}

用到的是伪元素::-webkit-search-cancel-button，关于什么是伪类和为元素，请看：http://www.haorooms.com/post/css_wl_wys

六、iOS safari 如何阻止“橡皮筋效果”？

可以参考一下知乎上的回答 https://www.zhihu.com/question/22256539 。

但是，我们遇到的问题不是这样，我是要解决弹跳导致弹出层（position:absolute）的覆盖层高度小于100%;

针对这个问题，我想到的解决方案如下：

方法一：把position:absolute改成position:fixed，并在弹出层之后，设置body的高度是100%；overflow是hidden。

方法二：

思路是获取苹果浏览器导航栏的高度。然后滚动的时候，重新获取其高度。在导航栏高度变小的时候，给弹出层增加高度的百分比！

代码如下：

//ios safari 伸缩判断var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
        $(window).scroll(function(){if(agent.indexOf("iPhone")!=-1|| agent.indexOf("iPad")!=-1){var topbarHeightNow=window.outerHeight-window.innerHeight;if(topbarHeightNow<topbarHeight){
                    globleflag=false//此处写处理逻辑}else{
                 globleflag=true//此处写处理逻辑}}});

七、实现点击文字，文字后面radio选中效果

这个效果是前端很经常用到和遇到的效果了，实现这个效果的方式也很多，很多朋友用js和jquery来实现，但是最简单的，我们可以直接用lable标签的 for 属性来实现。

看下下面例子：

<form><labelfor="male">Male</label><inputtype="radio"name="sex"id="male"/><br/><labelfor="female">Female</label><inputtype="radio"name="sex"id="female"/></form>

label 的for属性后面跟着input的id,就可以点击label，来触发input效果了，大家可以试一试！

八、网站中，图片文件（jpg，png,gif），如何点击下载？而非点击预览？

我们平时在网站中的图片，假如我们要下载，如下写：

<ahref="haorooms博客.jpg">下载</a>

我们点击下载按钮，只会预览“haorooms博客.jpg”这张图片，并不会出现下载框，另存为那种？那么我们如何做呢？

我们只需要如下写

<ahref="haorooms博客.jpg"download>下载</a>

就可以下载了。点击如下进行尝试吧！下载

不但如次，我们还可以指定文件名称，如下写法：

<ahref="haorooms博客.jpg"download="haoroom前端博客图片下载">下载</a>

测试如下：下载

上面就是指定下载的写法！

九、Math.min()比Math.max()大

Math.min()<Math.max()// falseMath.min()>Math.max()// true

因为Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。

前端技术栈问题

vue相关问题？

更多前端技能请关注公众号”极致简文“

▼

往期精彩回顾

▼

React组件与生命周期

React函数组件和Class组件以及Hooks

2020年最火爆的Vue.js面试题

Redux使用之我要买个女朋友（入门篇）

收起

展开全文

js 前端面试题

前端面试题
万次阅读 多人点赞 2019-08-08 11:49:01
iframe的优缺点？ 75 请你谈谈Cookie的弊端？ 75 js延迟加载的方式有哪些？ 76 documen.write和 innerHTML 的区别？ 76 哪些操作会造成内存泄漏？ 76 判断一个字符串中出现次数最多的字符，统计这个次数 ...
收起
前端面试题
使用display:inline-block；属性转化的行内块的缺点及解决方法
2021-02-22 20:02:06
属性转化的行内块的缺点及解决方法缺点多个相邻行内块之间有间隙（空隙产生的原因：当元素有行内元素的特性时，元素间的空白符都会被解析，回车换行会被解析成一个空白符，如果字体不为零那么就会占一定的宽度，...
收起
html css
测试开发笔记
万次阅读 多人点赞 2019-11-14 17:11:58
内部测试测试阶段测试对象测试方法测试目的经济价值优点缺点必要性资源系统测试 system testing（ST）整个系统（整个产品）黑盒测试验证产品是否符合需求规格说明书能够保证产品以较高的的质量尽早的...
收起
测试开发
iframe标签的使用及优缺点
千次阅读 2019-03-11 15:59:35
1、 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 2、优点缺点优点：1、支持任何浏览器 2、原封不动的把嵌入的网页展现出来 3、重载页面时不需要重载整个页面，只需要重载页面中的一个框架页...
收起
CSS 行内样式
千次阅读 2020-08-26 09:47:13
我们会依次学习这三种方式的优缺点以及应用场景，本节我们先来讲一下行内样式。什么是行内样式行内样式，其实从它的名字就可以看出来它的特点，就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面...
收起
css
CSS行内样式
千次阅读 2020-12-22 15:55:32
缺点：需要引入主要讲讲行内样式三、操作行内样式; CSS的很多属性都时有复合名的，使用连字符“-”，如border-right 、margin-left等，但在脚本中（js代码）连字符会被定义为减号，会自动参数表达式的运算；解决...
收起
css
HTML label标签介绍
万次阅读 多人点赞 2017-06-03 15:03:14
label标签介绍label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。label标签和特定表单...
收起
html label
行内元素块元素行内块元素及其属性
千次阅读 2017-04-24 18:45:33
缺点是添加了无用的标签元素； .clear{ clear:both; height:0px; font-size: 1px; line-height: 0px;overflow:hidden; }/* 清除浮动*/ 2：给父元素添加伪类并给样式（.fix应用在包含浮动子元素的父元素上...
收起
干货来袭！CSS的行内样式与内联样式，看完就会了
2020-12-21 17:11:55
行内样式，其实从它的名字就可以看出来它的特点，就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面这样的： 行内样式 HTML 中的 style 属性提供了...
收起
css css3 前端
行内元素和块元素以及行内块元素的特点
2019-04-17 09:37:23
块级元素有以下几个特点：总是另起一行（特立独行）可以设置其宽度、高度，内外边距在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）可以容纳行内元素和其他块元素。常见的块级元素有：<div>...
收起
css引入样式-行内样式、内嵌样式和外链样式
千次阅读 2020-09-09 15:39:17
css初识及引入样式概念：css通常称为css样式表或层叠样式表作用： ... 引入css样式表的三种方式： ...概念：称行内样式、行间样式，是通过标签的style属性来设置元素的样式基础语法<标签名 style="属
收起
css
CSS行内块级元素布局与定位
千次阅读 2019-04-28 15:17:05
1.行内块级元素布局上一节里面我们讲到了float浮动布局以及它的一些使用方法，在这一节里会将到行内块级元素布局的方法。 html的元素最开始是只有行内...这样的布局方式时至今日依然有不少的使用场景，但它的缺点...
收起
前端 web 互联网零基础学习
各种css文字样式效果——多个行内元素居中，三点，缩进，阴影等
2019-03-27 21:34:51
前端基础知识——css样式...分两种行内元素：span是div子元素，文本位于span标签内 (1).span{display: inline-block;vertical-align: middle;line-height: height;} (2).div{display: table-cell;width: 200px;bord...
收起
前端基础知识 css
javascript优缺点
千次阅读 2017-06-27 11:12:08
Dojo 包括 Ajax、Browser、Event、Widget 等跨浏览器 API，包括了 JS 本身的语言扩展，以及各个方面的工具类库，和比较完善的 UI 组件库，也被广泛应用在很多项目中，他的 UI 组件的特点是通过给 HTML 标签增加 TAG ...
收起
javascript
HTML 行内元素与块级元素
2018-04-23 17:21:57
目录 1.HTML 行内元素与块级元素 2.常用的 display 值 3.行内元素和块级元素盒模型区别 4....一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和...
收起
css的三种样式分析之优缺点
千次阅读 2019-06-08 17:12:44
行内样式:—直接将样式属性写在开始标签style属性中 <div style="属性名称:属性值;属性名称:属性值;"> 缺点:1.结构样式没有分离不利于后期维护 2.样式不能重复使用(推荐不使用) </div> 内嵌样式–...
收起
css
CSS三种样式表：行内样式表、内部样式表、外部样式表
2021-04-08 21:35:10
目录 ...内嵌式：将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值..
收起
内部样式表 css
iframe标签使用及优劣
2020-01-19 12:49:12
iframe 创建包含另外一个文档的内联框架(即行内框架)，简而言之，iframe标签是框架的一种形式，一般用来包含别的页面。一、使用iframe的优缺点优点: 1.iframe能够把嵌入的网页原样展现出来； 2.模块分离，...
收起
0008 CSS初识（行内式、内部样式表、外部样式表）
2019-12-01 18:45:39
typora-copy-images-to: media ...通过样式规则给标签添加简单的样式 1.HTML的局限性说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义，比如表明这是一个大标题，用表明这是一个段落，用表明这...
收起
CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关...
千次阅读 2020-08-25 15:19:23
…之类的标签使用方式：直接输入标签名类（class）：class名字使用方式：输入点+class名 ID: ID名使用方式：输入#+id名一般来说我们写CSS文件的时候用的都是第二种方法，class名这是因为ID名一般被用作JS的...
收起
css html
CSS的引入方式----行内式、嵌入式、链接式
2021-03-14 21:57:20
CSS的引入方式按照CSS样式书写的位置（或引入的方式），CSS样式表可以分为三大类 1、行内样式表（行内式） ...优缺点：代码结构清晰，但没有实现结构与样式完全分离二、行内样式表（行内式）是在
收起
css css3
清除浮动常用的四种方法及优缺点
2021-03-12 15:32:50
缺点：*添加许多无意义的标签，结构化比较差。 2.父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。但是必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动...
收起
css javascript css3
css之 11.12.13.14. css引入方式之行内式、内嵌式、外链式和导入式
千次阅读 2019-04-12 18:41:14
缺点：比较杂，比较乱且没法公用。 css引入方式之行内式语法：写在开始标签里面打一个空格隔开 style=“声明;声明;…” 例如： <div style="background-color: black;color: aliceblue"&g...
收起
css引入方式
css text-align属性，行内元素，块级元素居中详解
2021-09-12 21:39:40
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式，例如：如果需要设置图片的对齐方式，需要设置图片的父元素的text-align属性...给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中
收起
css html5 html
第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单
2016-12-31 07:22:13
cs结构的软件的缺点：更新的时候需要用户下载更新包然后再安装，程序员则需要开发客户端与服务端。 cs结构软件的优点：减轻服务端的压力，而且可以大量保存数据在客户端。 B/S（Browser Server）结构的软件...
收起
html 框架图片表单

行内标签和块标签有哪些以及都有什么特点

块标签

关于li标签行内显示的问题

前端面试题（持续更新中）

2021年前端面试题及答案

前言

前端工程化

如何做"前端工程化"？

前端设计模式

前端安全性问题

xss跨站脚本攻击原理？如何进行？防御手段？

CSRF跨站请求伪造原理？如何进行？防御手段？

Sql脚本注入原理？如何进行？防御手段？

web上传漏洞原理？如何进行？防御手段？

前端跨越问题

什么是跨域？

什么是同源策略？

如何解决跨域？ 能说1，2，7，8就行。

前端数据加密问题

一般如何处理用户敏感信息？

前端http相关问题

HTTP常用状态码及其含义？

websocket和轮询及长轮询区别

Http和Https的区别？

*前端基础知识点面试题

HTML/5、CSS/3相关

JS部分

其他

一、怎么让Chrome支持小于12px 的文字？

二、IOS手机浏览器字体齿轮

三、如何修改chrome记住密码后自动填充表单的黄色背景？

四、谷歌浏览器运行下面代码，并解释！

首先我们来看

其次我们来看$$("*")

为元素添加颜色

五、input [type=search] 搜索框右侧小图标如何美化？

六、iOS safari 如何阻止“橡皮筋效果”？

七、实现点击文字，文字后面radio选中效果

八、网站中，图片文件（jpg，png,gif），如何点击下载？而非点击预览？

九、Math.min()比Math.max()大

vue相关问题？

前端面试题

使用display:inline-block；属性转化的行内块的缺点及解决方法

测试开发笔记

iframe标签的使用及优缺点

CSS 行内样式

CSS行内样式

HTML label标签介绍

行内元素 块元素 行内块元素 及其属性

干货来袭！CSS的行内样式与内联样式，看完就会了

行内元素和块元素以及行内块元素的特点

css引入样式-行内样式、内嵌样式和外链样式

CSS行内块级元素布局与定位

各种css文字样式效果——多个行内元素居中，三点，缩进，阴影等

javascript优缺点

HTML 行内元素 与 块级元素

css的三种样式分析之优缺点

CSS三种样式表：行内样式表、内部样式表、外部样式表

iframe标签使用及优劣

0008 CSS初识（行内式、内部样式表、外部样式表）

CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关...

CSS的引入方式----行内式、嵌入式、链接式

清除浮动常用的四种方法及优缺点

css之 11.12.13.14. css引入方式之行内式、内嵌式、外链式和导入式

css text-align属性，行内元素，块级元素居中详解

第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单

缺点行内标签

`块标签`

如何解决跨域？能说1，2，7，8就行。

行内元素块元素行内块元素及其属性

HTML 行内元素与块级元素