前端基础面试题

作者: 啃香菜的花萝萝 | 来源:发表于2019-03-15 22:51 被阅读0次

1. 跨域问题

同源：两个文档需满足：协议相同，域名相同，端口相同。
跨域通信 ：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法：

如果是log之类的简单单项通信，新建<img>,<script>,<link>,<iframe>元素，通过src，href属性设置为目标url。实现跨域请求
如果请求json数据，使用<script>进行jsonp请求
现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin); 其中data是需要发送的对象，origin是目标窗口的origin。window.addEventListener('message', handler, false); handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送消息的窗口引用
内部服务器代理请求跨域url，然后返回数据
跨域请求数据，现代浏览器可使用HTML5规范的CORS功能，只要目标服务器返回HTTP头部Access-Control-Allow-Origin: *即可像普通ajax一样访问跨域资源

2. call 和 apply 方法是做什么的？有什么区别？

call, apply 方法是改变函数体内部 this 的指向。
区别：接收参数的方式不同。call是把参数按顺序传进去，而 apply 则是把参数放进一个数组中，把数组传进去。

3. 箭头函数的 this

箭头函数 不是function关键字定义的函数; 箭头函数中的 this 在函数被定义的时候就已经绑定好了，而不是取决于谁调用这个函数，this就指向谁。箭头函数的this取决于最近的一个非箭头父级函数的this指向。

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); //undefined
    console.log(this); //window
  },
  c: function() {
    console.log(this.a); //10
    console.log(this); //obj{...}
  }
}
obj.b(); 
obj.c();

4. css 盒子模型

盒子的组成： margin + border + padding + content

css 盒子模型

5. css 优先级；浏览器是如何解析的？

浏览器解析css选择器的规则是从右向左的。

6. 什么是闭包，应用场景？

当内部函数被保存到外部时，将会生成闭包。
由于JavaScript的垃圾回收机制，普通函数执行完之后，变量就会被直接回收。但是，闭包的方式可以让变量一直存在，不被回收。

闭包的缺点：
闭包会导致原有作用域链不释放，造成内存泄漏。
优点：

实现公有变量。 e.g.：函数累加器

function add () {
  var count = 0;
  function demo() {
    count ++;
    console.log(count);
  }
  return demo;
}
var counter = add();
counter();
counter();
... ...

function test() {
  var num = 100;
  function a() {
    num++;
    console.log(num);
  }
  function b() {
    num --;
    console.log(num);
  }
  return [a, b];
}
var myArr = test();
myArr[0](); // 101
myArr[1](); // 100

模块化开发，防止污染全局变量。
可以实现封装，实现私有化。

闭包应用场景：实现购物车的结账按钮，只点一次。

var something= (function() {
  var executed = false;
  return function() {
    if(!executed) {
      executed = true;
      // do something
    }
  }
})();

something();  // do something
something();  // nothing happens

7. 什么是 IIFE，应用场景？

IIFE：立即执行函数
IIFE中定义的任何变量和函数，都会在执行结束时被销毁。适合做初始化工作。

(function() {
  var a = 123;
  var b = 234;
  console.log(a+b);
})()

8. constructor 和 prototype 的区别

任何一个prototype对象都有一个constructor属性,指向它的构造函数。

9. 如何实现继承

设置原型链实现继承一
缺点: 父类实例属性为引用类型时，不恰当地修改会导致所有子类被修改。

// Person.prototype --原型
function Person() {};
Person.prototype.name = 'sun';
var ppp  = new Person();

设置原型链实现继承二: 公有原型
缺点：父类构造函数原型与子类相同。修改子类原型添加方法会修改父类

function Father() {}
function Child() {}
Father.prototype = Child.prototype;

Object.create() 方式实现类继承
正确设置原型链且避免方法1.2中的缺点；
这个方法会返回一个的一个新对象， 带着指定的原型对象和属性

function Father() {
  this.name = 'sun';
  this.age = 18;
}
// 父类方法
Father.prototype.getName = function () {
  return this.name;
}
function Child() {
  Father.call(this); // call father constructor
}
// 子类继承父类
Child.prototype = Object.create(Father.prototype);
Child.prototype.constructor = Child;

10. 输入url到渲染的过程

在浏览器地址栏输入URL
浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤：
如果资源未缓存，发起新请求；如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：

HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间

浏览器解析URL获取协议，主机，端口，path
浏览器组装一个HTTP（GET）请求报文
浏览器获取主机ip地址，过程如下：
1. 浏览器缓存
2. 本机缓存
3. hosts文件
4. 路由器缓存
5. ISP DNS缓存
6. DNS递归查询（可能存在负载均衡导致每次IP不一样）
打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
1. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
2. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
3. 客户端发送ACK=Y+1， Seq=Z
TCP链接建立后发送HTTP请求
服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
服务器将响应报文通过TCP连接发送回浏览器
浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：

主动方发送Fin=1， Ack=Z， Seq= X报文
被动方发送ACK=X+1， Seq=Z报文
被动方发送Fin=1， ACK=X， Seq=Y报文
主动方发送ACK=Y， Seq=X报文

浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
如果资源可缓存，进行缓存
对响应进行解码（例如gzip压缩）
根据资源类型决定如何处理（假设资源为HTML文档）
解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
构建DOM树：

Tokenizing：根据HTML规范将字符流解析为标记
Lexing：词法分析将标记转换为对象并定义属性和规则
DOM construction：根据HTML标记关系将对象组成DOM树

解析过程中遇到图片、样式表、js文件，启动下载
构建CSSOM树：

Tokenizing：字符流转换为标记流
Node：根据标记创建节点
CSSOM：节点创建CSSOM树

根据DOM树和CSSOM树构建渲染树
js解析
显示页面（HTML解析过程中会逐步显示页面）

11. sessionStorage,localStorage,cookie区别

都会在浏览器端保存，有大小限制，同源限制
cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage不会发送到服务器
cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效；localStorage长期有效，直到用户删除
共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
localStorage的修改会促发其他文档窗口的update事件
cookie有secure属性要求HTTPS传输
浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M

12. css画三角形

div1{
  border-style: solid;
  border-width: 0px 0px 100px 100px;
  border-color: transparent transparent blue transparent;
  width: 0px;
  height: 0px;
}

13. offsetHeight， scrollHeight， clientHeight 的区别

offsetWidth/ offsetHeight返回值包含 content + padding + border，效果与e.getBoundingClientRect()相同
clientWidth/ clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条
scrollWidth/ scrollHeight 返回值包含 content + padding + 溢出内容的尺寸

14. 右边固定宽度，左边自适应

<style>
  body {
    display: flex;
  }
  .left{
    background-color: pink;
    height: 200px;
    flex: 1;
  }
  .right{
    background: orange;
    height: 200px;
    width: 100px;
  }
</style>
...
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

<style>
  div {
    height: 200px;
  }
  .left{
    background-color: pink;
    margin-right: 200px;
  }
 .right{
   background: orange;
   width: 200px;
   float: right;
  }
</style>

<body>
    <div class="right"></div>
    <div class="left"></div>
</body>

15. 垂直水平居中

如果需要居中的元素为常规流中 inline 元素，为父元素设置 text-align: center; 即可实现
如果需要居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置 margin: 0 auto;

 <style>
  .center {
    width: 400px;
    height: 300px;
    border: 1px solid black;
    margin: 0 auto;
  }
</style>
... ...
<body>
  <div class="center"></div>
</body>

定位，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left/ top）设置为50%，4）浮动方向上的margin设置为元素宽度一半乘以-1，元素高度的一半乘以 -1

<style>
  .container {
    height: 100vh;
    position: relative;
  }
  .center {
     width: 500px;
     height: 300px;
     position: absolute;
     top: 50%;
     left: 50%;
     border: 1px solid red;
     margin: -150px 0 0 -200px;
  }
</style>
...
<body>
    <div class="container">
        <div class="center"></div>
    </div>
</body>

使用CSS3中的 transform的 translate属性

.container {
  height: 100vh;
  position: relative;
}
.center {
  width: 500px;
  height: 300px;
  border: 1px solid orange;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

flex布局

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.center {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

16. 清除浮动

使用伪元素选择器和隔墙法

设置添加的子元素为空，为块级元素，高度为0，子元素看不见，并且设置clear属性。
.box1::after{
  content: "";
  height: 0;
  display:block;
  clear: both;
}

兼容问题：IE6 并不支持。但是设置以下代码，IE6就能支持。

.box1{
  *zoom:1;  
}

overflow: hidden;
作用： 1. 可以将超出标签范围的内容裁剪掉； 2. 清除浮动； 3. 通过设置这个属性让嵌套的两个盒子，里面的盒子设置margin-top之后，外面的盒子不被顶下来。
给第一个盒子添加 overflow: hidden;即可。

17. 前端需要注意的SEO

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

18. get 和 post 的区别

如果什么前提都没有，只考虑语法来说，这两个方式没什么区别。
如果是基于RFC规范的，那么 GET 和 POST 有不同的语义：

GET方式用作获取信息； POST方式用作发送信息。
GET的数据在URL中对所有人都是可见的；POST的数据不会显示在URL中。
GET对数据长度有限制，当发送数据时，GET方法向URL添加数据，最大长度是2048个字符。 POST无限制。
GET 后退按钮/ 刷新无影响； POST数据会被重新提交
GET 编码类型 application/x-www-form-url; POST 编码类型 encodedapplication/x-www-form-urlencoded 或者 multipart/form-data。
与POST相比，GET的安全性较差。因为发送的数据是URL的一部分。
GET历史参数会保留在浏览器历史中。POST参数不会保存在浏览器历史中。

19. 如何优化网站的性能

content方面:

减少HTTP请求：合并文件、CSS精灵
减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
避免重定向：多余的中间访问
使Ajax可缓存
非必须组件延迟加载
未来所需组件预加载
减少DOM元素数量
减少iframe数量

css/ js方面：

将样式表放到页面顶部
不使用CSS表达式
将件脚本放到页面底部
将css和javascript从外部引入
压缩javascript和css
减少DOM访问
合理设计事件监听器

20. 什么是渐进增强？

渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:

所有浏览器都必须能访问基本内容
所有浏览器都必须能使用基本功能
所有内容都包含在语义化标签中
通过外部CSS提供增强的布局
通过非侵入式、外部javascript提供增强功能

21. arguments 是数组吗？怎么转为数组

arguments是类数组。长得像数组，也可以当数组用，但是它不是数组。因为数组有的方法它全没有。类数组本身是个对象。

类数组的组成：

属性要为索引属性
必须有length属性，最好加上push方法
如果加上了 splice方法，这个对象就看上去长得和数组一样了 Array.prototype.splice

题目： obj最后长啥样？

var obj = {
  "2" : "a",
  "3" : "b",
  "length" : 2,
  "push": Array.prototype.push
}
obj.push('c');
obj.push('d');

答案：{ "2" : "c", "3" : "d", "length": 4 }
原理：

Array.prototype.push = function(target) {
  arr[arr.length] = target;
  arr.length ++;
}

22. 事件委派

指的就是js事件冒泡：事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同时间也会被触发；

23. https/ http2/ http状态码/ OSI七层协议 / cdn及cdns

24. 主流浏览器及其内核

IE
内核： Trident
Google Chrome
内核：Webkit / blink
Firefox
内核：Gecko
Safari
内核：Webkit
Opera
内核：presto

部分答案出自：https://github.com/qiu-deqing/FE-interview

前端基础面试题

1. 跨域问题

2. call 和 apply 方法是做什么的？有什么区别？

3. 箭头函数的 this

4. css 盒子模型

5. css 优先级；浏览器是如何解析的？

6. 什么是闭包，应用场景？

7. 什么是 IIFE，应用场景？

8. constructor 和 prototype 的区别

9. 如何实现继承

10. 输入url到渲染的过程

11. sessionStorage,localStorage,cookie区别

12. css画三角形

13. offsetHeight， scrollHeight， clientHeight 的区别

14. 右边固定宽度，左边自适应

15. 垂直水平居中

16. 清除浮动

17. 前端需要注意的SEO

18. get 和 post 的区别

19. 如何优化网站的性能

20. 什么是渐进增强？

21. arguments 是数组吗？怎么转为数组

22. 事件委派

23. https/ http2/ http状态码/ OSI七层协议 / cdn及cdns

24. 主流浏览器及其内核

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端基础面试题

1. 跨域问题

2. call 和 apply 方法是做什么的？有什么区别？

3. 箭头函数的 this

4. css 盒子模型

5. css 优先级；浏览器是如何解析的？

6. 什么是闭包， 应用场景？

7. 什么是 IIFE， 应用场景？

8. constructor 和 prototype 的区别

9. 如何实现继承

10. 输入url到渲染的过程

11. sessionStorage,localStorage,cookie区别

12. css画三角形

13. offsetHeight， scrollHeight， clientHeight 的区别

14. 右边固定宽度，左边自适应

15. 垂直水平居中

16. 清除浮动

17. 前端需要注意的SEO

18. get 和 post 的区别

19. 如何优化网站的性能

20. 什么是渐进增强？

21. arguments 是数组吗？怎么转为数组

22. 事件委派

23. https/ http2/ http状态码/ OSI七层协议 / cdn及cdns

24. 主流浏览器及其内核

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

6. 什么是闭包，应用场景？

7. 什么是 IIFE，应用场景？