前端面试题总结

html/css
移动端兼容问题
IOS移动端click事件300ms的延迟响应
解决：
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题
h5底部输入框被键盘遮挡问题
解决
方案一
让dom元素出现在可见视图的顶部或底部
document.querySelector(’#inputId’).scrollIntoView();
只要在input的点击事件，或者获取焦点的事件中，加入这个api就好了
方案二

var oHeight = $(document).height(); //浏览器当前的高度
	   
	   $(window).resize(function(){

    if($(document).height() < oHeight){
     
    $("#footer").css("position","static");
}else{
     
    $("#footer").css("position","absolute");
}
    
 });

怎样适配手机端页面
动态设置rem
设置mate标签
px、em、rem三者的联系与区别
Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。

rem也表示相对尺寸，其参考对象为根元素的font-size，因此只需要确定这一个font-size。

刘海屏
第一步：在html页面中配置，配置meta-data，此属性不仅可以针对Application生效，也可以对Activity配置生效，如下图所示：

第二步：通过增加上面适配方案提到的配置（meta-data或者是Flag），java代码中检测机型，如下图所示：

第三步：我们在全屏的页面，需要单独开启支持刘海屏。而 Google 提供的适配方案，可以设置是否在全屏模式下，使用刘海屏的区域。

在全屏模式下，我们需要有办法获取到刘海屏凹槽的高度，才可以做到设计和布局的时候，留出安全距离。

google从Android P开始为刘海屏提供支持，目前提供了一个类和三种模式: 一个类指的是可以用DisplayCutout这个类找出刘海(cutout)的位置和形状，调用**getDisplayCutout()**这个方法可以获取刘海(cutout)的位置和区域。

阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
怎样让元素在容器中垂直居中
用弹性盒设置
css3新增标签
transparent 控制透明度（这个可以实现三角形）
颜色的表示方法
盒子模型
边框属性
背景属性(默认情况下，背景颜色是从padding开始排放)
文本属性
es6新增特性
类
模块化
箭头函数
函数参数默认值
模板字符串
解构赋值
延展操作符
对象属性简写
Promise
Let与Const
js
数组中插入元素有几种方法
push（）
pop（）
unshift（）
判断数组是否包含某个元素
indexOf没有返回-1；有返回0
闭包
当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。
闭包可以读取函数内部的变量，还有就是让这些变量的值始终保持在内存中，不会在调用后被自动清除。

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

下面是一道练习题：

var name = "The Window";

　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};

　　alert(object.getNameFunc()());

事件传播流程
事件捕获阶段： 从外向里查找元素
目标阶段：从当前事件源本身的操作
事件冒泡阶段：从内到外依次触发相关的行为（最常用的就是冒泡阶段）
web性能优化
减少重复代码，压缩css，js代码大小；
减少http请求，合理设置缓存；
图片懒加载（lazyout images）；
精灵图；
js中减少DOM操作，避免使用eval和 Function，减少作用域链查找（尽量把变量设为局部变量）；