初级前端面试常考题总结（持续记录中........）

1.H5和CSS3新特性

   #H5新特性

• 语义化标签：header、footer、section、nav、article
• 增强型表单：input的type，如email、range、number、search、url、date等
• 新增表单属性：placeholder、required、min和max
• 音频视频：audio、video
• 地理地位
• 拖拽
• 本地存储：localStorag-没有时间限制的数据存储；sessionStorage-针对一个session的数据存存储，当用户关闭浏览器窗口后，数据会被删除
• 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
• WebSocket:单个TCP连接上进行全双工通讯的协议

   #CSS3新特性

• 过渡：transition; 动画：animation; 2D/3D形状转换：transform
• 选择器：:last-child, :first-child, :nth-child(1) , :disabled, :checked,伪类和伪元素等
• 背景：background-size:规定背景图片的尺寸；baclground-origin:规定背景图片的定位区域
• 边框：border-radius：圆角；box-shadow/text-shadow：阴影；border-image:边框图片
• 文本效果：text-shadow:向文本添加阴影；text-overflow:规定当文本溢出包含元素发生的事情；text-decoration:文本修饰符-overline、line-through、underline分别是上划线、中划线、下划线  等其他属性自行查阅
• 多列布局
• 弹性布局:display:flex
• 栅格布局
• 盒模型定义：box-sizing:content-box(默认）/border-box/inherit
• 滤镜：filter
• 媒体查询

2.作用域与作用域链的概念

   #作用域

    作用域分为全局作用域与函数作用域（块级作用域）：全局作用域表示该代码在程序的任何地方都能访问，window对象的内置属性都拥有全局作用域。但是函数作用域在固定的代码片段才能被访问。作用域的最大用处是隔离变量，不同作用域下同名变量不会有冲突。

   #作用域链

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

3.闭包

     闭包就是能够访问另外一个函数作用域的变量的函数。由于在JavaScript语言中只有函数内部的子函数才能读取局部变量，清晰的讲闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量。 所以本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另外一个就是让这些变量的值始终保存在内存中。

     使用闭包的注意点：1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存的泄露。解决方法时，在退出函数之前，将不使用的局部变量全部删除。2.闭包会在父函数外部，改变父函数内部变量的值，所以，如果你把父函数当做对象使用，把闭包单做它的公用方法，把内部变量当做它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值

4.原型与原型链的概念

    #原型

• 概念： 在构造函数创建出来之后，系统会默认的帮构造函数创建并关联一个神秘的对象，这个对象就是原型。
• 原型默认是一个空对象
• 原型的作用：原型中的属性和方法，可以被该构造函数创建出来的对象使用

   #原型链

• 完整的原型链结构图

• 原型链的概念：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如让我们原型等于另一个类型的实例，显然，此刻的原型对象将包含指向另一个原型的指针，相应的，另一个原型中也包含着一个指向另一个构造函数的指针，假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条，这就是所谓的原型链的基本能概念

5.ES6新特性

• 新增let,const:注意let和const与var的区别。1.let和const不会对变量进行变量提升 2.let和const声明形成块级作用域 3.同一作用域下let和const不能声明同名变量，而var可以  4.let会形成暂时性死区 5.const一旦声明必须赋值，不能使用null占位  6.const声明后不能再修改 ,但是const定义的对象属性是可以改变的，原因是对象是引用类型，const定义的引用类型只要指针不发生改变，其它的不论如何改变都是允许的
• 箭头函数
• 展开运算符
• 解构赋值
• 新增四个数组API： map(映射）,reduce（汇总）,filter(过滤）,forEach（循环）
• 字符串匹配startwith,endwith
• 字符串模板 ${ }
• promise
• generator 认识生成器

6.seo搜索引擎优化

• 减少http请求，使用精灵图
• 不滥用闭包，会加深作用域链，增加变量的查找时间
• css样式压缩（gzip），图片懒加载，模块懒加载
• DNS解析优化
• CDN外部网页加载服务器

7.如何让一个盒子上下居中

• 弹性布局：align-items:center(纵轴居中）， justify-content:center(主轴居中）
• 定位（推荐）：父 position:relative,子 position: absolute ,top:50% left 50%,回退盒子一半的距离：margin-top:-50px;margin-left:-50px
• transform:translate(-50%,-50%)      translate()函数是css3的新特性，在不知道自身宽高的情况下，可以利用它来进行水平垂直居中

8.浏览器的缓存机制

考察cookie,sessionStorage,localStorage的区别和用法

共同特点：用于浏览器端存储的缓存数据

1. cookie:限制大小为4kb,主要用途有保存登录信息，比如登录网址时可以看到“记住密码”选项，这通常就是通过cookie中存入一段用来辨别用户身份的数据来实现。当设置了cookie后，数据会发送到服务器端，造成一定宽带的浪费。cookie过期时间之前一直有效，即使关闭窗口或浏览器。cookie和localStorage是在同源窗口中共享的。cookie有效时间默认为-1，如果不进行设置的话，就会默认在浏览器会话关闭时结束。可以通过setMaxAge()方法设置cookie的生命周期。当setMaxAge(0)表示立刻删除该浏览器上指定的cookie
2. localStorage:存储大小可达5M,是HTML5标准中新加入的技术，它并不是划时代的新东西，早在IE6时代，就有一个叫userData的东西用于本地存储，但是考虑到浏览器的兼容性，更通用的方案是使用Flash.而如今，localStorage被大多数浏览器支持，如果你的网站需要支持IE6+，那么使用userData作为你的polyfill(向下兼容浏览器）的方案是种不错的选择。localStorage数据存储永久有效，除非手动删除
3. sessionStorage:存储大小可达5M，是一个前端的概念，它可以将一部分数据在当前的会话中保存下来，刷新数据依旧存在，但当页面关闭后，sessionStorage中的数据就会被清空。sessionStorage仅在关闭浏览器之前有效。sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面

原文：https://www.cnblogs.com/rongwang/p/13520047.html