米忽悠前端面试题总结（1）

꧁ଓ碎♡⃝碎ೡ꧂

已于 2022-11-04 19:59:14 修改

阅读量238

点赞数 4

文章标签：面试前端

于 2022-11-04 19:55:31 首次发布

本文链接：https://blog.csdn.net/qq_63944356/article/details/127694906

版权

1、什么是事件委托

答：核心：事件冒泡，父节点来统筹响应子节点的事件，为dom树最高层添加事件即可理解成事件委托。优点：节省内存开销，提高性能，可以从性能优化角度来概述，缺点：应当根据实际情况来使用，容易造成事件误判。

2、说一下this关键字

答：1、在函数体中，非显式或隐式地调用函数时，在严格模式下，函数内的this会被绑定到 undefined 上，在非严格模式下则会绑定到全局对象 window/global 上

2、一般使用 new 方法调用构造函数时，构造函数内的 this 会绑定到实例对象上

3、一般通过 call/apply/bind 方法显式调用函数时，函数体内的 this 会被绑定到 call/apply/bind 方法指定参数的对象上

4、一般通过执行上下文对象调用函数时，this会指向最后调用它的对象

5、在箭头函数中，this的指向是由外层（函数或全局）作用域决定的

3、浏览器的存储方式有哪些

答：cookie、local storage、session storage、web sql、indexedDB

4、session，在浏览器崩溃后，点击“恢复”按钮是否还会存在

答：存在于浏览器上的唯一标识符JSESSIONID（sessionid）消失了，但是服务器中存放的sessionid并没有立马销毁。

5、cookie的存储大小，这个存储大小限制，是作用于每条cookie还是整个域名

答：根据不同浏览器有所不同大约每条4kb，数量限制也是根据不同的浏览器来决定的

6、说一下http only

答：http-only的设置主要是用来防御xss攻击，即跨站点脚本攻击，js无法读取和修改http-only中的cookie，从而保护用户cookie信息免遭攻击者窃取

7、页面是如何渲染的

处理HTML标记并构建DOM树

处理CSS标记并构建CSSOM树

将DOM和CSSOM合并成一个渲染树

根据渲染树来布局，以计算每个节点的几何信息

将各个节点绘制到屏幕上

8、路由的几种模式，携带参数的方式

答：hash、history、abstract，携带参数方式：1、利用“router-link”路由导航来传递；2、调用“$router.push”实现路由传参数值；3、通过路由属性中的name匹配路由，再根据params传递参数值；4、通过query来传递参数值。

9、浏览器是如何加载资源来呈现页面的

答：浏览器通过Loader形成两条资源加载路径：主资源加载路径和派生资源加载路径，后对数据进行解码、解析、排版、绘制等操作

10、cookie是怎么创建的

答：1.在servlet程序里面创建一个cookie对象，注意是键值对形式，键和值都是字符串。

2.将cookie添加到浏览器

11、双向绑定的实现原理

答：老生常谈的问题了，注意不要和v-model混淆就好，这里不再多作赘述。

参考文献：Vue中双向绑定的实现原理_ムラサキ的博客-CSDN博客_双向绑定的实现原理

12、在路由之间进行页面切换，这时候页面是如何进行渲染的

答：需要注意是否使用keep-alive，进行组件缓存。

1.无论如何肯定访问的都是 index.html

2.main.js作为项目的入口把 App.vue 的虚拟dom渲染到了index.html的真实dom上了

3.在App.vue里面的会渲染当前访问的路由所对应的组件

13. 什么是rem?

答：rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。

首先，浏览器的默认字体大小都是16px。

然后，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。

就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位(比如px)的声明。

14.flex布局

弹性盒子的基本知识：http://t.csdn.cn/STRps

15.webpack loader plugin的区别：

1.由来：

扩展webpack的功能webpack是现在前端开发常用的打包工具，webpack本身只能识别js文件，但是前端资源还包含css style 图片等，webpack无法识别和打包，因此需要loader来加载并转换文件，完成文件的编译，打包和压缩。而plugin是为了扩展webpack的功能，作用于webpack的整个生命周期内。

2.作用点不同
loadre作用于文件
plugin作用于webpack在loader之后的整个生命周期

3.作用时间不同
先loader 再用plugin

4.作用不同
都是为了扩展webpack的功能。
但loader只作用于文件，只是为了文件转换
plugin 不会直接作用于文件，而是监听webpack在全周期的事件，有点像切面和不同周期内的拦截器

5.种类不同
常用的loader
css相关的
css-loader 遍历所有require的css文件，输出文件内容
style-loader 将css内容输出到页面的style标签。
es6->es5的
babel-loader babel-core
图片打包
url-loader file-loader
常用的plugin
HotModuleReplacementPlugin
模块热更新插件。Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server，后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面，HRM 是只更新修改的部分。
HotModuleReplacementPlugin是webpack模块自带的，所以引入webpack后，在plugins配置项中直接使用即可

const webpack = require('webpack')

plugins: [
  new webpack.HotModuleReplacementPlugin(), // 热更新插件
]

生成 html 文件。将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
最常用的18个webpack plugin
clean-webpack-plugin
用于在打包前清理上一次项目生成的bundle文件，他会根据output。path 自动清理文件夹，这个插件在生产环境用的频率非常高，因为生产环境经常会通过hash生成很多bundle文件，如果不进行清理的话，会导致文件夹非常庞大。

16.css-loader，style-loader

webpack是用JS写的，运行在node环境，所以默认webpack打包的时候只会处理JS之间的依赖关系！！！

因为像 .css 这样的文件不是一个 JavaScript 模块，你需要配置 webpack 使用 css-loader 或者 style-loader 去合理地处理它们。

如果在JS中导入了css，那么就需要使用 css-loader 来识别这个模块，通过特定的语法规则进行转换内容最后导出

css-loader会处理 import / require（） @import / url 引入的内容。

// base.css
.bg {
  background: #000;
}

const style = require('./base.css')
console.log(style, 'css')

css-loader处理之后导出的是

但是这并不是我们想要的，因为是个数组，页面是无法直接使用，这时我们需要用到零外一个style-loader来处理。

style-loader 是通过一个JS脚本创建一个style标签，里面包含一些样式。style-loader是不能单独使用的，应为它并不负责解析 css 之前的依赖关系，每个loader的功能都是单一的，各自拆分独立。

const path = require('path')

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpe?g)$/i,
        loader: 'url-loader',
        options: {
          esModule: false
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        loader: 'file-loader',
        options: {
          esModule: false
        }
      }
    ]
  }
}