前端春招的面试复盘

已经面过的公司里面试官大都喜欢先从自己之前写过的项目切入，开启面试的第一步，所以项目无论是之前做过的还是现在正在做的，都要认真复盘准备

写几个当时没答好的几个题吧，供大家参考 ：

问到了单页应用

单页应用 SEO差 页面切换慢快

单页应用：用vue写的项目是单页应用，刷新页面会请求一个HTML文件，切换页面的时候，并不会发起新的请求一个HTML文件，只是页面内容发生了变化

vue.js原理：JS感知URL变化，当URL发生变化后，使用JS动态把当前的页面内容清除掉，再把下一个页面的内容挂载到页面上。此时的路由就不是后端来做了，而是前端来做，判断页面到底显示哪一个组件，再把以前的组件清除掉使用新的组件。就不会每一次跳转都请求HTML文件。

多页面应用 SEO（搜索引擎排名）效果好 页面切换慢慢

每次页面跳转，后台都会返回一个新的HTML文档，就是多页面应用。

Es5的constructor和Es6的class

ES5构造函数中，使用this调用公有属性，这里的this指向是实例化对象；方法一般被定义在函数的prototype属性中是为了让使用同一构造函数生成的实例化对象都是相同方法

ES6的话直接在class内部定义方法，不需要定义在prototype中

ES6中定义的class类，不是function函数，不会被js程序预解析，所以是不能被提前调用的，但class中定义的方法在class内部虽然没有写function，但js会自动补足，所以是可以在class内部提前调用的

Ajax，axios，fetch的区别

三者都用于网络请求，但是不同维度

• Ajax，一种技术统称

• Fetch，一个具体的api

  • 浏览器原生API，用于网络请求

  • 和XMLHttpRequest一个级别

  • Fetch语法更加简洁，易用，支持Promise

  • function ajax2(url){
        return fetch(url).then(res => res.json())
    }
    

• Axios，是一个第三方库

  • 最常用的网络请求lib（library – 库）
  • 内部可用XMLHttpRequest和Fetch来实现
  • Axios，第三方库

服务端渲染和客户端渲染的区别

服务器端渲染

优点：对SEO友好，因为我们经过服务器端渲染的页面，在网络中传输的时候，传输的是一个真实的页面。因此，爬虫客户端，当爬到我们的页面后，会分析系我们给他提供的这个页面，此时，我们页面中的关键数据就会被爬虫给收录了。

缺点： 服务器端渲染，对服务器压力比较大，可以使用服务器端的页面缓存技术，减轻服务器的渲染压力；不适合前后端分离开发。

客户端渲染

每当用户要请求某个页面了，

第一步，用户需要先把这个页面请求到客户端，此时用户拿到的页面只是一个模板页面。

第二步，浏览器在解析模板页面的时候，会发起art-template的二次资源请求，同时要发送Ajax请求，去服务器获取数据

第三步，在客户端调用art-template 渲染HTML结构，并把渲染厚的htmlStr append 到页面指定的容器中;

缺点： 对SEO相当不友好

优点： 减轻了服务器端的渲染压力;同时，最大的好处就是：能够实现前后端分离开发;

各自应用的场景：

1、当不需要对SEO友好的时候，推荐使用客户端渲染;

2、当需要对 SEO友好的时候，推荐使用服务器端渲染

参考资料 ：

• https://zhuanlan.zhihu.com/p/79409388