面试题。。

HTML

1.标签上的title属性与alt属性的区别是什么？

alt是在图片不能正常加载时候显示的提示语
title属性是鼠标划上去显示的内容

2.本地存储 离线存储区别 ？

相同：本地存储与离线缓存都是为了方便网页的加载，提高用户体验等。
不同: 本地存储一般存储的都是数据，而离线缓存一般存储的是网页等。

3.localstore和sessionstore的区别

共同点：都是保存在浏览器端，并且是同源的
sessionStorage：用于本地存储的一个会话中的数据，
这些数据在同一个会话中的页面才能访问并且会话结束后数据随之销毁，
是会话级别的存储

localStorage：用于持久化的本地存储，除非主动删除数据，否则数据不会过期 

4.Div+css布局和table布局有什么优点

改版的时候方便
页面加载速度快 结构清晰 页面整洁
变现和结构分离
易于优化（seo）搜索引擎更友好，排名容易靠前

5.link和@import的区别

link 属于 HTML标签 用来引入外部文件如js css 图片等
页面加载时同步加载 不存在兼容性问题 可以进行dom操作
 @是css提供的。 只能用来引入css样式表 
  等页面加载完成后开始加载 ie5以上兼容 不能进行dom操作。

6. seo优化

合理的title, description, keyswords;
语义化HTML 代码；
重要的内容不要用js 输出，爬虫不会执行js 获取内容；
尽量少用iframe ，搜索引擎不会抓取iframe 中的内容；
非装饰的图片必须加alt；

CSS

1.css的居中方式

//水平居中
			 （只适用于子盒子有宽的时候）
		1	 .div1{
				 width: 100px;
				 height: 100px;
				 background-color: gray;
				 margin:0 auto;
			 }
	2		  .div1{
				postion:absolute;
				top:0;
				left:50%;
				margin-left:-50px;//盒子自身一半大小
			 }
		3	  .div1{
				postion:absolute;
				top:0;
				left:50%;
				transform:translate(-50%,0%);
			 }
		4	  .div1{
				text-align:center;
			 }
		5	 弹性布局
			 .div1{
			 display:flex;
			 justify-content:center;
			 }
//垂直居中
.div1{
				 width: 100px;
				 height: 100px;
				 background-color: skyblue;
				 position: absolute;
				 left:0;
				 top: 50%;
				 margin-top:-50px;
			 }
			2. .div1{
				postion:absolute;
				top:50%;
				left:0;
				transform:translate(0%,-50%);
			 }
			 3	 弹性布局
			 .div1{
			 display:flex;
			align-items:center;
			 justify-content:center;
			 }
			 
//水平垂直居中
1.
.div1{
给定宽高的情况下使用
			 	 width: 100px;
			 	 height: 100px;
			 	 background-color: gray;
				 position: absolute;
				 top: 0;
				 left: 0;
				 right: 0;
				 bottom: 0;
				 margin: auto;
			 }
			 
	 2	 弹性布局
			 .div1{
			 display:flex;
			align-items:center;
			 }
		3	  .div1{
				postion:absolute;
				top:50%;
				left:50%;
				transform:translate(-50%,-50%);
			 }
	4		 .div1{
				 width: 100px;
				 height: 100px;
				 background-color: skyblue;
				 position: absolute;
				 left:50%;
				 top: 50%;
				 margin-top:-50px;
				 margin-left:-50px;
			 }

2.px,em,rem,%

(1).px:相对长度单位 像素px是相对于显示器屏幕分辨率而言的。
(2).em:相对长度单位 浏览器的默认字体高都是16px。
em单位有如下特点:
em的值并不是固定的;
em会继承父级元素的字体大小。
(3)rem是CSS3新增的一个相对长度单位，只相对根目录即HTML元素

//css
html{font-size:62.5%;} 
 body{font-size:12px;font-size:1.2rem ;} 
 p{font-size:14px;font-size:1.4rem;}`
 //这是的1rem=10px

3.display的值和作用

none: 隐藏标签对应的元素不会在文档流中占据空间
block(块元素)：1.独占一行 2.宽度自适应 3.可以设置大小
inline(内联元素)：1.不独占一行，2.宽度由内容决定 3.不可以设置大小
inline-block(行内块元素):1.不独占一行2.宽度由内容决定 3.可以设置大小
支持宽高

（++）元素隐藏的方式 以及区别

display:none:

隐藏元素，不占网页中的任何空间，
让这个元素彻底消失（看不见也摸不着）,
由于会影响到网页的空间，
所以会引起一次重排和重绘。

visibility:hidden:

他是把那个层隐藏了，
也就是你看不到它的内容
但是它内容所占据的空间还是存在的。
（看不见但摸得到），该操作不会对页面有影响，
所以只会引起一次重绘。

overflow:hidden:

让超出的元素隐藏（不占据网页空间），
就是在设置该属性的时候
他会根据你设置的宽高把多余的那部分剪掉，
会引起一次重排和重绘
	

4.数组去重

var  arr=[2,3,4,2];
		var hash=[];
		for(var i=0;i<arr.length;i++){
			if(hash[arr[i]]==undefined){
				hash[arr[i]]=1;
			}else{
				hash[arr[i]]++;
			}
		}
			console.log(hash);
		arr=[];
		for(var key in hash){
			arr[arr.length]=(key-=0);
		}
		console.log(arr); 

5.原型、原型链

原型：每个函数都有 prototype 属性，该属性指向原型对象；
原型链:当从一个对象那里调取属性或者方法的时候，如果该对象自身不存在这样的属性或者方法，就会去关联的prototype那里寻找。如果prototype没有，就会去prototype关联的prototype那里寻找 直到prototype…prototype…为null的时候，从而形成了原型链(根本上来说就是继承的关系)
本质上是继承和共享方法

6、浏览器的内核分别是什么?

内核(渲染引擎)：负责读取网页的内容，把代码显示到网页当中
IE: Trident内核
Firefox：Gecko内核
Safari：webkit内核
Chrome/Opear：Blink内核 （Blink是webkit 的一个分支 是基于webkit 的二次开发 添加了一些功能）

7.CSS选择器的优先级排序，怎么计算权值？

优先排序：
!important>内联样式>id>class|属性>标签选择器>通配符
权重计算规则：
1、第一等：代表内联样式，如: style=””，权值为1000。
2、第二等：代表ID选择器，如：#content，权值为0100。
3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5、通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6、继承的样式没有权值。

8.统计字符串中出现最多的字符

var  str="ssaeresadzsxzzxzs"
				var arr=[];
				for(var i=0;i<str.length;i++){
					if(arr[str[i]]==undefined){
						arr[str[i]]=1;
					}else{
						arr[str[i]]++
					}
				}
				 console.log();
				 var max=0;
				 var string=""
				for(var key in arr){
					if(arr[key]>max){
						max=arr[key]
						string=key
					}
				}
				console.log("出现次数"+max+"次");
		console.log("最多字符是"+string);

9垃圾回收机制

//js中一个变量在内存中是去引用js就会将其回收释放内存
//1标记阶段：垃圾回收器，从根对象开始遍历，访
//问到的每一个对象都会被标识为可到达对象
//清除阶段：垃圾回收器对内存当中进行线性
//遍历，如果对象没有被标记为可到达对象，就会被回收

---

1标记清除
2引用计数

10.css3的新特性

CSS3实现圆角（border-radius），
阴影（box-shadow），
对文字加特效（text-shadow、），
线性渐变（gradient），
旋转（transform）
transform:rotate(9deg) scale(0.85,0.90)//旋转,缩放 translate(0px,-30px) skew(-9deg,0deg);//,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image

11.ajax过程

1.创建XMLHttpRequset对象
2.建立连接
3.发送请求
4.事件监听

12.清除浮动有哪些方式

1父级div定义height

  .box1{
			   width:200px;
			   height: 300px;//1父级添加高度
			   background-color: red;
			  overflow:auto//4
			   overflow:hidden//5
			   	 display:table//6
			//7 父级浮动 定义高度
			 width: 200px;
			height: 200px;
			float: left;
		   }
		   .box2{
		   			   width:400px;
		   			   height: 200px;
		   			   background-color: yellow;
					   float: left;
		   }
		</style>

<body>
		<div class="box1">
			<div class="box2"></div>
			  <br clear="both">
		<br  class="clear">//2.浮动元素后添加
		<div class="clear"></div>//3.浮动元素后添加
		</div>
		
	</body>

13.什么是盒子模型

在网页中，一个元素占用空间的大小有几部分构成，其中包括元素（内容 ，内边距 ，外边距，边框） 这四个部分组成css中元素的盒模型。
其中css盒模型中分为 标准盒模型和ie盒模型。
标准盒子模型中width单指元素内容的宽度
ie盒模型的width指的是元素内容宽度+boder+padding

14.display：none和visibility：hidden的区别

display：none 隐藏对应元素单不占该元素的区域
visibility：hidden 隐藏对应元素并且占据该元素原来的空间
就是所使用none后 元素的宽高相当于这个位置"没有"了
而使用了hidden属性后 这个元素仅仅是在视觉上看不见实际还是存在的。

15.什么是闭包，有什么作用？

闭包是有权访问另一个函数作用域中的变量 的函数
作用：解决重用变量，又要保护变量不受污染的技术

var num=100;
			function fn(){
			var num=10;
				function fun(){
					console.log(num);//10
				}
				fun();
			}
			fn();
			

16.null和undefined的区别？

null这个值专门用来表示一个为空的对象。

Undefined 声明一个变量，但是并不给变量赋值时，它的值就是undefined。

17.js深度克隆的代码实现？

var obj={name:"zs",id:1,
			msg:{
			age:12},
			color:["pink","red"],
			};
			var o={};
			//深拷贝
			function deepCopy(newobj,oldobj){
			for(var k in oldobj){
				//1获取属性值
				var item=oldobj[k];
				//2.判断是否是数组 
				//数组要写前面因为数组也是对象
				if(item instanceof Array){
					newobj[k]=[];
					deepCopy(newobj[k],item);
				}else if(item instanceof Object){	//3判断是否是 对象
					newobj[k]={};
					deepCopy(newobj[k],item);
				}else{	//判断是否是简单数据对象
					newobj[k]=item;
				}
			}	
			
	}
	deepCopy(o,obj);
	console.log(o)//{name:"zs",id:1,msg{age:12}，color:["pink","red"]};
	//o.msg.age=133;
	console.log(o);//{name:"zs",id:1,msg{age:133}，color:["pink","red"]};
	console.log(obj);//{name:"zs",id:1,msg{age:12}，color:["pink","red"]};

20.ol li结构的html代码，写原生js实现点击某个li就弹出对应的索引值

var lis=document.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				lis[i].index=i;
				console.log(lis[i])
			   lis[i].onclick=function(){
				   console.log(this.index)
			   }	
			}
		

21JavaScript中什么是基本数据类型什么是引用数据类型？以及各个数据类型是如何存储的？

基本数据类型:
Number String Boolean Null Undefined Symbol（ES6新增数据类型）
引用数据类型:
Object Array Date Function
基本数据类型的数据直接存储在栈中；
引用数据类型的数据存储在堆中，

22什么是作用域，什么是作用域链？

规定变量和函数的可使用范围称作作用域
每个函数都有一个作用域链，查找变量或者函数时，需要从局部作用域到全局作用域依次查找，这些作用域的集合称作作用域链。

24、浏览器的内核分别是什么?

常用的浏览器 :
Ie 火狐（fire fox） 谷歌（chrome）苹果浏览器（safari） opear浏览器。
浏览器的内核：负责读取网页内容，整理讯息 计算网页的显示方式并显示页面。
IE 内核 Trident
火狐 内核 Gecko
苹果 Webkit
谷歌 Blink 是webkit 的分枝 在原有的基础上增强 才有的Blink
国产浏览器一般用的是Webkit/ Blink 内核

26.防抖和节流

防抖
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

var timer; //设置定时器
var search; //假设为输入内容
search.Oninput = function debounce() {if(timer) {
clearTimeout(timer)
}
timer = setTimeout(function() {console.log("搜索' ")
},1000)
}

节流
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

var flag= true;
//假设btn是提交按钮
btn.onclick = function throttling(){if(!flag) return false;
flag = false;
setTimeout(function(){
console.log("提交");
flag = true;
},1000);
;

区别
函数防抖是将一一个周期内的多次操作通过重置计时器的方式合并到一次操作中，而函数节流是一个周期内只允许只执行一次操作，多余的操作将直接returnfalse。

27.浏览器渲染过程

1.解析HTML生成DOM树。
2. 解析CSS生成CSSOM规则树。
3.将DOM树与CSSOM规则树合并在一起生成渲染树。
4.遍历渲染树开始布局，计算每个节点的位置大小信息。
5.将渲染树每个节点绘制到屏幕

28重绘与回流

            回流（重排）：
当元素的尺寸、结构、或者触发某种属性时。
浏览器将会重新渲染页面。
           常见操作:
1.元素尺寸、元素、内容改变2.字体、窗口等大小变化。
            重绘：
当元素样式的改变不影响布局时，
浏览器将使用重绘对元素进行更新。
          常见操作有：改变元素颜色 改变元素背景色
减少重绘和回流的办法
使用css3新增属性：translate替代top
避免频繁使用style，而是采用class

总结
回流必定触发重绘，但重绘不一定触发回流。

29.js递归1-100求和

function add(num1,num2){
var num=num1+num2;
if(num2+1>100){
return num;
}else{
return add(num,num2+1)
}
}
var sum=add(1,2);
console.log(sum)//5050

30 forEach、forin、forof区别

1.forEach 用来遍历数组
2.forin 用来遍历对象或者json
3.forof 数组和对象都能遍历，遍历对象的时候要通过Object。keys();
4.for in 遍历的是属性 forof遍历的是value；

31 箭头函数和普通函数区别

普通函数：this
this 指向调用者 默认指向window
在严格模式下没有调用者 this就是undefined
箭头函数：this
this指向定义时所在对象不是调用时所作对象
不能够作构造函数使用，不能实例化对象
不能使用 arguments
不能使用yield

32 let var const 区别

var 没有块级作用域 有变量提升
let 有块级作用域 没有变量提升 不允许重复声明，存在暂时性死区，
cosnt 有块级作用域 没有变量提升，不允许重复声明，存在暂时性死区，变量一旦声明就不能改变。

34.promise是什么？能解决什么问题？

35.http和https的区别

1.http是超文本传输协议，信息是明文传输，
https则是具有安全性的ssl加密传输协议。

2.使用不同的链接方式，端口也不同，一般而言，
http协议的端口为80，https的端口为443

3.http的连接很简单，是无状态的；
HTTPS协议是由SSL+HTTP协议构建的
可进行加密传输、身份认证的网络协议，比http协议安全。

36bookstrap栅格系统，你怎么理解栅格系统

37用什么方法判断是否是数组？又用什么方法判断是否是对象？

38v-if和v-show的作用相似，它们的区别？

都可以显示或者隐藏元素，但是v-if隐藏元素是通过dom操作去掉 元素
v-show 是通过display的值来隐藏元素

39.网页中有大量图片加载很慢 你有什么办法进行优化？

1.图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，如果前者小鱼后者，优先加载

2.使用图片预加载技术，将当前展示图片的前一张和后一张优先下载

3.使用csssprite或者svgsprite

40.网页的三层结构有哪些

结构（html或xhtm标记语言）表现（css样式表）行为（js）

请简述媒体查询
媒体查询扩展了media属性, 就是根据不同的媒体类型设置不同的css样式，达到自适应的目的。

Rem缺点
比如：小说网站，屏幕越小的移动设备如果用了rem肯定文字就越小，就会导致看文章的时候特别费眼

41.js对数组的操作，包括向数组中插入删除数据

join ：1. 将字符连接成单词
  2. 将单词连接成句子
  3. 将数组内容转为页面中的列表/选择元素

concat 数组拼接
slice  数组截取
splice   数组  
splice(starti,n)删除
splice(starti,0，2,2)插入 
splice(starti,n，2,2)替换
resver 反转数组
sort() 排序 
按照正常方式排序就要声明一个比较器函数
 升序 function compare(a,b){return a-b};
 降序 function compare(a,b){return b-a};

43.js的选择器

getElementById(ID): 
返回对指定ID的第一个对象的引用，

getElementsByName(name): 
返回文档中name属性为name值的元素，name属性值不是唯一的，

getElementsByTagName(tagname):
 返回文档中指定标签的元素
 
getElementsByClassName():ie8以下有兼容问题 
返回文档中所有指定类名的元素

querySelector():
返回文档中匹配指定css选择器的第一个元素

 querySelectorAll():
 返回文档中匹配指定css选择器的第一个元素

44.JS内存泄露

1意外的全局变量
2被遗忘的计时器和回调函数
3脱离文档的dom的引用
4闭包

45.js数据类型

基本数据类型 数字型 布尔型 字符串 null undefined symbol
引用数据类型 arr function obj date

46.transition transform translate 之间的区别 transform的属性有哪些？

47.css3中的选择器

48.定位的属性值有何区别

Position有四个属性值：relative absolute fixed static

Relative相对定位 不脱离文档流，相对于自身定位

Absolute 绝对定位,脱离文档流 相对于父元素位。
采用了绝对定位的元素会先查找父元素是否采用相对定位
有就以父元素的左上角为坐标,否则的话就再向上查找一直到body

Fixed 固定定位，脱离文档流，相对于浏览器窗口定位

Static 默认值，元素出现在正常的流中

49.vue数据双向绑定的原理，

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的

50.作用域

作用域说明:指一个变量的作用范围。在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
1、全局作用域
全局作用域在进入浏览器时被创建、退出浏览器时被销毁。
2、函数作用域
函数作用域在函数被调用时创建，在函数执行完毕时被销毁

51.页面渲染过程

基本过程

1．解析HTML文件，创建DOM树

2．解析CSS,形成CSS对象模型

3．将CSS与DOM合并，构建渲染树（renderingtree）

4．布局和绘制

52.http协议

http请求由三部分组成，分别是：请求行、消息报头、请求正文

HTTP（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式，HTTP1.1版本中给出一种持续连接的机制，绝大多数的Web开发，都是构建在HTTP协议之上的Web应用。

531、常用的HTTP方法有哪些？

GET： 用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传参给服务器。
POST：用于传输信息给服务器，主要功能与GET方法类似，但一般推荐使用POST方式。
PUT： 传输文件，报文主体中包含文件内容，保存到对应URI位置。
HEAD： 获得报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URI是否有效。
DELETE：删除文件，与PUT方法相反，删除对应URI位置的文件。
OPTIONS：查询相应URI支持的HTTP方法。

54数组转字符串

1.toString（）
2.toLocalString（）
3.join（）

55http和https的区别

1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)

2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

57.盒子模型（怪异模型）

盒模型一共有两种模式： 标准盒模式和怪异盒模式
一 标准盒子模型
1.标准盒子模型下 width 和height 是内容区域的content 的 width 和height
2.在标准模式下，一个块的总宽度=content+左右border +左右margin+左右padding
二 ie盒子模型
一个块的总宽度=content+左右margin
（width包含了border和padding）
css3的box-sizing
box-sizing：content-box 采用标准模式解析
box-sizing：border-box 采用怪异模式解析

58.创建新数组，向数组插入数据

	var arr=[1,2,3,4,5,6,7,8,9]
	arr.push(1) //在数组后面添加
	arr.unshift(1,2)//在数组前面添加

59.CSS的引用方式有哪些？它们的区别？

css引用；行内样式，内联样式，外部样式；

<divstyle="color:red">1
</div>

内联样式写在head标签中，适合一些较小的页面

*{
		padding: 0;
		margin: 0;
	}

外部样式 通过link标签 或者import 引入
引入路径可以是在线的可以是本地的
link标签引入
link标签 除了引入css样式还可以引入别的

<link rel='stylesheet' type="text/css" href='../css/index.css'>

@import引入，
只能引入css,且写 style样式中

<style>
			*{
				padding: 0;
				margin: 0;
			}
			@import url("../css/index.css");
		</style>