前端面试题（六）

tntxia
199 阅读4分钟

兑吧(33问)

  1. localStorage和cookie有什么区别

cookie依赖服务器，localStorage不依赖服务器

  1. CSS选择器有哪些

  2. 盒⼦模型，以及标准情况和IE下的区别

IE 盒子模型的 content 部分包含了 border 和 pading。

  1. 如何实现⾼度⾃适应

设置成百分比

  1. prototype和——proto——区别

函数中是prototype, 对象中是__proto__

  1. _construct是什么

构造函数

  1. new是怎么实现的
  • 创建一个新的空对象
  • 设置这个对象的原型链为被new的prototype
  • 把参数传入被new的对象并且绑定this
  • 如果返回的是一个对象则直接返回对象，如果返回的是基本数据类型则忽略。
  1. promise的精髓，以及优缺点

Promise 对象有以下两个特点:

1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

  • pending: 初始状态，不是成功或失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

  1. 如何实现H5⼿机端的适配

根据屏幕设置字体。使用rem定时高度。

  1. rem、flex的区别（root em）

flex不知道是什么字体设置的方式，此题有误。

  1. em和px的区别

em是继承的字体的大小的比例。比如现在文字继承到的字体是16px，那1em = 16px

  1. React生命周期

组件加载，组件更新，组件卸载

  1. 如何去除url中的#号

使用BrowserRouter

  1. Redux状态管理器和变量挂载到window中有什么区别

状态管理，状态分发，状态同步

状态更改可回溯——Time travel，数据多了的时候可以很清晰的知道改动在哪里发生。

  1. webpack和gulp的优缺点

Gulp侧重于前端开发的 整个过程 的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。

Webpack有人也称之为 模块打包机 ，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

  1. 如何实现异步加载

使用require, 或者import(module).then

  1. 如何实现分模块打包

（多⼊⼝）

  1. 前端性能优化

1js

css；

2 图⽚；

3 缓存预加载；

4 SSR；

5 多域名加载；

6 负载均衡）

  1. 并发请求资源数上限

（6个）

  1. base64为什么能提升性能，缺点

使用文本来存图片，请求时，服务器压力小，但浏览器计算量大了。

  1. 介绍webp这个图⽚⽂件格式

WebP，或非正式地称为weppy ，是大约5年前由Google Developers 推出的图像格式。 如果您是网站设计师，或者是努力减少和优化图像文件大小的开发人员，WebP的能力应该使您面带微笑。

简而言之，以下是您需要了解的一些不太重要的重要内容：

  • WebP的扩展名为.webp。
  • WebP同时采用有损和无损压缩。
  • WebP有损图像可能比JPEG小25-34％ 。
  • 与PNG相比，  WebP无损图像可能小25％ 。
  • WebP支持无损透明，即具有Alpha通道的PNG。
  • WebP支持动画。 即动画GIF。

简而言之，WebP能够显着减小JPEG，GIF，PNG的图像文件大小。

  1. 介绍koa2

  2. Promise如何实现的

  3. 异步请求，低版本fetch如何低版本适配

  4. ajax如何处理跨域

  5. CORS如何设置

  6. jsonp为什么不⽀持post⽅法

  7. 介绍同源策略

  8. React使⽤过的⼀些组件

  9. 介绍Immuable

  10. 介绍下redux整个流程原理

  11. 介绍原型链

  12. 如何继承

avatar
文章
阅读
粉丝