面试初级前端被问的一些问题

图片懒加载问题

原理: 先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

优点: 解决页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题.

预加载的插件--echo.js

Demo (网上找到的一个demo代码)

JS中Dom 0级和DOM 2级有什么不同

0级DOM

分为2个：一是在标签内写onclick事件

　　　　二是在JS写onlicke=function（）{}函数

2级DOM

只有一个：监听方法，原生有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。

它们都有三个参数：第一个参数是事件名（如click）；

　　　　　　　　　第二个参数是事件处理程序函数；

　　　　　　　　第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用

addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener():不能移除匿名添加的函数。

区别:

如果定义了两个dom0级事件，dom0级事件会覆盖

dom2不会覆盖，会依次执行

dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖

原生Ajax

GET方法:

创建 ajax 对象
	var ajax = new XMLHttpRequest();
	向服务器发起请求
	ajax.open('GET','/checkuser',true);//异步同步
	ajax.send();
	
	响应
	ajax.onreadystatechange=function(){
		if(ajax.readyState == 4 &&ajax.status == 200){
			var d = ajax.responseText;
		}
	}

POST方法:

var ajax = new XMLHttpRequest();
	
	ajax.open('post','/aa');
	
	ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');
	
	ajax.send('username='+user.value);
	
	ajax.onreadystatechange = function(){
		if(ajax.readyState == 2 &&ajax.status == 200){
		
			var res = ajax.responseText;
		
		};
	};

两个盒子左固宽右自适应

第一种方法:

.left{
    width:200px;
    float:left;
    height:200px;
}
.right{
    height:200px;
    margin-left:200px;
}

第二种方法:

.outside{
    position:relative;
}
.left{
    width:200px;
    height:200px;
    position:absoluete;
    top:0;
    left:0;
}
.right{
    height:200px;
}

Vue组件之间传值

父向子:

子组件Child.vue中props一个['tag'] 在template中{{tag}}

父组件data{msg:'hello'} template中 <Child :tag='msg'></Child> ,

子组件内容---

父组件内容---

子向父:

子组件中点击触发函数send,send方法中使用$emit('sendMsg', this.data)第一个参数是自定义一个事件名字,第二个参数是要发送的内容

父组件中在子组件的标签内调用这个自定义的事件,@sendMsg='show',在show(data)这个方法中将子组件传来的值接受使用

子组件内容--

父组件内容--

如何实现修改url地址但是不刷新网页

由于ajax异步请求数据,不能在浏览器的历史中保留记录,也无法改变页面在浏览器中Url地址，不能点击浏览器的前进、后退按钮 ; 如果用户刷新了页面,或者用户改变了会话状态（浏览器的前进、后退、刷新），那么ajax就会丢失相关的数据。所以在h5中引入了history.pushState和history.replaceState很好的解决掉了Ajax存在的这个缺陷

工作原理 : 当使用ajax请求数据，使用window.history.pushState()将指定的URL添加到浏览器历史里,如果想要替换历史记录中的url可以用replaceState是将指定的URL替换当前的URL.这样就可以实现修改url而不刷新页面;通过监听popstate事件,可以监听到用户触发的前进和后退功能