前端面试--重要基础知识回顾(一)
1.数据类型:
可变的引用类型:object(array ,function,正则);
不可变的原始类型:null, undefined, number, string, boolean, symbol(es6)
//引用类型
var arr1 = [1,2];
var arr2 = arr1
arr2.push(3)
console.log(arr1) //[99]
//原始类型
var str1 = "111";
var str2 = str1;
str2 = "222"
console.log(str1) //111
2.if的真和假:
以下情况会被认为返回false:(反之为真)
-
- " " 空的字符串
- 为 0 的数字
- 为 null 的对象
- 为 undefined 的对象
- 布尔值 false
3.事件冒泡,默认行为:
1).dom2级事件规定的时间流包括 三个阶段：
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
事件冒泡: 当一个元素接收到事件的时候,会把她接收到的事件依次向上传递,一直到window.
默认行为: 触发事件动作发生后的表现,比如点击链接会跳转,点击提交按钮会提交并刷新页面.
2）阻止事件冒泡
w3c:event.stoppropagation()
ie:event.canlebubble = true;
window.event? window.event.cancelbubble = true : e.stoppropagation(); //兼容的写法
写法:
document.getelementbyid("button").addeventlistener("click",function(event){
alert("button");
event.stoppropagation();
},false);
3）取消默认事件
w3c的方法是e.preventdefault()，ie则是使用e.returnvalue = false;
//假定有链接<a href="http://caibaojian.com/" id="testa" >caibaojian.com</a>
var a = document.getelementbyid("testa");
a.onclick =function(e){
if(e.preventdefault){
e.preventdefault();
}else{
window.event.returnvalue == false;
}
}
return false;
<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li id='ul-a' onclick='alert("li");'>
<a href="http://caibaojian.com/"id="testb">caibaojian.com</a>
</li>
</ul>
</div>
var a = document.getelementbyid("testb");
a.onclick = function(){
return false;
};
5.闭包:
闭包: 就是能够读取到其他函数内部变量的函数(通俗点讲就是函数a的内部函数b,被函数a外部的一个变量引用的时候, 就产生了一个闭包)
function a() {
n = 99;
function b () {
alert(n);
}
retrun b;
}
var result = a ();
result(); //99
6.$().ready()和window.onload
区别:
1) 运行时间
window.onload必须等到页面内包含图片的全部元素载入完成后才运行。
$(document).ready()是dom结构绘制完成后就运行，不必等到载入完成。
2) 编写个数不同
window.onload不能同一时候编写多个，假设有多个window.onload方法，仅仅会运行一个。
$(document).ready()能够同一时间编写多个。而且都能够得到运行。
如何用js实现ready()方法;
function ready(fn){
if(document.addeventlistener){ //标准浏览器
document.addeventlistener('domcontentloaded',function(){
//注销时间，避免重复触发
document.removeeventlistener('domcontentloaded',arguments.callee,false);
fn(); //运行函数
},false);
}else if(document.attachevent){ //ie浏览器
document.attachevent('onreadystatechange',function(){
if(document.readystate=='complete'){
document.detachevent('onreadystatechange',arguments.callee);
fn(); //函数运行
}
});
}
}
7,px和em和rem的区别？
px:像素大小
em:如果自己有font-size的像素，如果自己标签没有设置font-size就继承父级的。
rem:是继承html标签的font-size的像素
8.dom节点的增删改查?
查:getelementbyisd()....等等
增;appendchild():末尾插入;
insertbeforer():特定位置插入;
改:replacechild():接受两个参数,第一个为要插入的节点,第二个为要替换的节点;
删:removechild();
创建:createelement()
复制:clonenode(true|false) ; //默认是 false。克隆节点本身; 为 true，克隆节点及其属性，以及后代;
9,jsonp的原理?
根据浏览器同源策略，所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访问 b域名的信息，但是script 标签的src属性可以跨域引用文件，jsonp是请求之后后台包装好一段json，并且把数据放在一个callback函数，返回一个js文件，动态引入这个文件，下载完成js之后，会去调用这个callback,通过这样访问数据。
10,如何判断一个数组和类数组?
object.prototype.tostring.call()
11,什么是事件委托，jquery和原生js怎么去实现?
事件委托:利用事件冒泡的原理(不清楚请看3.1)当一个子级没有绑定事件时他会一直向上寻找,此时父级绑定的事件就是事件委托.
具体实现:
原生js:
//原生的实现方法
//情景:为父级绑定事件,点击子级时分别显示子级自己的html内容
farter.onclick = function(ev){
var ev = ev || window.event; //兼容
var target = ev.target || ev.srcelement; //target是获取当前的元素节点
if(target.nodename.tolowerlase == "child"){
arert(target.innerhtml) ;
}
}
jq:
delegate("选择器","事件",回调函数)
12,web前端开发，如何提高页面性能优化？(请参考雅虎军规)
内容:
1.尽量减少http请求数
2.减少dns查找
3.避免重定向
4.让ajax可缓存
5.延迟加载组件
6.预加载组件
7.减少dom元素的数量
8.跨域分离组件
9.尽量少用iframe
10.杜绝404
css部分:
11.避免使用css表达式
12.选择<link>舍弃@import
13.避免使用滤镜
14.把样式表放在顶部
js部分:
15.去除重复脚本
16.尽量减少dom访问
17.用智能的事件处理器
18.把脚本放在底部
css && js:
19.把javascript和css放到外面
20.压缩javascript和css
img:
21.优化图片
22.优化css sprite
23.不要用html缩放图片
24.用小的可缓存的favicon.ico（p.s. 收藏夹图标）
cookie:
25.给cookie减肥
26.把组件放在不含cookie的域下
移动端:
27.保证所有组件都小于25k
28.把组件打包到一个复合文档里
服务器:
29.gzip组件
30.避免图片src属性为空
31.配置etags
32.对ajax用get请求
33.尽早清空缓冲区
34.使用cdn（内容分发网络）
35.添上expires或者cache-control http头
-------------------------------------------未完待续--------------------------------------------