前端常见面试题总结

1.new一个函数发生了什么

• 创建了一个新对象实例

let obj=new Object();
1

• 构造函数被执行
• 将空对象的__proto__成员指向了原函数对象prototype成员对象

obj.proto=Person.prototype
1

-将构造函数的this指向新对象

Person.call(obj)
1

• 返回一个对象
  

2.css中，display:none和visibility:hidden的区别？

• display:none相当于完全消失，不占用空间，不在文档流中；visibility:hidden相当于隐身，还占据着位置，在文档流中。
• visibility有继承性，给父元素设置该属性子元素也会继承同样的属性。

css中link和@import的区别是？css3有那些新特性？

• link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。
• 加载顺序的差别：当一个页面被夹在的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。
• 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。
• 使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。

3.Vue3有那些新特性？

• 1.使用Proxy代替defineproperty实现响应式
• 2.重写虚拟DOM的实现和Tree-Shaking
• 3.Vue3可以更好的支持TypeScript
• 事件开缓存
• Composition API
• Teleport（传送门
• 一个 Vue 模板可以有多个根节点(Fragments)
• Custom Renderer API ( createRenderer )
• Tree Shaking
• Suspense
• 生命周期函数
• Better TypeScript Support

4.iframe的优点

• 1、　iframe能够原封不动地把嵌入的网页展现出来。
• 2、　如果有多个网页调用iframe，只需要修改iframe的内容，就可以实现对调用iframe的每一个页面内容的更改，方便快捷。
• 3、　网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用性。
• 4、　如果遇到加载缓慢的第三方内容如图标和广告等，可以用iframe来解决。

5.请说出三种减少页面加载时间的方法？

• 1、减少http请求（合并文件、合并图片）
• 2、优化图片文件，减小其尺寸
• 3、图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
• 4、 压缩Javascript、CSS代码
• 5、 服务器启用gzip压缩功能
• 6、 使用CDN
• 7、图片懒加载

6.前端页面有那三层构成，分别是什么？作用是什么？

• 一、网页的 结构层(structural layer) 由HTML或XHTML之类的标记语言负责创建。
  标记语言也就是指网页的标签，标签只对网页内容的语义和含义做出描述，不包含任何关于如何显示内容的信息。
• 二、网页的表示层(resentation layer)由CSS负责创建。
  作用是对内容如何显示做一定的控制。
• 三、网页的行为层(behavior layer)由JavaScript语言和DOM创建。
  作用是控制用户做出一个事件该如何显示。例如：用户悬浮在某个元素上，弹出一个显示元素标题内容的提示框。

7.TCP和UDP的区别

• 1. TCP是⾯向 连接 的，⽽UDP是⾯向⽆连接的。
• 2. TCP仅⽀持 单播传输 ，UDP 提供了单播，多播，⼴播的功能。
• 3. TCP的三次握⼿保证了连接的 可靠性 ; UDP是⽆连接的、不可靠的⼀种数据传输协议，⾸先不可
  靠性体现在⽆连接上，通信都不需要建⽴连接，对接收到的数据也不发送确认信号，发送端不知道
  数据是否会正确接收。
• 4. UDP的 头部开销 ⽐TCP的更⼩，数据 传输速率更⾼ ， 实时性更好 。

8.你遇到过那些兼容性问题？

9.你觉得前端工程师的价值体现在哪里？

10.javascript创建对象有几种方式？

• 一、通过{}创建对象
• 二、通过new Object()创建对象
• 三、使用字面量创建对象
• 四、使用工厂模式创建对象
• 五、通过构造函数创建对象
• 六、通过原型模式创建对象
• 七、通过原型+构造函数的方式创建对象

11.GET和POST的区别，何时使用POST

• GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
• POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

那么在以下情况中，请使用 post请求：

1、无法使用缓存文件（更新服务器上的文件或数据库）

2、向服务器发送大量数据（post没有数据量限制）

3、发送包含未知字符的用户输入时，post比 get更稳定也更可靠

12.HTML新特性

• 1：语义化标签
• 2：增强型表单
• 3. 媒体元素
• 4. canvas绘图
• 5. svg绘图
• 6. 地理定位
• 7. 拖放API
• 8. Web Worker
• 9. Web Storage
• 10. Websocket

13.cookie和session有啥什么联系和区别

• 1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
• 2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
  考虑到安全应当使用session。
• 3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
  考虑到减轻服务器性能方面，应当使用COOKIE。
• 4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
• 5、所以个人建议：
  将登陆信息等重要信息存放为SESSION
  其他信息如果需要保留，可以放在COOKIE中

14.js怎样获取key

• for in循环获取key值
• Object.keys() ， 遍历自身可以枚举属性
• Ojbect.values() /Ojject.entries()，返回自身可枚举属性的键值对数组
• hasOwnProperty ，遍历可枚举属性
• getOwnPropertyNames() 返回可枚举属性和不可枚举属性，不包括prototype属性，不包括symbol类型的key
• getOwnPropertySymbols() 返回symbol类型的key属性，不关心是否可枚举

15.简述 this 的指向？

• 普通函数调用，此时 this 指向 window，默认写法可以省略window
• 对象方法调用， 此时 this 指向调用次方法的对象
• 构造函数调用，此时 this 指向new出来的实例对象
• 通过事件绑定的方法， 此时 this 指向 绑定事件的对象
• 定时器函数， 此时的 this 指向 window

16.如何改变 this 的指向？

• call()方法

<script>
        // 第一个参数：this指向
        // 如果要传参，后面依次是参数
        function fn(x, y) {
            console.log(this);
        }
        var obj = {
            name: "张三"
        }
        fn(1, 2); // 改变指向前
        fn.call(obj, 1, 2); // 改变指向后，this指向obj
    </script>
1
2
3
4
5
6
7
8
9
10
11
12

• ** apply()**
  apply() 与call（）非常相似，第一个参数都是this指向，不同的地方在于提供参数的方式，apply（）使用数组传参数

 <script>
        // 第一个参数：this指向
        // 如果要传参，后面依次是参数
        function fn(x, y) {
            console.log(this); // 改变this指向之前this指向Window 改变后指向obj对象
        }
        var obj = {
            name: "张三"
        }
        fn(1, 2); // 改变指向前
        fn.call(obj, [1, 2]); // 改变指向后
1
2
3
4
5
6
7
8
9
10
11

• bind()
  bind() 方法不会调用函数。但是能改变函数内部this 指向,因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind

<script>
        // 第一个参数：this指向
        // 如果要传参，后面依次是参数
        function fn(x, y) {
            console.log(this); // 改变this指向之前this指向Window 改变后指向obj对象
        }
        var obj = {
            name: "张三"
        }
        fn(1, 2); // 改变指向前
        fn.bind(obj, 1, 2)(); // 自调用之后，this指向obj
    </script>
1
2
3
4
5
6
7
8
9
10
11
12

• 用一个变量保存this

<script>
        let button = document.getElementById('an')
        button.addEventListener('click', function () {
            let _this = this
            setTimeout(function () {
                console.log('保存到定时器外的this指向', _this); // _this指向button 按钮
                console.log('定时器中的this指向', this); // this 指向window
            }, 1000)
        })
    </script>
1
2
3
4
5
6
7
8
9
10

17.有了解过浏览器的协商缓存和强缓存吗？

• 强缓存：不用请求服务器，直接使用本地缓存，利用http响应头中的Exprires或Cache-Cantrol实现。(Expires或者Cache-Control两个字段表示资源的缓存时间。)
• 协商缓存：浏览器发现本地有资源的副本，但是不太明确要不要使用，于是去问问服务器。(协商缓存是利用的是两对Header：)

18.什么是 XSS 攻击，如何避免？

• XSS 攻击，即跨站脚本攻击（Cross Site Scripting），它是 web 程序中常见的漏洞。攻击者往 web 页面里插入恶意的 HTML 代码（Javascript、css、html 标签等），当用户浏览该页面时，嵌入其中的 HTML 代码会被执行，从而达到恶意攻击用户的目的。如盗取用户 cookie 执行一系列操作，破坏页面结构、重定向到其他网站等。
  如何避免：
• web 页面中可由用户输入的地方，如果对输入的数据转义、过滤处理
• 后台输出页面的时候，也需要对输出内容进行转义、过滤处理（因为攻击者可能通过其他方式把恶意脚本写入数据库）
• 前端对 html 标签属性、css 属性赋值的地方进行校验

18.列举一些关于VUE性能优化和提升用户体验点？

• 第一就是uglifyjs-webpack-plugin,它是用来干嘛的呢？它是用来对代码进行压缩的，并可以配置在生产模式下取消项目中的console.log打印

安装指令：

yarn add -D terser-webpack-plugin  或  npm install terser-webpack-plugin -save -dev
1

在项目中引入和使用：

const Webpack = require('webpack')
// 引入该插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 引入压缩插件
const TerserPlugin = require('terser-webpack-plugin')
// 匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|ttf)(\?.*)?$/i

module.exports = {

  transpileDependencies: ['vuetify'],
  assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)这些文件都可以写里面
  productionSourceMap: false,
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path][name].gz[query]',
        algorithm: 'gzip',
        test: productionGzipExtensions,
        threshold: 0,
        minRatio: 0.8,
      }),
      new Webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'], // 移除console
            },
          },
        }),
      ],
    },
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

• 第二个就是 compression-webpack-plugin，对资源进行压缩

安装命令：

yarn add -D compression-webpack-plugin  或  npm install compression-webpack-plugin -save -dev
1

在项目中引入和使用:

const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用

plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,//大于10k的进行压缩
          minRatio: 0.8,
        })
      );

1
2
3
4
5
6
7
8
9
10
11
12

• 第三个就是html-webpack-plugin对面的html进行处理，对seo比较友好一点点

安装命令：

yarn add --dev html-webpack-plugin 或 npm i --save-dev html-webpack-plugin
1

在项目中引用：

const { resolve } = require('path')//nodejs 方法
const HtmlWebpackPlugin = require('html-webpack-plugin')
 
export.moduls= {
        entry: {
            one: ['./src/index1.js', './src/index2.js'],
            two:'./src/indexTwo.js'
        },
        mode: 'development',
        output: {
                filename: '[name].js',
                path: resole(_dirname, 'build')
        },
        module:  {
                rules: []
        }, 
 
        plugins: [
            //默认：创建空的html 自动引入打包的资源（js css）
            // template 自定义设置入口html filename 自定义文件名
            new HtmlWebpackPlugin({
               template: './src/index.html',
               filename: 'index.html',
               minify: {
                   collapseWhitespace: true, //html打包去除空格
                   removeComments: true // 移除注释
               },
               chunks:['one'], //指定引用的js
            })                   
        ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

• 第四个就是purgecss-webpack-plugin移除多余没有使用的css样式代码

安装命令：

yarn add -D purgecss-webpack-plugin  或  npm install purgecss-webpack-plugin -save -dev
1

在项目中引用：

//用于生产环境去除多余的css
const PurgecssPlugin = require("purgecss-webpack-plugin")

//去掉不用的css 多余的css
    plugins.push(
      new PurgecssPlugin({
        paths: glob.sync([path.join(__dirname, "./**/*.vue")]),
        extractors: [
          {
            extractor: class Extractor {
              static extract(content) {
                const validSection = content.replace(
                  /+/gim,
                  ""
                );
                return validSection.match(/[A-Za-z0-9-_:/]+/g) || [];
              }
            },
            extensions: ["html", "vue"]
          }
        ],
        whitelist: ["html", "body"],
        whitelistPatterns: [/el-.*/],
        whitelistPatternsChildren: [/^token/, /^pre/, /^code/]
      })
    );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

• 第五个就是mini-css-extract-plugin它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。它支持CSS和SourceMaps的按需加载。

安装命令：

yarn add -D mini-css-extract-plugin  或    npm install --save-dev mini-css-extract-plugin
1

项目中应用：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins.push(
        new MiniCssExtractPlugin({
            linkType: "text/css",
        })
      )
//这里我也使用了默认配置

1
2
3
4
5
6
7
8
9