一、HTML篇

1.块级元素的显示与隐藏方法，最少3种并说明区别

Display、visibility、opacity
display设置为none，并不占据屏幕的空间，通过visibility和opacity设置隐藏时, 占据了屏幕页面的空间。

2.html的核心属性有哪些，并说明

id：元素的唯一标识、 class：元素的类、 style：元素的行内样式、 title：元素的标题

3.简述CSS的权重

1）是否具有!important声明
2）选择器权重
1000 定义在标签style属性中
100 id选择器
10 类选择器，伪类选择器，属性选择器
1 元素选择器,伪元素选择器
3）选择器权重相同时，后者覆盖前者（就近原则，哪一个样式离标签近，哪一个就生效）

4.简述相对定位和绝对定位的区别

relative元素相对与原本位置的定位，并没有脱离文档流 absolute：给元素设置绝对的定位，脱离文档流
1）设置了absolute的元素，如果有祖先级元素设置了position为relative或absolute，则此时元素定位的对象为祖先级元素
2）设置了absolute的元素，如果没有祖先级设置position，则此时元素相对与body定位，即浏览器视口

5.简述overflow的三种取值，并说明具体含义

auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
hidden内容会被修剪，并且其余内容是不可见的。

6.简述盒子模型，以及改变盒子模型的属性

Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。
通过box-sizing可以改变盒模型

7.尽可能多的描述清除浮动的方式

1）浮动元素的父元素设置高度
2）浮动的父级元素设置overflow:hidden;
3）浮动元素的父元素使用::after{clear:both;content:’’;display:block}
4）在最后一个浮动盒子的下方放置块级元素使用clear:both属性

8.列举最少5个animation的子属性，并说明

animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

9.简述块级元素和行级元素的区别

块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列。行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的
块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高

10.简述HTTP协议

超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协议，基于 TCP/IP
协议通信协议来传递数据 HTTP协议是无状态的，HTTP 协议自身不对请求和响应之间的通信状态进行保存
Http报文包括请求报文和响应报文两大部分，其中请求报文由请求（request
line）、请求头（header）、空行和请求体四个部分组成。
HTTP常用的请求方法有GET和POST，GET：请求指定的页面信息，并返回实体主体。
POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。

二、JavaScript篇/jQuery

js五种基本类型:

Undefined、Null、Boolean、Number和String。

= = =和= =和equals

在= = 仅检查值相等，而“===”是一个更严格的等式判定，如果两个变量的值或类型不同，则返回false。
== 是运算符 equals 是方法方法可以被重写

null和undefined的区别？

undefined代表定义未赋值 null代表定义并赋值了，只是值为null 当我们对两种类型使用 typeof 进行判断的时候，Null
类型化会返回 “object”，这是一个历史遗留的问题。当我们使用双等号对两种类型的值进行比较时会返回 true，使用三个等号时会返回
false。

怎么做懒加载？

给页面中img标签设定自定义属性data-original,用来存放真正的img源URL，
给所有img的src属性设定为一张静态图片或者不设置监听窗口滚动scroll事件，遍历图片计算图片是否出现在浏览器可视窗口内
当图片出现在视窗中时再给他赋予真实的图片地址，这样可以保证首屏的加载速度然后按需加载图片。

怎么做优化页面

1.删除重复脚本，减少DSN查找

2.html别嵌套太多层，加重页面layout的压力；

3.css选择器的合理运用，减少匹配的计算量；

4.js中别滥用闭包，会加深作用域链，增加变量查找时间；减少http请求之类的等等；

sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据
不同点：
(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；
storage,会将数据保存到本地，不会造成宽带浪费；
(2)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；
(3)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;
(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

7. 闭包类

7.1 闭包是什么，有什么特性，对页面有什么影响

当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。
如果过多使用闭包，容易导致内存泄露怎么创建闭包在函数内部嵌套使用函数

7.2 闭包的好处

(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收) (2)避免全局变量的污染 (3)私有成员的存在 (4)安全性提高

7.3 闭包的缺点

可能导致内存占用过多,因为闭包携带了自身的函数作用域闭包只能取得外部包含函数中得最后一个值

7.4 闭包的使用场景

闭包随处可见，一个Ajax请求的成功回调，一个事件绑定的回调函数，一个setTimeout的延时回调，或者一个函数内部返回另一个匿名函数，这些都是闭包

8.AJAx类

8.1 解释使用js实现AJAX的工作原理。

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息 (3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求 (5)获取异步调用返回的数据 (6)使用JavaScript和DOM实现局部刷新

8.2 同步和异步的区别?

同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

8.3 请求ajax的参数详解

url, type, timeout 毫秒 , async 设置请求, baforeSend 发送请求参数 data 发送到服务器的数据
datatype 预期服务器返回的数据类型 error global 是否出发全局ajax事件 success发送的数据讲被转换为对象

8.4 ajax的步骤

1.创建XMLHttpRequest对象，也就是创建一个异步调用的对象。
2.创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息。
3.设置响应HTTP请求状态变化的函数。创建HTTP请求后，就可以将HTTP请求发送给Web服务器了。
4.发送HTTP请求。发送HTTP请求可以使用XMLHttpRequest对象的send()方法。
5.获取异步调用返回的数据。
6.使用javaScript和DOM实现局部刷新。

8.5 如何解决跨域问题?
跨域问题有哪些情况?

1.网络协议不同，如http协议访问https协议。
2.端口不同，如80端口访问8080端口。
3.域名不同，如hahaha.com访问hehehe.com。解决方法： jsonp动态创建script标签、 iframe、window.name、window.postMessage、服务器上设置代理页面