二十家公司前端面试题(二)

1. HTTP状态码及其含义

  • 100-199 : 表示成功接收请求, 要求客户端继续提交下一次请求才能完成整个处理过程
  • 200-299: 表示成果接收请求并已完成整个处理过程. 常用200
  • 300-399: 为完成请求, 客户需进一步细化需求: 例如: 请求的资源已经移动一个新地址, 常用302(重定向), 307和304(拿缓存)
  • 400-499: 客户端的请求有错误, 包含语法错误或者不能正确执行. 常用404(请求的资源在web服务器中没有) 403(服务器拒绝访问, 权限不够)
  • 500-599: 服务器端出现错误
  • 常用:
  • 200    正常   表示一切正常, 返回的是正常请求结果
  • 302/307  临时重定向  指出请求的文档已被临时移动到别处, 此文档的新的url在location响应头中给出
  • 304  未修改  表示客户机缓存的版本是最新的, 客户机应该继续使用它
  • 403  禁止  服务器理解客户端请求, 但拒绝处理它, 通常用于服务器上文件或目录的权限设置所致
  • 404  找不到  服务器上不存在客户机所请求的资源
  • 500  服务器内部错误  服务器端的cgi, asp, jsp等程序发生错误

2. 设置元素浮动后,该元素的display值是多少?

block

设置position:absolute/fixed、float:left/right的时候,行内元素会变成了块级元素,他们本身的display属性被忽略了。

3. 请描述cookies、sessionStorage 和 localStorage 的区别?

共同点:都是保存在浏览器端

区别:cookies缓存 sessionStorage会话存储 localStorage本地存储

1.cookies存储在http信息的实体中,http每次请求都会携带cookie, cookie在浏览器和服务器间来回传递, 后两者仅在本地保存

2.存储大小:cookie数据不能超过4k; 后两者要大很多,可以达到5M;

3.有效期:cookie在设置的cookie有效期之前有效,即使浏览器或窗口关闭;sessionStorage仅在当前浏览器窗口关闭前有效,不可持久保存;localSorage始终有效,窗口或浏览器关闭也一直保存,可做持久数据;

4.作用域:cookie、localStorage在所有的同源窗口中都是共享的;sessionStorage只能在当前页面使用。

4. 请你解释你对盒模型的理解,以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局?

盒模型:文档中的每个元素被描绘为矩形盒子,渲染引擎的目的就是判定大小,属性——比如它的颜色、背景、边框方面——及这些盒子的位置。

  在CSS中,这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界margin edge,边框边界border edge,内边距边界padding edge和内容边界content edge。

盒子模型分为两类:W3C标准盒子模型和IE盒子模型 

  这两者的关键差别就在于:

      1.W3C盒子模型——属性高(height)和属性宽(width)这两个值不包含 填充(padding)和边框(border) box-sizing:content-box

      2.IE盒子模型——属性高(height)和属性宽(width)这两个值包含 填充(padding)和边框(border) box-sizing:border-box

  我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型(需要在页面中声明DOCTYPE类型)。

5. 下面的语句的返回值是什么?

弹出66

6. 下面两个alert的结果是什么?

1     var foo = "Hello";
2     (function() {
3       var bar = "world";
4       alert(foo + bar);
5     })();
6     alert(foo + bar);

考察闭包

第一个弹出Hello world 第二个bar没有定义会报错

7. 下面foo.x的值是什么?

1     var foo = {n: 1};
2     var bar = foo;
3     foo.x = foo = {n: 2};

undefined

参考https://segmentfault.com/a/1190000002965140

https://segmentfault.com/a/1190000004224719

8. 下面代码的输出是什么?

1     console.log('one');
2     setTimeout(function() {
3       console.log('two');
4     }, 0);
5     console.log('three');

9. 对ES6的了解?

 箭头操作符、let和const关键字、支持类、字符串模板、for of 遍历、模块、 Promises等

原文地址:https://www.cnblogs.com/bhan/p/6733628.html