每天20道前端面试题（一）

1.CSS选择器的优先级排序，怎么计算权值？

1.选择器：
如何选择标签（同样的选择器后写的生效）

2.选择器的分类：
*：通配符选择所有标签

标签名选择器：直接选择标签名

类名选择器：.+类名
(标签可以有多个类名，用空格隔开，但不能书写多个class属性，只能有一个class属性)

交集选择器：.one.two（class=“one two”）
p.one ，.one.two为one和two

id选择器：#id（id=“one”）
//取id类似于身份证（权重很高）

并集选择器：用逗号隔开
【如果样式都一样，可以用并集选择器，选择器不叠加，只单独计算】

后代选择器：只要被包裹的都是后代 用空格 div p
子代选择器：第一级包裹的 用>
div a{选择所有的a}
div>a{选择子代的a}
div>h4>a{选择h4中的a}

*{	
	margin：0;
 	padding：0;
 	list-style：noen；
/*选择所有的标签，一般用来清除默认样式*/
}

3.选择器的权重可以叠加：
1个标签名是1g，一个类名是1kg，一个id是1吨
选择器权重：*<标签名<类名<id名<行内样式（style=“color:red”）< ! important（提升的只是一个单一的样式的权重，不是整个选择器的权重）【id以后的都不推荐使用】

2.CSS的继承选择器，.one. two和.one > .two的区别？两个同级类选择器连着一起写有什么作用？(权值相加)

1.区别：

<!--(1)--> 
<div class="one two"></div>；
<!--无法匹配：<div class="ul"></div> 和 <div class="item"></div>；-->

<!--(2)-->
<div class="one">
	<div class="two">中间的 div</div>
</div>
<!--无法匹配：
<div class="one">
	<div class="abcabc">
		<div class="two"></div>
	</div>
</div>。
--> 

两个的区别是：
(1) .one.two 匹配 class 属性同时含有 one 和 two的元素；
(2).one> .two 匹配 class 属性包含 one 的父元素 且 子元素中 class 属性包含 two 的元素（二者是父元素与子元素的关系，在相邻的层)

2.作用：增加了权重，提高了选择器的优先级（没找到具体答案）

3.CSS的引用方式有哪些？它们的区别？

1.css书写方式：
（1）嵌入样式：< style></ style>
（2）行内样式（内联样式）：< p style=“color:red”></ p>
（3）外联样式：
① < link rel=“stylesheet” href=" "> (link+tab)
②import

同为外部样式的链接方式，link和import之间的不同不仅是载入链接的语法不同：

（1）本质上link是HTML标签，是HTML的写法，但是import是CSS的提供的一种链接方式。所以link能够引入除css以外的其它文件，而import只能引入css文件。

（2）link是没有兼容问题的，但是import在IE5以下不支持。

（3）加载顺序上也不一样，link是HTML结构和CSS样式同时加载，而import是先加载HTML后加载CSS。有时候网速比较慢，你就会看到只有文字和边框的难看页面，然后才看到比较好看的页面，就是因为这个网页使用import链接的样式。

（4）在用js控制dom修改样式的时候，link可以被修改，但是import不可以。

2.区别：
具体参考： CSS引入方式有哪些，区别是什么？

4.如何解决页面内容加载缓慢的问题？

（1）减少HTTP请求
例：使用CSS Sprites（精灵图片）、字体图标、合并脚本和样式表（自己权衡利弊）；
（2）使用CDN
CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容
（3）添加Expires头
页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTTP请求，从而提高加载速度。
（4）压缩组件
（5）将样式表放在头部
将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。
（6）将脚本放在底部
跟样式表相同，脚本放在底部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现。
（7）避免CSS表达式
（8）使用外部的JavaScript和CSS
内联脚本或者样式可以减少HTTP请求，按理来说可以提高页面加载的速度。然而在实际情况中，当脚本或者样式是从外部引入的文件，浏览器就有可能缓存它们，从而在以后加载的时候能够直接使用缓存，而HTML文档的大小减小，从而提高加载速度。
（9）减少DNS查找
（10）精简JavaScript
（11）避免重定向
（12）删除重复脚本
（13）配置ETag
（14）使Ajax可缓存

具体参考：
Web前端性能优化——如何提高页面加载速度

5.是否熟悉使用开发者工具？有没有使用过断点调试？

答：（肯定答有啦，然后列举一下）；断点调试参考：js断点调试心得

6.说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？

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

具体参考：cookie、sessionStorage和localStorage的区别

7.vue生命周期的理解

Vue有一个完整的生命周期，是指从开始创建，初始化数据，编译模板，挂载dom，渲染更新，销毁一系列过程，我们称这是vue的生命周期。通俗的讲：vue的实例从创建到销毁的过程就是vue的生命周期，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会

具体参考：vue生命周期的理解

8.v-if和v-show的作用相似，它们的区别？

1.区别：
①v-if是真正的条件渲染，当条件为true时，元素被渲染，为false时元素被销毁。切换开销比较大；
②v-show不管为true还是false，元素都被渲染，是利用css属性display来控制元素的显示和隐藏，当为true时，display的值为block，为false时，dispaly的值为none。初始渲染开销比较大

2.最佳使用情况：
①当元素需要频繁切换显隐时，应该使用v-show；
②当元素极少切换显隐时，应该使用v-if

具体参考：vue中v-if和v-show的相同点和区别

9.display：none和visibility：hidden的区别？

（1）是否占据空间
display:none，该元素不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）。
visibility:hidden，该元素空间依旧存在。
即一个（display:none）不会在渲染树中出现，一个（visibility :hidden）会。

（2）是否渲染
display:none，会触发reflow（回流），进行渲染。
visibility:hidden，只会触发repaint（重绘），因为没有发现位置变化，不进行渲染。

（3）是否是继承属性
display:none，display不是继承属性，元素及其子元素都会消失。
visibility:hidden，visibility是继承属性，若子元素使用了visibility:visible，则不继承，这个子孙元素又会显现出来。

（4）读屏器是否读取
读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。

具体参考：
display:none和visibility:hidden的区别

10.link和@import的区别？

（1）link属于HTML标签，而 @import 是CSS中提供的。
（2）在页面加载的时候，link会同时被加载，而 @import 引用的CSS会在页面加载完成后才会加载引用的CSS。
（3）@import 只有在IE5以上才可以被识别，而link是HTML标签，不存在浏览器兼容性问题。
（4）link引入样式的权重大于 @import 的引用（@import是将引用的样式导入当前的页面中）

具体参考：CSS中link和@import的区别是？

11.null和undefined的区别？

1、undefined
　表示"缺少值"，就是此处应该有一个值，但是还没有定义
　典型用法是：
　　（1）变量被声明了，但没有赋值时，就等于undefined。
　　（2）调用函数时，应该提供的参数没有提供，该参数等于undefined。
　　（3）对象没有赋值的属性，该属性的值为undefined。
　　（4）函数没有返回值时，默认返回undefined。

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

具体参考：null 和undefined 的区别

12.css有哪些选择符？可继承的属性有哪些？css3新增的伪元素有哪些？css优先级的计算

（1）CSS 选择符有以下这些：
①id选择器（# myid）
②类选择器（.myclassname）
③标签选择器（div、h1、p）
④相邻选择器（h1 + p）
⑤子选择器（ul > li）
⑥后代选择器（li a）
⑦通配符选择器（ * ）
⑧属性选择器（a[rel = “external”]）
⑨伪类选择器（a: hover, li: nth - child）

（2）哪些属性可以继承：
①可继承：
font-size
font-family
color,
UL LI
DL DD DT;
②不可继承 ：
border
padding
margin
width
height ;

（3）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 单选框或复选框被选中。

（4）优先级算法如何计算：
优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准。
优先级为：

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

行内元素(< p style=" ">< /p>)>id选择器>类选择器/属性选择器>标签选择器

具体参考：
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 3新增伪类有哪些？

13.浏览器如何实现不同标签页的通信？

方法一：
localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。

方法二：
使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息

具体参考：如何实现浏览器内多个标签页之间的通信？

14.iframe的优缺点？

（1）iframe的优点：
①iframe能够原封不动地把嵌入的网页展现出来。
②如果有多个网页调用iframe，只需要修改iframe的内容，相当于模块化
③网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用性。
④如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决。相当于异步加载
⑤重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)

（2)iframe的缺点：
①会产生很多页面，不容易管理。
②在几个框架中都出现上下、左右滚动条时，这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。
③使用框架结构时，必须保证正确设置所有的导航链接，否则会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下会导致链接死循环。
④很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
⑤iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
⑥iframe 会阻塞主页面的Onload事件。
⑦即使内容为空，加载也需要时间

Iframes 阻塞页面加载：
①及时触发 window 的 onload 事件是非常重要的。 onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。
②window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。 在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。
③现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。

具体参考：iframe的优缺点

15.js 的继承实现方式有哪些，列举两个例子？

具体参考：JS继承的6种方式

16.eval是什么？

（1）eval是什么？（解析器）
eval是一个函数，看本质function eval() { [native code] }
（2）eval()的作用：
把字符串参数解析成JS代码并运行，并返回执行的结果；

具体参考：Web前端面试指导 三十七 eval是做什么的

17.GET和POST的区别？何时使用POST？

（1）区别：
① get是从服务器上获取数据，post是向服务器传送数据。

② get是将参数数据加到URL中，用户可以看到。post是将内容放置在http请求信息体内传送，用户看不到这个过程。

③ 对于get方法，服务器端是用Request.QueryString获取变量的值，对于post方法，服务器端用Request.Form获取提交的数据。

④ get传送的数据量较小，不能大于2kb。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80kb，IIS5中为100kb。

⑤ get安全性非常低，post安全性较高。但是执行效率却比post方法好。

（2）何时使用POST：
仅用于POST请求 在以下情况只能用POST请求（1.无法使用缓存文件；2.向服务器发送大量数据；3.发送包含未知字符的用户输入时，post比get更稳定也更可靠）

（3)何时使用GET:
建议使用get方法的情况：1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

具体参考：get 和 post的区别，何时使用post？

18.用什么会导致内存泄漏？

(1)什么是内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

(2)哪些操作会导致内存泄漏？
① setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
② 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

19.fixed和absolute的区别？

（1）fixed和absolute
fixed:固定定位
absolute:绝对定位

（2）区别：
① 没有滚动条的情况下没有差异；

② 在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动

具体参考：CSS中fixed和absolute区别

20.js深度克隆的代码实现？

浅度克隆：原始类型为值传递，对象类型仍为引用传递。

深度克隆：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。

具体参考：JS深度克隆代码实现