前端基础(js,html,css)

1.css盒模型
padding,margin,content，border

2.闭包
（1）闭包就是一个函数，两个函数彼此嵌套，内部函数就是闭包形成闭包条件是内部函数需要通过return给返回出来
（2）①、闭包就是能够读取其他函数内部变量的函数。
　　 ②、将函数内部和函数外部连接起来的桥梁
3.localstorage,session,cookie的区别
1.cookie始终在同源的http请求中携带，即使不需要，cookie在浏览器和服务器中来回传递。而localStorage和sessionStora仅仅在本地存储，不会好服务器通信，也不会自动把数据发送给服务器。
2.存储大小不同，cookie为4kb左右；localStorage， sessionStorage可以达到5M
3.数据有效期不同，sessionStorage仅在同源窗口中有效，关闭窗口就消失了，cookie可以设置过期时间，localStorage长期有效
localStorage， sessionStorage有现成的API， cookie需要程序员手动封装

4.http常用状态码
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
5.从输入URL到页面加载发生了什么
1.DNS解析
2.TCP连接
3.发送HTTP请求
4.服务器处理请求并返回HTTP报文
5.浏览器解析渲染页面
6.连接结束
6. 如何进行网站性能优化
1.页面层：

• 减少HTTP请求：合并文件、CSS精灵、inline Image
• 减少DOM元素数量
• 组件预加载
• 非必须组件延迟加载
• 减少DOM元素数量
• 减少iframe数量
  2.serve层
• 使用CDN
• 添加Expires或者Cache-Control响应头
• 对组件使用Gzip压缩
• 避免空src的img标签
• Ajax使用GET进行请求

3. js, 图片层，css

• 优化cookie
• 减小cookie大小
• 引入资源的域名不要包含cookie
• js 1. 将脚本放到页面底部
  　　2. 将javascript和css从外部引入
  　　3. 压缩javascript和css
  　　4. 删除不需要的脚本
  　　5. 减少DOM访问
  　　6. 合理设计事件监听器
• 优化图片：
• 1.根据实际颜色需要选择色深、压缩
• 2. 优化css精灵
• 3. 不要在HTML中拉伸图片
• 4. 保证favicon.ico小并且可缓存

7.介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

• 改变了背景颜色、边框、字体的颜色，浏览器重新绘制颜色的过程称为重绘
• 当页面的元素发生变化的时候（宽、高、位置、创建元素），都会导致整个页面重排，浏览器会重新计算结构位置，重新渲染页面，称为DOM回流

回流必定会发生重绘，重绘不一定会引发回流

8.数据类型
1.判断数组
typeof 是不行的
二种方法: （1 instanceof （2）isArray
2.基本数据类型和引用数据类型
原始类型包括：boolean, null,undefined,number,string,symbol
引用数据类型：对象数组函数

9.防抖和节流的区别

• 函数防抖
  当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次
• 函数节流
  当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次

10.html5新特性
1.新增的语义化标签

2.input类型和属性 color，date ,datetime,number等等 3.新增的图形标签 canvas，svg 4.多媒体标签 video audio 5.新的HTML5的API Geolocation,<地理位置> Drag & drop Storage cache等

11.浏览器内核
IE: Trident
火狐：Gecko
Safari：webkit
chrome: Blink内核
Opera： Presto内核cs

12.css3新特性
https://juejin.im/post/5a0c184c51882531926e4294
1.过渡 CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
例子：

/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2s

2.动画
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
例子：

/*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/
animation: logo2-line 2s linear alternate infinite;

animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。    
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 
both：向前和向后填充模式都被应用。  */  

3.形状转换
transform:适用于2D或3D转换的元素
4.选择器
5.阴影
6.文字
7.换行，阴影
8.渐变
9.弹性布局
9.删格布局
10.盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内

13.https

基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护
通过抓包可以看到数据不是明文传输，而且HTTPS有如下特点：

1.内容加密：采用混合加密技术，中间者无法直接查看明文内容
2.验证身份：通过证书认证客户端访问的是自己的服务器
3.保护数据完整性：防止传输的内容被中间人冒充或者篡改

14.深拷贝和浅拷贝
深拷贝
1.1： 最简单的方法就是JSON.parse()或者JSON.stringify()
1.2： 用递归去复制所有层级属性

2. 浅拷贝
   2.1. object.assign(target,source)
   Object.assign 方法只复制源对象中可枚举的属性和对象自身的属性
   如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性；
   改变复制后的值，复制前的值也会变，这是浅拷贝；

15.调用手机照相机
capture表示，可以捕获到系统默认的设备，比如：camera–照相机；camcorder–摄像机；microphone–录音。
accept表示，直接打开系统文件目录。
其实html5的input:file标签还支持一个multiple属性，表示可以支持多选，如：
<inputtype="file"accept="image/*"multiple>
加上这个multiple后，capture就没啥用了，因为multiple是专门用来支持多选的

16.display：none和visibility:hidden的区别
display:none 会把对应的空间隐藏掉
visibility:hidden 会保留当前元素所占据的空间