面试题节选二

面试题节选

一、常见web错误状态码

• 200：确定。客户端请求已成功。
• 201：表示资源被正确的创建。比如说，我们 POST 用户名、密码正确创建了一个用户就可以返回 201。
• 202：请求是正确的，但是结果正在处理中，这时候客户端可以通过轮询等机制继续请求。
• 203：非权威性信息。
• 204：无内容。
• 205：重置内容。
• 206：部分内容。
• 300：请求成功，但结果有多种选择。
• 301：请求成功，但是资源被永久转移。比如说，我们下载的东西不在这个地址需要去到新的地址。
• 302：对象已临时移动。
• 303：使用 GET 来访问新的地址来获取资源。
• 304：请求的资源并没有被修改过。
• 307：临时重定向。
• 308：使用原有的地址请求方式来通过新地址获取资源。
• 400：请求出现错误，客户端似乎有问题，比如请求头不对等。
• 401：访问被拒绝，没有提供认证信息。请求的时候没有带上 Token 等。
• 402：为以后需要所保留的状态码。
• 403：请求的资源不允许访问。就是说没有权限。
• 404：请求的内容不存在。
• 405：用来访问本页面的HTTP谓词不被允许（方法不被允许）
• 406：请求的资源并不符合要求。
• 408：客户端请求超时。
• 413：请求体过大。
• 415：类型不正确。
• 416：请求的区间无效。
• 500：内部服务器错误。
• 501：请求还没有被实现。
• 502：网关错误（Web服务器用作网关或代理服务器时收到了无效响应。）。
• 503：服务暂时不可用。服务器正好在更新代码重启。
• 504：网关超时。
• 505：请求的 HTTP 版本不支持。

二、什么是事件委托(/事件代理)？

**事件委托是利用事件的冒泡原理来实现的。**

何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

三、透明度的五大兼容性

①：filter:alpha(opacity=50);   /* IE */

②： -moz-opacity:0.5;   /* 老版Mozilla */

③： -khtml-opacity:0.5;   /* 老版Safari */

④： -webkit-opacity:0.5;   /* Safari and Chrome */

⑤： opacity: 0.5;   /* 支持opacity的浏览器 */

四、写出五种定位

语法：

   position：定位方式

  

1、static：静态定位：元素默认定位方式

  

2、fixed：固定定位：基于浏览器窗口进行位置移动

  

3、relative：相对定位：基于元素原来的位置进行移动

  

4、absolute：绝对定位：基于被设置非静态定位的最近上级元素进行定位。如果都没有，基于浏览器的第一屏进行定位

  

5、sticky：粘性定位

五、写出俩种定时器，并写出清除定时器的方法

1、setInterval(cb,ms)

2、setTimeout(cb,ms)

清除定时器：

1、clearInterval（）
2、clearTimeout（）

六、什么是盒子模型?

把所有的网页元素都看成一个盒子，它具有：

content、padding、border、margin、四个属性，这就是盒子模型。

盒子模型的俩种形式：

1、标准盒模型

2、怪异盒模型

首先呢，俩种模式可以利用box-sizing属性进行自行选择

标准模式：box-sizing：content-box;

怪异模式：box-sizing：border-box;

俩种模式的区别：   

标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子，盒子的大小并不会被padding所撑开

标准模式：盒子总宽度/高度 = 内容区宽度/高度 + padding + border +margin 。

怪异模式：盒子总宽度/高度 = width / height + margin 。

七、http和https的区别？

http传输的数据都是明文未加密的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高，主要区别如下：

1. Https协议需要ca证书，费用较高，
2. http是超文本传输协议，信息室明文传输，https则是具有安全性的ssl加密传输协议。
3. 使用不同的连接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
4. http的连接很简单，是无状态的；https洗衣是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

八、1rem、1em、1vh、1px各自代表的含义？

1、rem：

rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

2、em：

• 子元素字体大小的em是相对于父元素字体大小
• 元素的width/height/padding/margin用em的话是相对于钙元素的font-size

3、vw / vh：
全称是Viewport Width 和Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的1%,不过，处理宽度的时候%单位更合适，处理高度的话vh单位更好，

4、px：
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有（1920*1024）等不同的分辨率，

1920*1024前者是屏幕宽度总共有1920个像素，后者则是高度为1024个像素

九、ES5和ES6分别几种方式声明变量？

• ES5有俩种：var 和 function
• ES6有六种：增加四种：let、const、class和input

注意：let、const、class声明的全局变量再也不会和全局对象的属性挂钩！

十、对前端性能优化有什么了解？一般都通过哪几个方面去优化的？

前端性能优化的七大手段：

1. 减少请求数量
2. 减小资源大小
3. 优化网络连接
4. 优化资源加载
5. 减少重绘回流
6. 性能更好的API
7. webpack优化