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,减少作用域链查找(尽量把变量设为局部变量);