前端春招的面试复盘

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

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


问到了单页应用

单页应用 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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值