原文链接: https://interview.poetries.top/days/%E6%AF%8F%E6%97%A5%E4%B8%80%E9%A2%98.html

第180题 webpack性能优化-构建速度

先分析遇到哪些问题,在配合下面的方法优化,不要上来就回答,让人觉得背面试题

  • 优化babel-loader缓存
  • IgnorePlugin 忽略某些包,避免引入无用模块(直接不引入,需要在代码中引入)
  • noParse 避免重复打包(引入但不打包)
  • happyPack多线程打包
    • JS单线程的,开启多进程打包
    • 提高构建速度(特别是多核CPU)
  • parallelUglifyPlugin多进程压缩JS
    • 关于多进程
      • 项目较大,打包较慢,开启多进程能提高速度
      • 项目较小,打包很快,开启多进程反而会降低速度(进程开销)
      • 按需使用
  • 自动刷新(开发环境)
  • 热更新(开发环境)
    • 自动刷新:整个网页全部刷新,速度较慢,状态会丢失
    • 热更新:新代码生效,网页不刷新,状态不丢失
  • DllPlugin 动态链接库(dllPlugin只适用于开发环境,因为生产环境下打包一次就完了,没有必要用于生产环境)
    • 前端框架如reactvue体积大,构建慢
    • 较稳定,不常升级版本,同一个版本只构建一次,不用每次都重新构建
    • webpack已内置DllPlugin,不需要安装
    • DllPlugin打包出dll文件
    • DllReferencePlugin引用dll文件

优化babel-loader

IgnorePlugin

  • import moment from 'moment'
  • 默认会引入所有语言JS代码,代码过大
    import moment from 'moment'
    moment.locale('zh-cn') // 设置语言为中文
    
    // 手动引入中文语言包
    import 'moment/locale/zh-cn'
    // webpack.prod.js
    pluins: [
        // 忽略 moment 下的 /locale 目录
        new webpack.IgnorePlugin(/\.\/locale/, /moment/),
    ]

noParse

happyPack

    // webpack.prod.js
    const HappyPack = require('happypack')
    
    {
        module: {
            rules: [
                // js
                {
                    test: /\.js$/,
                    // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
                    use: ['happypack/loader?id=babel'],
                    include: srcPath,
                    // exclude: /node_modules/
                },
            ]
        },
        plugins: [
          // happyPack 开启多进程打包
          new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
            id: 'babel',
            // 如何处理 .js 文件,用法和 Loader 配置中一样
            loaders: ['babel-loader?cacheDirectory']
          }),
        ]
    }

parallelUglifyPlugin

    // webpack.prod.js
    const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
    
    {
        plugins: [
            // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
            new ParallelUglifyPlugin({
                // 传递给 UglifyJS 的参数
                // (还是使用 UglifyJS 压缩,只不过帮助开启了多进程)
                uglifyJS: {
                    output: {
                        beautify: false, // 最紧凑的输出
                        comments: false, // 删除所有的注释
                    },
                    compress: {
                        // 删除所有的 `console` 语句,可以兼容ie浏览器
                        drop_console: true,
                        // 内嵌定义了但是只用到一次的变量
                        collapse_vars: true,
                        // 提取出出现多次但是没有定义成变量去引用的静态值
                        reduce_vars: true,
                    }
                }
            })
        ]
    }

自动刷新

使用dev-server即可

热更新

    // webpack.dev.js
    const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
    
    entry: {
        // index: path.join(srcPath, 'index.js'),
        index: [
            'webpack-dev-server/client?http://localhost:8080/',
            'webpack/hot/dev-server',
            path.join(srcPath, 'index.js')
        ],
        other: path.join(srcPath, 'other.js')
    },
    devServer: {
        hot: true
    },
    plugins: [
        new HotModuleReplacementPlugin()
    ],
    // 代码中index.js
    
    // 增加,开启热更新之后的代码逻辑
    if (module.hot) {
        // 注册哪些模块需要热更新
        module.hot.accept(['./math'], () => {
            const sumRes = sum(10, 30)
            console.log('sumRes in hot', sumRes)
        })
    }

优化打包速度完整代码

    // webpack.common.js
    
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const { srcPath, distPath } = require('./paths')
    
    module.exports = {
        entry: {
            index: path.join(srcPath, 'index.js'),
            other: path.join(srcPath, 'other.js')
        },
        module: {
            rules: [
                // babel-loader
            ]
        },
        plugins: [
            // new HtmlWebpackPlugin({
            //     template: path.join(srcPath, 'index.html'),
            //     filename: 'index.html'
            // })
    
            // 多入口 - 生成 index.html
            new HtmlWebpackPlugin({
                template: path.join(srcPath, 'index.html'),
                filename: 'index.html',
                // chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
                chunks: ['index', 'vendor', 'common']  // 要考虑代码分割
            }),
            // 多入口 - 生成 other.html
            new HtmlWebpackPlugin({
                template: path.join(srcPath, 'other.html'),
                filename: 'other.html',
                chunks: ['other', 'vendor', 'common']  // 考虑代码分割
            })
        ]
    }
    // webpack.dev.js
    const path = require('path')
    const webpack = require('webpack')
    const webpackCommonConf = require('./webpack.common.js')
    const { smart } = require('webpack-merge')
    const { srcPath, distPath } = require('./paths')
    const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
    
    module.exports = smart(webpackCommonConf, {
        mode: 'development',
        entry: {
            // index: path.join(srcPath, 'index.js'),
            index: [
                'webpack-dev-server/client?http://localhost:8080/',
                'webpack/hot/dev-server',
                path.join(srcPath, 'index.js')
            ],
            other: path.join(srcPath, 'other.js')
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: ['babel-loader?cacheDirectory'],
                    include: srcPath,
                    // exclude: /node_modules/
                },
                // 直接引入图片 url
                {
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: 'file-loader'
                },
                // {
                //     test: /\.css$/,
                //     // loader 的执行顺序是:从后往前
                //     loader: ['style-loader', 'css-loader']
                // },
                {
                    test: /\.css$/,
                    // loader 的执行顺序是:从后往前
                    loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
                },
                {
                    test: /\.less$/,
                    // 增加 'less-loader' ,注意顺序
                    loader: ['style-loader', 'css-loader', 'less-loader']
                }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                // window.ENV = 'production'
                ENV: JSON.stringify('development')
            }),
            new HotModuleReplacementPlugin()
        ],
        devServer: {
            port: 8080,
            progress: true,  // 显示打包的进度条
            contentBase: distPath,  // 根目录
            open: true,  // 自动打开浏览器
            compress: true,  // 启动 gzip 压缩
    
            hot: true,
    
            // 设置代理
            proxy: {
                // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
                '/api': 'http://localhost:3000',
    
                // 将本地 /api2/xxx 代理到 localhost:3000/xxx
                '/api2': {
                    target: 'http://localhost:3000',
                    pathRewrite: {
                        '/api2': ''
                    }
                }
            }
        },
        // watch: true, // 开启监听,默认为 false
        // watchOptions: {
        //     ignored: /node_modules/, // 忽略哪些
        //     // 监听到变化发生后会等300ms再去执行动作,防止文件更新太快导致重新编译频率太高
        //     // 默认为 300ms
        //     aggregateTimeout: 300,
        //     // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
        //     // 默认每隔1000毫秒询问一次
        //     poll: 1000
        // }
    })
    // webpack.prod.js
    const path = require('path')
    const webpack = require('webpack')
    const { smart } = require('webpack-merge')
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    const TerserJSPlugin = require('terser-webpack-plugin')
    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    const HappyPack = require('happypack')
    const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
    const webpackCommonConf = require('./webpack.common.js')
    const { srcPath, distPath } = require('./paths')
    
    module.exports = smart(webpackCommonConf, {
        mode: 'production',
        output: {
            // filename: 'bundle.[contentHash:8].js',  // 打包代码时,加上 hash 戳
            filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
            path: distPath,
            // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到
        },
        module: {
            rules: [
                // js
                {
                    test: /\.js$/,
                    // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
                    use: ['happypack/loader?id=babel'],
                    include: srcPath,
                    // exclude: /node_modules/
                },
                // 图片 - 考虑 base64 编码的情况
                {
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            // 小于 5kb 的图片用 base64 格式产出
                            // 否则,依然延用 file-loader 的形式,产出 url 格式
                            limit: 5 * 1024,
    
                            // 打包到 img 目录下
                            outputPath: '/img1/',
    
                            // 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)
                            // publicPath: 'http://cdn.abc.com'
                        }
                    }
                },
                // 抽离 css
                {
                    test: /\.css$/,
                    loader: [
                        MiniCssExtractPlugin.loader,  // 注意,这里不再用 style-loader
                        'css-loader',
                        'postcss-loader'
                    ]
                },
                // 抽离 less
                {
                    test: /\.less$/,
                    loader: [
                        MiniCssExtractPlugin.loader,  // 注意,这里不再用 style-loader
                        'css-loader',
                        'less-loader',
                        'postcss-loader'
                    ]
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
            new webpack.DefinePlugin({
                // window.ENV = 'production'
                ENV: JSON.stringify('production')
            }),
    
            // 抽离 css 文件
            new MiniCssExtractPlugin({
                filename: 'css/main.[contentHash:8].css'
            }),
    
            // 忽略 moment 下的 /locale 目录
            new webpack.IgnorePlugin(/\.\/locale/, /moment/),
    
            // happyPack 开启多进程打包
            new HappyPack({
                // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
                id: 'babel',
                // 如何处理 .js 文件,用法和 Loader 配置中一样
                loaders: ['babel-loader?cacheDirectory']
            }),
    
            // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
            new ParallelUglifyPlugin({
                // 传递给 UglifyJS 的参数
                // (还是使用 UglifyJS 压缩,只不过帮助开启了多进程)
                uglifyJS: {
                    output: {
                        beautify: false, // 最紧凑的输出
                        comments: false, // 删除所有的注释
                    },
                    compress: {
                        // 删除所有的 `console` 语句,可以兼容ie浏览器
                        drop_console: true,
                        // 内嵌定义了但是只用到一次的变量
                        collapse_vars: true,
                        // 提取出出现多次但是没有定义成变量去引用的静态值
                        reduce_vars: true,
                    }
                }
            })
        ],
    
        optimization: {
            // 压缩 css
            minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    
            // 分割代码块
            splitChunks: {
                chunks: 'all',
                /**
                 * initial 入口chunk,对于异步导入的文件不处理
                    async 异步chunk,只对异步导入的文件处理
                    all 全部chunk
                 */
    
                // 缓存分组
                cacheGroups: {
                    // 第三方模块
                    vendor: {
                        name: 'vendor', // chunk 名称
                        priority: 1, // 权限更高,优先抽离,重要!!!
                        test: /node_modules/,
                        minSize: 0,  // 大小限制
                        minChunks: 1  // 最少复用过几次
                    },
    
                    // 公共的模块
                    common: {
                        name: 'common', // chunk 名称
                        priority: 0, // 优先级
                        minSize: 0,  // 公共模块的大小限制
                        minChunks: 2  // 公共模块最少复用过几次
                    }
                }
            }
        }
    })

DllPlugin 动态链接库

    // webpack.common.js
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const { srcPath, distPath } = require('./paths')
    
    module.exports = {
        entry: path.join(srcPath, 'index'),
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['babel-loader'],
                    include: srcPath,
                    exclude: /node_modules/
                },
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.join(srcPath, 'index.html'),
                filename: 'index.html'
            })
        ]
    }
    // webpack.dev.js
    const path = require('path')
    const webpack = require('webpack')
    const { merge } = require('webpack-merge')
    const webpackCommonConf = require('./webpack.common.js')
    const { srcPath, distPath } = require('./paths')
    
    // 第一,引入 DllReferencePlugin
    const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
    
    module.exports = merge(webpackCommonConf, {
        mode: 'development',
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['babel-loader'],
                    include: srcPath,
                    exclude: /node_modules/ // 第二,不要再转换 node_modules 的代码
                },
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                // window.ENV = 'production'
                ENV: JSON.stringify('development')
            }),
            // 第三,告诉 Webpack 使用了哪些动态链接库
            new DllReferencePlugin({
                // 描述 react 动态链接库的文件内容
                manifest: require(path.join(distPath, 'react.manifest.json')),
            }),
        ],
        devServer: {
            port: 8080,
            progress: true,  // 显示打包的进度条
            contentBase: distPath,  // 根目录
            open: true,  // 自动打开浏览器
            compress: true,  // 启动 gzip 压缩
    
            // 设置代理
            proxy: {
                // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
                '/api': 'http://localhost:3000',
    
                // 将本地 /api2/xxx 代理到 localhost:3000/xxx
                '/api2': {
                    target: 'http://localhost:3000',
                    pathRewrite: {
                        '/api2': ''
                    }
                }
            }
        }
    })
    // webpack.prod.js
    const path = require('path')
    const webpack = require('webpack')
    const webpackCommonConf = require('./webpack.common.js')
    const { merge } = require('webpack-merge')
    const { srcPath, distPath } = require('./paths')
    
    module.exports = merge(webpackCommonConf, {
        mode: 'production',
        output: {
            filename: 'bundle.[contenthash:8].js',  // 打包代码时,加上 hash 戳
            path: distPath,
            // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到
        },
        plugins: [
            new webpack.DefinePlugin({
                // window.ENV = 'production'
                ENV: JSON.stringify('production')
            })
        ]
    })
    // webpack.dll.js
    
    const path = require('path')
    const DllPlugin = require('webpack/lib/DllPlugin')
    const { srcPath, distPath } = require('./paths')
    
    module.exports = {
      mode: 'development',
      // JS 执行入口文件
      entry: {
        // 把 React 相关模块的放到一个单独的动态链接库
        react: ['react', 'react-dom']
      },
      output: {
        // 输出的动态链接库的文件名称,[name] 代表当前动态链接库的名称,
        // 也就是 entry 中配置的 react 和 polyfill
        filename: '[name].dll.js',
        // 输出的文件都放到 dist 目录下
        path: distPath,
        // 存放动态链接库的全局变量名称,例如对应 react 来说就是 _dll_react
        // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
        library: '_dll_[name]',
      },
      plugins: [
        // 接入 DllPlugin
        new DllPlugin({
          // 动态链接库的全局变量名称,需要和 output.library 中保持一致
          // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
          // 例如 react.manifest.json 中就有 "name": "_dll_react"
          name: '_dll_[name]',
          // 描述动态链接库的 manifest.json 文件输出时的文件名称
          path: path.join(distPath, '[name].manifest.json'),
        }),
      ],
    }
      "scripts": {
        "dev": "webpack serve --config build/webpack.dev.js",
        "dll": "webpack --config build/webpack.dll.js"
      },

第179题 webpack性能优化-产出代码(线上运行)

前言

  • 体积更小
  • 合理分包,不重复加载
  • 速度更快、内存使用更少

产出代码优化

  • 小图片base64编码,减少http请求
        // 图片 - 考虑 base64 编码的情况
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则,依然延用 file-loader 的形式,产出 url 格式
                        limit: 5 * 1024,
    
                        // 打包到 img 目录下
                        outputPath: '/img1/',
    
                        // 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]
    }
  • bundlecontenthash,有利于浏览器缓存
  • 懒加载import()语法,减少首屏加载时间
  • 提取公共代码(第三方代码VueReactloadash等)没有必要多次打包,可以提取到vendor
  • IgnorePlugin忽略不需要的包(如moment多语言),减少打包的代码
  • 使用CDN加速,减少资源加载时间
        output: {
      filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
      path: path.join(__dirname, '..', 'dist'),
      // 修改所有静态文件 url 的前缀(如 cdn 域名)
      // 这样index.html中引入的js、css、图片等资源都会加上这个前缀
      publicPath: 'http://cdn.abc.com'  
    },
  • webpack使用production模式,mode: 'production'
    • 自动压缩代码
    • 启动Tree Shaking
      • ES6模块化,importexportwebpack会自动识别,才会生效
      • Commonjs模块化,requiremodule.exportswebpack无法识别,不会生效
      • ES6模块和Commonjs模块区别
        • ES6模块是静态引入,编译时引入
        • Commonjs是动态引入,执行时引入
        • 只有ES6 Module才能静态分析,实现Tree Shaking
  • Scope Hoisting:是webpack3引入的一个新特性,它会分析出模块之间的依赖关系,尽可能地把打散的模块合并到一个函数中去,减少代码间的引用,从而减少代码体积
    • 减少代码体积
    • 创建函数作用域更少
    • 代码可读性更好

第178题 获取当前页面URL参数

    // 传统方式
    function query(name) {
      // search: '?a=10&b=20&c=30'
      const search = location.search.substr(1) // 去掉前面的? 类似 array.slice(1)
      const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
      const res = search.match(reg)
      if (res === null) {
        return null
      }
      return res[2]
    }
    query('a') // 10
    // 使用URLSearchParams方式
    function query(name) {
      const search = location.search
      const p = new URLSearchParams(search)
      return p.get(name)
    }
    console.log( query('b') ) // 20

将URL参数解析为JSON对象

    // 传统方式,分析search
    function queryToObj() {
      const res = {}
      // search: '?a=10&b=20&c=30'
      const search = location.search.substr(1) // 去掉前面的?
      search.split('&').forEach(paramStr=>{
        const arr = paramStr.split('=')
        const key = arr[0]
        const val = arr[1]
        res[key] = val
      })
      return res
    }
    // 使用URLSearchParams方式
    function queryToObj() {
      const res = {}
      const pList = new URLSearchParams(location.search)
      pList.forEach((val,key)=>{
        res[key] = val
      })
      return res
    }

第177题 手写深度比较lodash.isEqual

    // 实现如下效果
    const obj1 = {
      a: 100,
      b: {
        x: 100,
        y: 200
      }
    }
    const obj2 = {
      a: 100,
      b: {
        x: 100,
        y: 200
      }
    }
    
    isEqual(obj1, obj2) === true
    // 实现
    
    // 判断是否是对象或数组
    function isObject(obj) {
      return typeof obj === 'object' && obj !== null
    }
    // 全相等(深度)
    function isEqual(obj1, obj2) {
      if (!isObject(obj1) || !isObject(obj2)) {
        // 值类型(注意,参与 equal 的一般不会是函数)
        return obj1 === obj2
      }
      if (obj1 === obj2) {
        return true
      }
      // 两个都是对象或数组,而且不相等
      // 1. 先取出 obj1 和 obj2 的 keys ,比较个数
      const obj1Keys = Object.keys(obj1)
      const obj2Keys = Object.keys(obj2)
      if (obj1Keys.length !== obj2Keys.length) {
        return false
      }
      // 2. 以 obj1 为基准,和 obj2 一次递归比较
      for (let key in obj1) {
        // 比较当前 key 的 val —— 递归!!!
        const res = isEqual(obj1[key], obj2[key])
        if (!res) {
          return false
        }
      }
      // 3. 全相等
      return true
    }
    // 测试
    const obj1 = {
      a: 100,
      b: {
        x: 100,
        y: 200
      }
    }
    const obj2 = {
      a: 100,
      b: {
        x: 100,
        y: 200
      }
    }
    
    console.log( isEqual(obj1, obj2) ) // true
    
    const arr1 = [1, 2, 3]
    const arr2 = [1, 2, 3, 4]
    console.log( isEqual(arr1, arr2) ) // false

第176题 常见的web前端攻击方式有哪些

  • XSS跨站请求攻击
    • 例子
      • 一个博客网站,我发表了一篇博客,其中嵌入<script>脚本
      • 脚本内容:获取cookie,发送到我的服务器(服务器配合跨域)
      • 发表这篇博客,有人查看它,我轻松拿到访问者的cookie
                <p>一段文字1</p>
        <p>一段文字2</p>
        <p>一段文字3</p>
        <!-- 获取cookie -->
        <script>alert(document.cookie)</script>
        <!-- 转义HTML -->
        &lt;script&gt;alert(document.cookie);&lt;/script&gt;
* **预防**
  * 替换特殊字符,如`<`变为`&lt;`,`>`变为`t&gt;`
  * `script`变为`&lt;script&gt;`,直接显示,而不会作为脚本执行
  * 前端要替换字符,后端也要替换字符,使用[xxs (opens new window)](https://npmjs.com/packages/xss)库处理即可
  • CSRF跨站请求伪造
    • 例子
      • 你正在购物,看中了某个商品,商品id100(此时我已经登录了网站cookie记录在本地)
      • 付费接口是xx.com/pay?id=100,但没有任何验证
      • 我是攻击者,我看中的商品id=200
      • 我向你发送一封电子邮件,标题很吸引人
      • 但邮件正文隐藏着<img src="xx.com/pay?id=200" />
      • 你一查看邮件,就帮我买了id=200的商品
      • 什么会这样?
        • 我登录了网站,记录用户信息cookie在本地
        • img标签支持跨域向xx.com/pay?id=200发送请求,会携带本地的cookie
        • 注意CSRF拿不到用户的cookie,只是借用了cookie
    • 预防
      • 使用POST接口
      • 增加验证,如支付密码、短信验证码、指纹等

第175题 前端性能优化

前言

  • 是一个综合性问题,没有标准答案,但要求尽量全面
  • 某些细节可能会问:防抖、节流等

性能优化原则

  • 多使用内存、缓存或其他方法
  • 减少CPU计算量,减少网络加载耗时

从何入手

  • 让加载更快
    • 减少资源体积:压缩代码
    • 减少访问次数:合并代码,SSR服务端渲染,缓存
      • SSR
        • 服务端渲染:将网页和数据一起加载,一起渲染
        • SSR模式(前后端分离):先加载网页,在加载数据,在渲染数据
      • 缓存
        • 静态资源加hash后缀,根据文件内容计算hash
        • 文件内容不变,则hash不变,则url不变
        • url和文件不变,则会自动触发http缓存机制,返回304
    • 减少请求时间:DNS预解析,CDNHTTP2
      • DNS预解析
        • DNS解析:将域名解析为IP地址
        • DNS预解析:提前解析域名,将域名解析为IP地址
        • DNS预解析的方式:<link rel="dns-prefetch" href="//www.baidu.com">
      • CDN
        • CDN:内容分发网络,将资源分发到离用户最近的服务器上
        • CDN的优点:加快资源加载速度,减少服务器压力
        • CDN的缺点:增加了网络延迟,增加了服务器成本
      • HTTP2
        • HTTP2HTTP协议的下一代版本
        • HTTP2的优点:多路复用,二进制分帧,头部压缩,服务器推送
  • 让渲染更快
    • CSS放在headJS放在body下面
    • 尽早开始执行JS,用DOMContentLoaded触发
        window.addEventListener('load',function() {
      // 页面的全部资源加载完才会执行,包括图片、视频等
    })
    window.addEventListener('DOMContentLoaded',function() {
      // DOM渲染完才执行,此时图片、视频等可能还没有加载完
    })
* 懒加载(图片懒加载,上滑加载更多) ![](/images/s_poetries_work_uploads_2023_02_8f0de9086d90c75c.png)
* 对`DOM`查询进行缓存 ![](/images/s_poetries_work_uploads_2023_02_93d7e1f458b5b1a1.png)
* 频繁`DOM`操作,合并到一起插入到`DOM`结构 ![](/images/s_poetries_work_uploads_2023_02_5b7fc06e1aef4c9f.png)
* 节流、防抖,让渲染更流畅 
  * **防抖**
    * 防抖动是将多次执行变为`最后一次执行`
    * 适用于:`input`、`click`等
                        const input = document.getElementById('input')
            // 防抖
            function debounce(fn, delay = 500) {
              // timer 是闭包中的
              let timer = null
              // 这里返回的函数是每次用户实际调用的防抖函数
              // 如果已经设定过定时器了就清空上一次的定时器
              // 开始一个新的定时器,延迟执行用户传入的方法
              return function () {
                if (timer) {
                  clearTimeout(timer)
                }
                timer = setTimeout(() => {
                  fn.apply(this, arguments)
                  timer = null
                }, delay)
              }
            }
            input.addEventListener('keyup', debounce(function (e) {
              console.log(e.target)
              console.log(input.value)
            }, 600))
  * **节流**
    * 节流是将多次执行变成`每隔一段时间执行`
    * 适用于:`resize`、`scroll`、`mousemove`等
                        const div = document.getElementById('div')
            // 节流
            function throttle(fn, delay = 100) {
              let timer = null
            
              return function () {
                if (timer) { // 当前有任务了,直接返回
                  return
                }
                timer = setTimeout(() => {
                  fn.apply(this, arguments)
                  timer = null
                }, delay)
              }
            }
            // 拖拽
            div.addEventListener('drag', throttle(function (e) {
                console.log(e.offsetX, e.offsetY)
            }))

第174题 HTTP面试题总结

HTTP状态码

  • 1XX:信息状态码
    • 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
  • 2XX:成功状态码
    • 200 OK 正常返回信息
    • 201 Created 请求成功并且服务器创建了新的资源
    • 202 Accepted 服务器已接受请求,但尚未处理
  • 3XX:重定向
    • 301 Moved Permanently 请求的网页已永久移动到新位置。
    • 302 Found 临时性重定向。
    • 303 See Other 临时性重定向,且总是使用 GET 请求新的 URI
    • 304 Not Modified 自从上次请求后,请求的网页未修改过。
  • 4XX:客户端错误
    • 400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
    • 401 Unauthorized 请求未授权。
    • 403 Forbidden 禁止访问。
    • 404 Not Found 找不到如何与 URI 相匹配的资源。
  • 5XX: 服务器错误
    • 500 Internal Server Error 最常见的服务器端错误。
    • 503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

常见状态码

  • 200 成功
  • 301 永久重定向(配合location,浏览器自动处理)
  • 302 临时重定向(配合location,浏览器自动处理)
  • 304 资源未被修改
  • 403 没有权限访问,一般做权限角色
  • 404 资源未找到
  • 500 Internal Server Error服务器内部错误
  • 502 Bad Gateway
  • 503 Service Unavailable
  • 504 Gateway Timeout网关超时

502 与 504 的区别

这两种异常状态码都与网关 Gateway 有关,首先明确两个概念

  • Proxy (Gateway),反向代理层或者网关层。在公司级应用中一般使用 Nginx 扮演这个角色
  • Application (Upstream server),应用层服务,作为 Proxy 层的上游服务。在公司中一般为各种语言编写的服务器应用,如 Go/Java/Python/PHP/Node
  • 此时关于 502 与 504 的区别就很显而易见
    • 502 Bad Gateway:一般表现为你自己写的「应用层服务(Java/Go/PHP)挂了」,或者网关指定的上游服务直接指错了地址,网关层无法接收到响应
    • 504 Gateway Timeout:一般表现为「应用层服务 (Upstream) 超时,超过了 Gatway 配置的 Timeout」,如查库操作耗时三分钟,超过了 Nginx 配置的超时时间

http headers

  • 常见的Request Headers
    • Accept 浏览器可接收的数据格式
    • Accept-Enconding 浏览器可接收的压缩算法,如gzip
    • Accept-Language 浏览器可接收的语言,如zh-CN
    • Connection:keep-alive 一次TCP连接重复复用
    • Cookie
    • Host 请求的域名是什么
    • User-Agent(简称UA) 浏览器信息
    • Content-type 发送数据的格式,如application/json
  • 常见的Response Headers
    • Content-type 返回数据的格式,如application/json
    • Content-length 返回数据的大小,多少字节
    • Content-Encoding 返回数据的压缩算法,如gzip
    • set-cookie
  • 缓存相关的Headers
    • Cache ControlExpired
    • Last-ModifiedIf-Modified-Since
    • EtagIf-None-Match

HTTP缓存

  • 关于缓存介绍
    • 为什么需要缓存?减少网络请求(网络请求不稳定性),让页面渲染更快
    • 哪些资源可以被缓存?静态资源(js css imgwebpack打包加contenthash根据内容生成hash
  • http缓存策略 (强制缓存 + 协商缓存)
    • 强制缓存
      • 服务端在Response Headers中返回给客户端
      • Cache-Controlmax-age=31536000(单位:秒)一年
      • Cache-Control的值
        • max-age(常用)缓存的内容将在max-age秒后失效
        • no-cache(常用)不要本地强制缓存,正常向服务端请求(只要服务端最新的内容)。需要使用协商缓存来验证缓存数据(Etag Last-Modified
        • no-store 不要本地强制缓存,也不要服务端做缓存,所有内容都不会缓存,强制缓存和协商缓存都不会触发
        • public 所有内容都将被缓存(客户端和代理服务器都可缓存)
        • private 所有内容只有客户端可以缓存
      • Expires
        • ExpiresThu, 31 Dec 2037 23:55:55 GMT(过期时间)
        • 已被Cache-Control代替
      • Expires和Cache-Control的区别
        • ExpiresHTTP1.0的产物,Cache-ControlHTTP1.1的产物
        • Expires是服务器返回的具体过期时间,Cache-Control是相对时间
        • Expires存在兼容性问题,Cache-Control优先级更高
      • 强制缓存的优先级高于协商缓存
      • 强制缓存的流程
        • 浏览器第一次请求资源,服务器返回资源和Cache-Control Expires
        • 浏览器第二次请求资源,会带上Cache-Control Expires,服务器根据这两个值判断是否命中强制缓存
        • 命中强制缓存,直接从缓存中读取资源,返回给浏览器
        • 未命中强制缓存,会带上If-Modified-Since If-None-Match,服务器根据这两个值判断是否命中协商缓存
        • 命中协商缓存,返回304,浏览器直接从缓存中读取资源
        • 未命中协商缓存,返回200,浏览器重新请求资源
      • 强制缓存的流程图
    • 协商缓存
      • 服务端缓存策略
      • 服务端判断客户端资源,是否和服务端资源一样
      • 如果判断一致则返回304(不在返回js、图片内容等资源),否则返回200和最新资源
      • 服务端怎么判断客户端资源一样? 根据资源标识
        • Response Headers中,有两种
        • Last-ModifiedEtag会优先使用EtagLast-Modified只能精确到秒级,如果资源被重复生成而内容不变,则Etag更准确
        • Last-Modified 服务端返回的资源的最后修改时间
          • If-Modified-Since 客户端请求时,携带的资源的最后修改时间(即Last-Modified的值)
        • Etag服务端返回的资源的唯一标识(一个字符串,类似指纹)
          • If-None-Matche 客户端请求时,携带的资源的唯一标识(即Etag的值)
        • Headers示例
        • 请求示例 通过EtagLast-Modified命中缓存,没有返回资源,返回304,体积非常小
    • HTTP缓存总结
  • 刷新操作方式,对缓存的影响
    • 正常操作:地址栏输入url,跳转链接,前进后退
    • 手动操作:F5,点击刷新,右键菜单刷新
    • 强制刷新:ctrl + F5command + r
  • 不同刷新操作,不同缓存策略
    • 正常操作:强缓存有效,协商缓存有效
    • 手动操作:强缓存失效,协商缓存有效
    • 强制刷新:强缓存失效,协商缓存失效
  • 小结
    • 强缓存Cache-ContorlExpired(弃用)
    • 协商缓存Last-Modified/If-Modified-SinceEtag/If-None-Matche304状态码
    • 完整流程图

从输入URL到显示出页面的整个过程

  • 下载资源 :各个资源类型,下载过程
  • 加载过程
    • DNS解析:域名 => IP地址
    • 浏览器根据IP地址向服务器发起HTTP请求
    • 服务器处理HTTP请求,并返回浏览器
  • 渲染过程
    • 根据HTML生成DOM Tree
    • 根据CSS生成CSSOM
    • DOM TreeCSSOM整合形成Render Tree,根据Render Tree渲染页面
    • 遇到<script>暂停渲染,优先加载并执行JS代码,执行完在解析渲染(JS线程和渲染线程共用一个线程,JS执行要暂停DOM渲染)
    • 直至把Render Tree渲染完成

window.onload和DOMContentLoaded

  • window.onload 页面的全部资源加载完才会执行,包括图片、视频等
  • DOMContentLoaded 渲染完即可,图片可能尚未下载
    window.addEventListener('load',function() {
      // 页面的全部资源加载完才会执行,包括图片、视频等
    })
    window.addEventListener('DOMContentLoaded',function() {
      // DOM渲染完才执行,此时图片、视频等可能还没有加载完
    })

演示

    <p>一段文字 1</p>
    <p>一段文字 2</p>
    <p>一段文字 3</p>
    <img
        id="img1"
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570191150419&di=37b1892665fc74806306ce7f9c3f1971&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1411%2F13%2Fc14%2F26229_1415883419758.jpg"
    />
    
    <script>
      const img1 = document.getElementById('img1')
      img1.onload = function () {
        console.log('img loaded')
      }
    
      window.addEventListener('load', function () {
        console.log('window loaded')
      })
    
      document.addEventListener('DOMContentLoaded', function () {
        console.log('dom content loaded')
      })
    
      // 结果
      // dom content loaded
      // img loaded
      // window loaded
    </script>

拓展:关于Restful API

  • 一种新的API设计方法
  • 传统API设计:把每个url当做一个功能
  • Restful API设计:把每个url当前一个唯一的资源
    • 如何设计成一个资源
      • 尽量不用url参数
        • 传统API设计:/api/list?pageIndex=2
        • Restful API设计:/api/list/2
      • method表示操作类型
        • 传统API设计:
          • post新增请求:/api/create-blog
          • post更新请求:/api/update-blog?id=100
          • post删除请求:/api/delete-blog?id=100
          • get请求:/api/get-blog?id=100
        • Restful API设计:
          • post新增请求:/api/blog
          • patch更新请求:/api/blog/100
          • delete删除请求:/api/blog/100
          • get请求:/api/blog/100

第173题 DOM和事件操作总结

DOM节点操作

    const div1 = document.getElementById('div1')
    console.log('div1', div1)
    
    const divList = document.getElementsByTagName('div') // 集合
    console.log('divList.length', divList.length)
    console.log('divList[1]', divList[1])
    
    const containerList = document.getElementsByClassName('container') // 集合
    console.log('containerList.length', containerList.length)
    console.log('containerList[1]', containerList[1])
    
    const pList = document.querySelectorAll('p')
    console.log('pList', pList)
    
    const pList = document.querySelectorAll('p')
    const p1 = pList[0]
    
    // property 形式
    p1.style.width = '100px'
    console.log( p1.style.width )
    p1.className = 'red'
    console.log( p1.className )
    console.log(p1.nodeName)
    console.log(p1.nodeType) // 1
    
    // attribute
    p1.setAttribute('data-name', 'imooc')
    console.log( p1.getAttribute('data-name') )
    p1.setAttribute('style', 'font-size: 50px;')
    console.log( p1.getAttribute('style') )

propery和attribute

  • propery:修改对象属性,不会体现到HTML结构中
  • attribute:修改HTML属性,会改变HTML结构

DOM结构操作

    const div1 = document.getElementById('div1')
    const div2 = document.getElementById('div2')
    
    // 新建节点
    const newP = document.createElement('p')
    newP.innerHTML = 'this is newP'
    // 插入节点
    div1.appendChild(newP)
    
    // 移动节点
    const p1 = document.getElementById('p1')
    div2.appendChild(p1)
    
    // 获取父元素
    console.log( p1.parentNode )
    
    // 获取子元素列表
    const div1ChildNodes = div1.childNodes
    console.log( div1.childNodes )
    const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
      if (child.nodeType === 1) {
        return true
      }
      return false
    })
    console.log('div1ChildNodesP', div1ChildNodesP)
    
    div1.removeChild( div1ChildNodesP[0] )

DOM性能

    // 将频繁操作改为一次性操作
    
    const list = document.getElementById('list')
    
    // 创建一个文档片段,此时还没有插入到 DOM 结构中
    const frag = document.createDocumentFragment()
    
    for (let i  = 0; i < 20; i++) {
      const li = document.createElement('li')
      li.innerHTML = `List item ${i}`
    
      // 先插入文档片段中
      frag.appendChild(li)
    }
    
    // 都完成之后,再统一插入到 DOM 结构中
    list.appendChild(frag)
    
    console.log(list)

事件

    // 通用的事件绑定函数
    // function bindEvent(elem, type, fn) {
    //   elem.addEventListener(type, fn)
    // }
    function bindEvent(elem, type, selector, fn) {
      if (fn == null) {
        fn = selector
        selector = null
      }
      elem.addEventListener(type, event => {
        const target = event.target
        if (selector) {
          // 代理绑定
          if (target.matches(selector)) {
            fn.call(target, event)
          }
        } else {
          // 普通绑定
          fn.call(target, event)
        }
      })
    }
    
    // 普通绑定
    const btn1 = document.getElementById('btn1')
    bindEvent(btn1, 'click', function (event) {
      // console.log(event.target) // 获取触发的元素
      event.preventDefault() // 阻止默认行为
      alert(this.innerHTML)
    })
    
    // 代理绑定
    const div3 = document.getElementById('div3')
    bindEvent(div3, 'click', 'a', function (event) {
      event.preventDefault()
      alert(this.innerHTML)
    })
    // 测试
    
    const p1 = document.getElementById('p1')
    bindEvent(p1, 'click', event => {
      event.stopPropagation() // 阻止冒泡
      console.log('激活')
    })
    const body = document.body
    bindEvent(body, 'click', event => {
      console.log('取消')
      // console.log(event.target)
    })
    const div2 = document.getElementById('div2')
    bindEvent(div2, 'click', event => {
      console.log('div2 clicked')
      console.log(event.target)
    })

第172题 Event Loop执行机制过程

  • 同步代码一行行放到Call Stack执行,执行完就出栈
  • 遇到异步优先记录下,等待时机(定时、网络请求)
  • 时机到了就移动到Call Queue(宏任务队列)
    • 如果遇到微任务(如promise.then)放到微任务队列
    • 宏任务队列和微任务队列是分开存放的
      • 因为微任务是ES6语法规定的
      • 宏任务(setTimeout)是浏览器规定的
  • 如果Call Stack为空,即同步代码执行完,Event Loop开始工作
    • Call Stack为空,尝试先DOM渲染,在触发下一次Event Loop
  • 轮询查找Event Loop,如有则移动到Call Stack
  • 然后继续重复以上过程(类似永动机)

DOM事件和Event Loop

DOM事件会放到Web API中等待用户点击,放到Call Queue,在移动到Call Stack执行

  • JS是单线程的,异步(setTimeoutAjax)使用回调,基于Event Loop
  • DOM事件也使用回调,DOM事件非异步,但也是基于Event Loop实现

宏任务和微任务

  • 介绍
    • 宏任务:setTimeoutsetIntervalDOM事件、Ajax
    • 微任务:Promise.thenasync/await
    • 微任务比宏任务执行的更早
        console.log(100)
    setTimeout(() => {
      console.log(200)
    })
    Promise.resolve().then(() => {
      console.log(300)
    })
    console.log(400)
    // 100 400 300 200
  • event loop 和 DOM 渲染
    • 每次call stack清空(每次轮询结束),即同步代码执行完。都是DOM重新渲染的机会,DOM结构如有改变重新渲染
    • 再次触发下一次Event Loop
        const $p1 = $('<p>一段文字</p>')
    const $p2 = $('<p>一段文字</p>')
    const $p3 = $('<p>一段文字</p>')
    $('#container')
                .append($p1)
                .append($p2)
                .append($p3)
    
    console.log('length',  $('#container').children().length )
    alert('本次 call stack 结束,DOM 结构已更新,但尚未触发渲染')
    // (alert 会阻断 js 执行,也会阻断 DOM 渲染,便于查看效果)
    // 到此,即本次 call stack 结束后(同步任务都执行完了),浏览器会自动触发渲染,不用代码干预
    
    // 另外,按照 event loop 触发 DOM 渲染时机,setTimeout 时 alert ,就能看到 DOM 渲染后的结果了
    setTimeout(function () {
      alert('setTimeout 是在下一次 Call Stack ,就能看到 DOM 渲染出来的结果了')
    })
  • 宏任务和微任务的区别
    • 宏任务:DOM 渲染后再触发,如setTimeout
    • 微任务:DOM 渲染前会触发,如Promise
        // 修改 DOM
    const $p1 = $('<p>一段文字</p>')
    const $p2 = $('<p>一段文字</p>')
    const $p3 = $('<p>一段文字</p>')
    $('#container')
        .append($p1)
        .append($p2)
        .append($p3)
    
    // 微任务:渲染之前执行(DOM 结构已更新,看不到元素还没渲染)
    // Promise.resolve().then(() => {
    //     const length = $('#container').children().length
    //     alert(`micro task ${length}`) // DOM渲染了?No
    // })
    
    // 宏任务:渲染之后执行(DOM 结构已更新,可以看到元素已经渲染)
    setTimeout(() => {
      const length = $('#container').children().length
      alert(`macro task ${length}`) // DOM渲染了?Yes
    })

再深入思考一下:为何两者会有以上区别,一个在渲染前,一个在渲染后?

  • 微任务ES 语法标准之内,JS 引擎来统一处理。即,不用浏览器有任何干预,即可一次性处理完,更快更及时。
  • 宏任务ES 语法没有,JS 引擎不处理,浏览器(或 nodejs)干预处理。

第171题 async/await异步总结

知识点总结

  • promise.then链式调用,但也是基于回调函数
  • async/await是同步语法,彻底消灭回调函数

async/await和promise的关系

  • 执行async函数,返回的是promise
    async function fn2() {
      return new Promise(() => {})
    }
    console.log( fn2() )
    
    async function fn1() {
      return 100
    }
    console.log( fn1() ) // 相当于 Promise.resolve(100)
  • await相当于promisethen
  • try catch可捕获异常,代替了promisecatch
  • await 后面跟 Promise 对象:会阻断后续代码,等待状态变为 fulfilled ,才获取结果并继续执行
  • await 后续跟非 Promise 对象:会直接返回
    (async function () {
      const p1 = new Promise(() => {})
      await p1
      console.log('p1') // 不会执行
    })()
    
    (async function () {
      const p2 = Promise.resolve(100)
      const res = await p2
      console.log(res) // 100
    })()
    
    (async function () {
      const res = await 100
      console.log(res) // 100
    })()
    
    (async function () {
      const p3 = Promise.reject('some err') // rejected状态,不会执行下面的then
      const res = await p3 // await 相当于then
      console.log(res) // 不会执行
    })()
  • try...catch 捕获 rejected 状态
    (async function () {
        const p4 = Promise.reject('some err')
        try {
          const res = await p4
          console.log(res)
        } catch (ex) {
          console.error(ex)
        }
    })()

总结来看:

  • async 封装 Promise
  • await 处理 Promise 成功
  • try...catch 处理 Promise 失败

异步本质

await 是同步写法,但本质还是异步调用。

    async function async1 () {
      console.log('async1 start')
      await async2()
      console.log('async1 end') // 关键在这一步,它相当于放在 callback 中,最后执行
      // 类似于Promise.resolve().then(()=>console.log('async1 end'))
    }
    
    async function async2 () {
      console.log('async2')
    }
    
    console.log('script start')
    async1()
    console.log('script end')
    
    // 打印
    // script start
    // async1 start
    // async2
    // script end
    // async1 end
    async function async1 () {
      console.log('async1 start') // 2
      await async2()
    
      // await后面的下面三行都是异步回调callback的内容
      console.log('async1 end') // 5 关键在这一步,它相当于放在 callback 中,最后执行
      // 类似于Promise.resolve().then(()=>console.log('async1 end'))
      await async3()
      
      // await后面的下面1行都是异步回调callback的内容
      console.log('async1 end2') // 7
    }
    
    async function async2 () {
      console.log('async2') // 3
    }
    async function async3 () {
      console.log('async3') // 6
    }
    
    console.log('script start') // 1
    async1()
    console.log('script end') // 4

即,只要遇到了 await ,后面的代码都相当于放在 callback(微任务) 里。

执行顺序问题

网上很经典的面试题

    async function async1 () {
      console.log('async1 start')
      await async2() // 这一句会同步执行,返回 Promise ,其中的 `console.log('async2')` 也会同步执行
      console.log('async1 end') // 上面有 await ,下面就变成了“异步”,类似 cakkback 的功能(微任务)
    }
    
    async function async2 () {
      console.log('async2')
    }
    
    console.log('script start')
    
    setTimeout(function () { // 异步,宏任务
      console.log('setTimeout')
    }, 0)
    
    async1()
    
    new Promise (function (resolve) { // 返回 Promise 之后,即同步执行完成,then 是异步代码
      console.log('promise1') // Promise 的函数体会立刻执行
      resolve()
    }).then (function () { // 异步,微任务
      console.log('promise2')
    })
    
    console.log('script end')
    
    // 同步代码执行完之后,屡一下现有的异步未执行的,按照顺序
    // 1. async1 函数中 await 后面的内容 —— 微任务(先注册先执行)
    // 2. setTimeout —— 宏任务(先注册先执行)
    // 3. then —— 微任务
    
    // 同步代码执行完毕(event loop - call stack被清空)
    // 执行微任务
    // 尝试DOM渲染
    // 触发event loop执行宏任务
    
    // 输出
    // script start 
    // async1 start  
    // async2
    // promise1
    // script end
    // async1 end
    // promise2
    // setTimeout

关于for...of

  • for in以及forEach都是常规的同步遍历
  • for of用于异步遍历
    // 定时算乘法
    function multi(num) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(num * num)
        }, 1000)
      })
    }
    
    // 使用 forEach ,是 1s 之后打印出所有结果,即 3 个值是一起被计算出来的
    function test1 () {
      const nums = [1, 2, 3];
      nums.forEach(async x => {
        const res = await multi(x);
        console.log(res); // 一次性打印
      })
    }
    test1();
    
    // 使用 for...of ,可以让计算挨个串行执行
    async function test2 () {
      const nums = [1, 2, 3];
      for (let x of nums) {
        // 在 for...of 循环体的内部,遇到 await 会挨个串行计算
        const res = await multi(x)
        console.log(res) // 依次打印
      }
    }
    test2()

第170题 Promise异步总结

知识点总结

  • 三种状态
    • pendingfulfilled(通过resolve触发)、rejected(通过reject触发)
    • pending => fulfilled或者pending => rejected
    • 状态变化不可逆
  • 状态的表现和变化
    • pending状态,不会触发thencatch
    • fulfilled状态会触发后续的then回调
    • rejected状态会触发后续的catch回调
  • then和catch对状态的影响(重要)
    • then正常返回fulfilled,里面有报错返回rejected
        const p1 = Promise.resolve().then(()=>{
      return 100
    })
    console.log('p1', p1) // fulfilled会触发后续then回调
    p1.then(()=>{
      console.log(123)
    }) // 打印123
    
    const p2 = Promise.resolve().then(()=>{
      throw new Error('then error')
    })
    // p2是rejected会触发后续catch回调
    p2.then(()=>{
      console.log(456)
    }).catch(err=>{
      console.log(789)
    })
    // 打印789
* `catch`正常返回`fulfilled`,里面有报错返回`rejected`
        const p1 = Promise.reject('my error').catch(()=>{
      console.log('catch error')
    })
    p1.then(()=>{
      console.log(1)
    })
    // console.log(p1) p1返回fulfilled 触发then回调
    const p2 = Promise.reject('my error').catch(()=>{
      throw new Error('catch error')
    })
    // console.log(p2) p2返回rejected 触发catch回调
    p2.then(()=>{
      console.log(2)
    }).catch(()=>{
      console.log(3)
    })

promise then和catch的链接

    // 第一题
    Promise.resolve()
    .then(()=>console.log(1))// 状态返回fulfilled
    .catch(()=>console.log(2)) // catch中没有报错,状态返回fulfilled,后面的then会执行
    .then(()=>console.log(3)) // 1,3
    // 整个执行完没有报错,状态返回fulfilled
    
    // 第二题
    Promise.resolve()
    .then(()=>{ // then中有报错 状态返回rejected,后面的catch会执行
      console.log(1)
      throw new Error('error')
    })
    .catch(()=>console.log(2)) // catch中没有报错,状态返回fulfilled,后面的then会执行
    .then(()=>console.log(3)) // 1,2,3
    // 整个执行完没有报错,状态返回fulfilled
    
    // 第三题
    Promise.resolve()
    .then(()=>{//then中有报错 状态返回rejected,后面的catch会执行
      console.log(1)
      throw new Error('error')
    })
    .catch(()=>console.log(2)) // catch中没有报错,状态返回fulfilled,后面的catch不会执行
    .catch(()=>console.log(3)) // 1,2
    // 整个执行完没有报错,状态返回fulfilled

第169题 手写Promise加载一张图片

    function loadImg(src) {
      return new Promise(
        (resolve, reject) => {
          const img = document.createElement('img')
          img.onload = () => {
              esolve(img)
          }
          img.onerror = () => {
            const err = new Error(`图片加载失败 ${src}`)
            reject(err)
          }
          img.src = src
        }
      )
    }
    // 测试
    
    const url = 'https://s.poetries.work/uploads/2022/07/ee7310c4f45b9bd6.png'
    loadImg(url).then(img => {
      console.log(img.width)
      return img
    }).then(img => {
      console.log(img.height)
    }).catch(ex => console.error(ex))
    
    const url1 = 'https://s.poetries.work/uploads/2022/07/ee7310c4f45b9bd6.png'
    const url2 = 'https://s.poetries.work/images/20210414100319.png'
    
    loadImg(url1).then(img1 => {
      console.log(img1.width)
      return img1 // 普通对象
    }).then(img1 => {
      console.log(img1.height)
      return loadImg(url2) // promise 实例
    }).then(img2 => {
      console.log(img2.width)
      return img2
    }).then(img2 => {
      console.log(img2.height)
    }).catch(ex => console.error(ex))

第168题 创建10个a标签,点击弹出对应的序号

    // 本题考察闭包
    
    let a
    for (let i = 0; i < 10; i++) { // 使用let定义块级作用域
      a = document.createElement('a')
      a.innerHTML = i + '<br>'
      a.addEventListener('click', function (e) {
        e.preventDefault()
        alert(i)
      })
      document.body.appendChild(a)
    }

第167题 闭包读代码题输出

    // 函数作为返回值
    function create() {
      const a = 100
      return function () {
        console.log(a)
      }
    }
    
    const fn = create()
    const a = 200
    fn() // 输出什么?
    
    // 函数作为参数被传递
    function print(fn) {
      const a = 200
      fn()
    }
    const a = 100
    function fn() {
      console.log(a)
    }
    print(fn) //输出什么?
```**答案**

答案:`100``100`

  * 所有的自由变量的查找,是在函数定义的地方,向上级作用域查找
  * 不是在执行的地方!

**闭包的应用:隐藏数据不被外界访问**
```js
    // 闭包隐藏数据,只提供 API
    function createCache() {
      const data = {} // 闭包中的数据,被隐藏,不被外界访问
      return {
        set: function (key, val) {
          data[key] = val
        },
        get: function (key) {
          return data[key]
        }
      }
    }
    
    const c = createCache()
    c.set('a', 100)
    console.log( c.get('a') )

第166题 实现简易版jQuery

    class jQuery {
      constructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
          this[i] = result[i]
        }
        this.length = length
        this.selector = selector
      }
      get(index) {
          return this[index]
      }
      each(fn) {
        for (let i = 0; i < this.length; i++) {
          const elem = this[i]
          fn(elem)
        }
      }
      on(type, fn) {
        return this.each(elem => {
          elem.addEventListener(type, fn, false)
        })
      }
      // 扩展很多 DOM API
    }
    
    // 插件
    jQuery.prototype.dialog = function (info) {
      alert(info)
    }
    
    // “造轮子”
    class myJQuery extends jQuery {
      constructor(selector) {
        super(selector)
      }
      // 扩展自己的方法
      addClass(className) {
    
      }
      style(data) {
          
      }
    }
    // 测试
    
    const $p = new jQuery('p')
    $p.get(1)
    $p.each((elem) => console.log(elem.nodeName))
    $p.on('click', () => alert('clicked'))

第165题 原型与原型链

原型关系

  • 每个class都有显示原型prototype
  • 每个实例都有隐式原型__proto__
  • 实例的__proto__指向classprototype

    // 父类
    class People {
        constructor(name) {
          this.name = name
        }
        eat() {
          console.log(`${this.name} eat something`)
        }
    }
    
    // 子类
    class Student extends People {
      constructor(name, number) {
        super(name)
        this.number = number
      }
      sayHi() {
        console.log(`姓名 ${this.name} 学号 ${this.number}`)
      }
    }
    
    // 实例
    const xialuo = new Student('夏洛', 100)
    console.log(xialuo.name)
    console.log(xialuo.number)
    xialuo.sayHi()
    xialuo.eat()

基于原型的执行规则

获取属性xialuo.name或执行方法xialuo.sayhi时,先在自身属性和方法查找,找不到就去__proto__中找

原型链

    People.prototype === Student.prototype.__proto__

第164题 两个数组求交集和并集

    const arr1 = [1,3,4,6,7]
    const arr2 = [2,5,3,6,1]
    
    function getIntersection(arr1, arr2) {
      // 交集
    }
    function getUnion(arr1, arr2) {
      // 并集
    }
```**答案**  
```js
    // 交集
    function getIntersection(arr1, arr2) {
      const res = new Set()
      const set2 = new Set(arr2)
      for(let item of arr1) {
        if(set2.has(item)) { // 考虑性能:这里使用set的has比数组的includes快很多
          res.add(item) 
        }
      }
      return Array.from(res) // 转为数组返回
    }
    
    // 并集
    function getUnion(arr1, arr2) {
      const res = new Set(arr1)
      for(let item of arr2) {
        res.add(item) // 利用set的去重功能
      }
      return Array.from(res) // 转为数组返回
    }
    // 测试
    
    const arr1 = [1,3,4,6,7]
    const arr2 = [2,5,3,6,1]
    console.log('交集', getIntersection(arr1, arr2)) // 1,3,6
    console.log('并集', getUnion(arr1, arr2)) // 1,3,4,6,7,2,5

第163题 JS反转字符串

实现字符串A1B2C3反转为3C2B1A

    // 方式1:str.split('').reverse().join('')
    
    // 方式2:使用栈来实现
    function reverseStr(str) {
      const stack = []
      for(let c of str) {
        stack.push(c) // 入栈
      }
      let newStr = ''
      let c = ''
      while(c = stack.pop()) { // 出栈 
        newStr += c // 出栈再拼接
      }
      return newStr
    }
    
    // 测试
    console.log(reverseStr('A1B2C3')) // 3C2B1A

第162题 从零搭建开发环境需要考虑什么

  • 代码仓库,发布到哪个npm仓库(如有需要)
  • 技术选型,VueReact
  • 代码目录规范
  • 打包构建webpack等,做打包优化
  • eslintprettiercommit-lint
  • pre-commit 提交前检查(在调用git commit 命令时自动执行某些脚本检测代码,若检测出错,则阻止commit代码,也就无法push
  • 单元测试
  • CI/CD流程(如搭建jenkins部署项目)
  • 开发环境、预发布环境
  • 编写开发文档

第161题 手写Vue3基本响应式原理

    // 实现
    function reactive(obj) {/**todo**/}
    function effect(fn) {/**todo**/}
    
    // 使用
    const user = reactive({name: 'poetries'})
    effect(() => {console.log('name', user.name)})
    // 修改属性,自动触发effect内部函数执行
    user.name = '张三'
    setTimeout(()=>{ user.name = '李四'})
```**答案**  
```js
    // 简单实现
    
    var fns = new Set()
    var activeFn
    
    function reactive(obj) {
      return new Proxy(obj, {
        get(target, key, receiver) {
          const res = Reflect.get(target,key,receiver) // 相当于target[key]
    
          // 懒递归 取值才执行
          if(typeof res === 'object' && res != null) {
            return reactive(res)
          }
    
          if(activeFn) fns.add(activeFn)
    
          return res
        },
        set(target,key, value, receiver) {
          fns.forEach(fn => fn()) // 触发effect订阅的回调函数的执行
          return Reflect.set(target, key, value, receiver)
        }
      })
    }
    
    function effect(fn) {
      activeFn = fn
      fn() // 执行一次去取值,触发proxy get
    }
    // 测试
    
    var user = reactive({name: 'poetries',info:{age: 18}})
    effect(() => {console.log('name', user.name)})
    // 修改属性,自动触发effect内部函数执行
    user.name = '张三'
    // user.info.age = 10 // 修改深层次对象
    setTimeout(()=>{ user.name = '李四'}) 

第160题 实现机器人走方格

如下图,有m*n个格子,一个人从左上角start位置,每次只能向下或向右移动一步。要走到右下角finish位置,总共有多少条路径

实现

  • 如果只走第一行就只有一条路径
  • 如果只走第一列,也只有一条路径
  • 其他走法,根据这个公式 map[i][j] = map[i-1][j] + map[i][j-1],如走到[5,4]的路径数,就是[4,4][5,3]的路径数之和 -- 动态规划的思想

    // m行 n列
    function getPaths(m, n) {
      // m * n二维数组,模拟网格
      const map = new Array(m)
      for(let i = 0; i < m; i++) {
        map[i] = new Array(n) // 行对应的列
      } 
      // 如果只走第一行就只有一条路径,所以第一行所有item都填充1
      map[0].fill(1)
    
      // 如果只走第一列,也只有一条路径。所以第一行item都填充1
      for(let i = 0; i < m; i++) {
        map[i][0] = 1
      }
    
      /**此时map结果
       * [
        * [1, 1, 1, 1],
          [1, emptyx3],
          [1, emptyx3],
          [1, emptyx3],
          [1, emptyx3]
         ]
       */
      
      // 其他item,根据这个公式 map[i][j] = map[i-1][j] + map[i][j-1]
      // 如走到[5,4]的路径数,就是[4,4]和[5,3]的路径数之和 -- 动态规划的思想
      // 注意:i和j都是从1开始,因为0的位置已经被上文赋值了
      for(let i = 1; i < m; i++) {
        for(let j = 1; j < n; j++) {
          map[i][j] = map[i-1][j] + map[i][j-1]
        }
      }
    
      /**此时map结果
       * [
        * [1, 1, 1, 1],
          [1, 2, 3, 4],
          [1, 3, 6, 10],
          [1, 4, 10, 20],
          [1, 5, 15, 35]
         ]
       */
    
      // 返回完成的节点的路径数
      return map[m-1][n-1]
    }
    
    console.log(getPaths(5, 4)) // 35

第159题 this读代码题

    class Foo{
      f1() {consosle.log('this1',this)}
      f2 = () => {consosle.log('this2',this)}
      f3 = () => {consosle.log('this3',this)}
      static f4() {consosle.log('this4',this)}
    }
    const f = new Foo()
    f.f1()
    f.f2()
    f.f3.call(this)
    Foo.f4()
    const user = {
      count:1,
      getCount:function(){
        return this.count
      }
    }
    console.log(user.getCount()) 
    const func = user.getCount
    console.log(func())
```**答案**  
```js
    class Foo{
      f1() {consosle.log('this1',this)}
      f2 = () => {consosle.log('this2',this)}
      f3 = () => {consosle.log('this3',this)} 
      static f4() {consosle.log('this4',this)}
    }
    const f = new Foo()
    f.f1()  // this指向实例
    f.f2()  // class中写箭头函数,this指向实例
    f.f3.call(this) // 箭头函数 this不能通过call、apply修改
    Foo.f4()  // this指向Foo本身
    const user = {
      count:1,
      getCount:function(){
        return this.count
      },
      getCount1: () =>{
        // 箭头函数this找父级的this,this指向window
        return this.count
      },
      getCount2:function(){
        setTimeout(()=>{
          console.log(this.count) // 箭头函数this找父级的this,this指向user
        },1000) 
      },
    }
    console.log(user.getCount())  // 1 this指向user
    const func1 = user.getCount
    console.log(func1()) // undefined this指向window
    const func2 = user.getCount2
    console.log(func2()) // undefined this指向window

第158题 使用XML描述自定义DSL流程图

xml描述这个流程图

    <chart>
      <start-end id="start">开始</start-end>
      <flow id="flow1">流程1</flow>
      <judge id="judge1">评审</judge>
      <flow id="flow2">流程2</flow>
      <start-end id="end">结束</start-end>
      <arrow from="start" to="flow1"></arrow>
      <arrow from="flow1" to="judge1"></arrow>
      <arrow from="judge1" to="flow2">Y</arrow>
      <arrow from="judge1" to="end">N</arrow>
      <arrow from="flow2" to="end"></arrow>
    </chart>

第157题 JS设计并实现撤销重做功能

分析

  • 维护一个listindex
  • input changepushlistindex++
  • Undoindex-1redoindex+1
    <div>
      <input id="input-text" />
      <button id="undo">undo</button>
      <button id="redo">redo</button>
    </div>
    
    <script>
      const inputText = document.getElementById("input-text")
      const undo = document.getElementById("undo")
      const redo = document.getElementById("redo")
    
      const list = [inputText.value] // 初始化列表
      const currIndex = list.length - 1 // 初始化index
    
      inputText.addEventListener('change', e=>{
        const text = e.target.value
    
        list.length = currIndex + 1 // 截取掉index后面的部分
        list.push(text)
        currIndex++ // index增加
      })
    
      undo.addEventListener('click',()=>{
        if(currIndex <= 0) return
        currIndex-- // index减少
        inputText.value = list[currIndex]
      })
    
      redo.addEventListener('click',()=>{
        if(currIndex >= list.length - 1) return
        currIndex++ // index增加
        inputText.value = list[currIndex]
      })
    </script>

第156题 根据jsx写出vnode和render函数

    <!-- jsx -->
    <div className="container">
      <p onClick={onClick} data-name="p1">
        hello <b>{name}</b>
      </p>
      <img src={imgSrc} />
      <MyComponent title={title}></MyComponent>
    </div>

注意

  • 注意JSX中的常量和变量
  • 注意JSX中的HTML tag和自定义组件
    const vnode = {
      tag: 'div',
      props: {
        className: 'container'
      },
      children: [
        // <p>
        {
          tag: 'p',
          props: {
            dataset: {
              name: 'p1'
            },
            on: {
              click: onClick // 变量
            }
          },
          children: [
            'hello',
            {
              tag: 'b',
              props: {},
              children: [name] // name变量
            }
          ]
        },
        // <img />
        {
          tag: 'img',
          props: {
            src: imgSrc // 变量
          },
          children: [/**无子节点**/]
        },
        // <MyComponent>
        {
          tag: MyComponent, // 变量
          props: {
            title: title, // 变量
          },
          children: [/**无子节点**/]
        }
      ]
    }
    // render函数
    function render() {
      // h(tag, props, children)
      return h('div', {
        props: {
          className: 'container'
        }
      }, [
    
        // p
        h('p', {
          dataset: {
            name: 'p1'
          },
          on: {
            click: onClick
          }
        }, [
          'hello',
          h('b', {}, [name])
        ])
    
        // img
        h('img', {
          props: {
            src: imgSrc
          }
        }, [/**无子节点**/])
    
        // MyComponent
        h(MyComponent, {
          title: title
        }, [/**无子节点**/])
      ]
      )
    }

在react中jsx编译后

    // 使用https://babeljs.io/repl编译后效果
    
    React.createElement(
      "div",
      {
        className: "container"
      },
      React.createElement(
        "p",
        {
          onClick: onClick,
          "data-name": "p1"
        },
        "hello ",
        React.createElement("b", null, name)
      ),
      React.createElement("img", {
        src: imgSrc
      }),
      React.createElement(MyComponent, {
        title: title
      })
    );

第155题 手写合并两个递增数组

    var arr1 = [1,3,5,7,9]
    var arr2 = [2,4,6,8]
    
    // 1.直接用concat+sort 时间复杂度较高,因为有排序,复杂度至少是O(n*logn)
    var res1 = arr1.concat(arr2).sort((a,b)=>a-b)
    console.log(res1)
    
    // 2.使用双指针,时间复杂度 O(m + n) => O(n)
    var res = []
    var i = 0
    var j = 0
    
    // 只要arr1和arr2还有值继续循环
    while(arr1[i] !== null || arr2[j] !== null) {
      const v1 = arr1[i]
      const v2 = arr2[j]
    
      if(v1 == null && v2 == null) {
        // v1 v2都没有值了 停止
        break;
      }
    
      if(v1 < v2 || v2 == null) {
        // v1较小则只拼接v1
        res.push(v1)
        i++
      }
      if(v1 > v2 || v1 == null) {
        // v2较小则只拼接v2
        res.push(v2)
        j++
      }
      if(v1 === v2) {
        // v1、v2相等
        res.push(v1)
        i++
        res.push(v2)
        j++
      }
    }
    
    console.log(res) // [1,2,3,4,5,6,7,8,9]

第154题 React useEffect闭包陷阱问题

问:按钮点击三次后,定时器输出什么?

    function useEffectDemo() {
      const [value,setValue] = useState(0)
    
      useEffect(()=>{
        setInterval(()=>{
          console.log(value)
        },1000)
      }, [])
    
      const clickHandler = () => {
        setValue(value + 1)
      }
    
      return (
        <div>
          value: {value} <button onClick={clickHandler}>点击</button>
        </div>
      )
    }
```**答案**

> 答案一直是`0`
> `useEffect`闭包陷阱问题,`useEffect`依赖是空的,只会执行一次。`setInterval`中的`value`就只会获取它之前的变量。而`react`有个特点,每次`value`变化都会重新执行`useEffectDemo`这个函数。点击了三次函数会执行三次,三次过程中每个函数中`value`都不一样,`setInterval`获取的永远是第一个函数里面的`0`
```js
    // 追问:怎么才能打印出3?
    
    function useEffectDemo() {
      const [value,setValue] = useState(0)
    
      useEffect(()=>{
        const timer = setInterval(()=>{
          console.log(value) // 3
        },1000)
        return ()=>{
          clearInterval(timer) // value变化会导致useEffectDemo函数多次执行,多次执行需要清除上一次的定时器,否则多次注册定时器
        }
      }, [value]) // 这里增加依赖项,每次依赖变化都会重新执行
    
      const clickHandler = () => {
        setValue(value + 1)
      }
    
      return (
        <div>
          value: {value} <button onClick={clickHandler}>点击</button>
        </div>
      )
    }

第153题 Vue React diff 算法有什么区别

diff 算法

  • Vue React diff 不是对比文字,而是 vdom 树,即 tree diff
  • 传统的 tree diff 算法复杂度是 O(n^3) ,算法不可用。

优化

Vue React 都是用于网页开发,基于 DOM 结构,对 diff 算法都进行了优化(或者简化)

  • 只在同一层级比较,不跨层级(DOM 结构的变化,很少有跨层级移动)
  • tag 不同则直接删掉重建,不去对比内部细节(DOM 结构变化,很少有只改外层,不改内层)
  • 同一个节点下的子节点,通过 key 区分

最终把时间复杂度降低到 O(n) ,生产环境下可用。这一点 Vue React 都是相同的。

React diff 特点 - 仅向右移动

比较子节点时,仅向右移动,不向左移动。

Vue2 diff 特点 - 双端比较

定义四个指针,分别比较

  • oldStartNodenewStartNode
  • oldStartNodenewEndNode
  • oldEndNodenewStartNode
  • oldEndNodenewEndNode

然后指针继续向中间移动,直到指针汇合

Vue3 diff 特点 - 最长递增子序列

例如数组 [3,5,7,1,2,8] 的最长递增子序列就是 [3,5,7,8 ] 。这是一个专门的算法。

算法步骤

  • 通过“前-前”比较找到开始的不变节点 [A, B]
  • 通过“后-后”比较找到末尾的不变节点 [G]
  • 剩余的有变化的节点 [F, C, D, E, H]
    • 通过 newIndexToOldIndexMap 拿到 oldChildren 中对应的 index [5, 2, 3, 4, -1]-1 表示之前没有,要新增)
    • 计算最长递增子序列 得到 [2, 3, 4] ,对应的就是 [C, D, E] ,即这些节点可以不变
    • 剩余的节点,根据 index 进行新增、删除

该方法旨在尽量减少 DOM 的移动,达到最少的DOM操作

总结

  • React diff 特点 - 仅向右移动
  • Vue2 diff 特点 - updateChildren双端比较
  • Vue3 diff 特点 - updateChildren增加了最长递增子序列,更快
    • Vue3增加了patchFlag、静态提升、函数缓存等

连环问:diff 算法中 key 为何如此重要

无论在 Vue 还是 React 中,key 的作用都非常大。以 React 为例,是否使用 key 对内部 DOM 变化影响非常大。

    <ul>
      <li v-for="(index, num) in nums" :key="index">
        {{num}}
      </li>
    </ul>
    const todoItems = todos.map((todo) =>
      <li key={todo.id}>
        {todo.text}
      </li>
    )

第152题 如何做code-review

  • code review(简称 CR )即代码走查。领导对下属的代码进行审查,或者同事之间相互审查。
  • CR 已经是现代软件研发流程中非常重要的一步,持续规范的执行 CR 可以保证代码质量,避免破窗效应。

CR 检查什么

  • 代码规范(eslint 能检查一部分,但不是全部,如:变量命名)
  • 重复逻辑抽离、复用
  • 单个函数过长,需要拆分
  • 算法是否可优化?
  • 是否有安全漏洞?
  • 扩展性如何?
  • 是否和现有的功能重复了?
  • 是否有完善的单元测试
  • 组件设计是否合理

何时 CR

  • 提交 PR(或者 MR)时,看代码 diff 。给出评审意见,或者评审通过。可让领导评审,也可以同事之间相互评审。
  • 评审人要负责,不可形式主义。万一这段代码出了问题,评审人也要承担责任。
  • 例行,每周组织一次集体 CR ,拿出几个 PR 或者几段代码,大家一起评审。
  • 可以借机来统一评审规则,也可以像新人来演示如何评审。

第151题 手写JS深拷贝-考虑各种数据类型和循环引用

  • 使用JSON.stringify
    • 无法转换函数
    • 无法转换MapSet
    • 无法转换循环引用
  • 普通深拷贝
    • 只考虑ObjectArray
    • 无法转换MapSet和循环引用
    • 只能应对初级要求的技术一面

普通深拷贝 - 只考虑了简单的数组、对象

    /**
     * 普通深拷贝 - 只考虑了简单的数组、对象
     * @param obj obj
     */
    function cloneDeep(obj) {
        if (typeof obj !== 'object' || obj == null ) return obj
    
        let result
        if (obj instanceof Array) {
            result = []
        } else {
            result = {}
        }
    
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {            
                result[key] = cloneDeep(obj[key]) // 递归调用
            }
        }
    
        return result
    }
    // 功能测试
    const a: any = {
        set: new Set([10, 20, 30]),
        map: new Map([['x', 10], ['y', 20]])
    }
    a.self = a
    console.log( cloneDeep(a) ) // 无法处理 Map Set 和循环引用

深拷贝-考虑数组、对象、Map、Set、循环引用

    /**
     * 深拷贝
     * @param obj obj
     * @param map weakmap 为了避免循环引用、避免导致内存泄露的风险
     */
    function cloneDeep(obj, map = new WeakMap()) {
        if (typeof obj !== 'object' || obj == null ) return obj
    
        // 避免循环引用
        const objFromMap = map.get(obj)
        if (objFromMap) return objFromMap
    
        let target = {}
        map.set(obj, target)
    
        // Map
        if (obj instanceof Map) {
            target = new Map()
            obj.forEach((v, k) => {
                const v1 = cloneDeep(v, map)
                const k1 = cloneDeep(k, map)
                target.set(k1, v1)
            })
        }
    
        // Set
        if (obj instanceof Set) {
            target = new Set()
            obj.forEach(v => {
                const v1 = cloneDeep(v, map)
                target.add(v1)
            })
        }
    
        // Array
        if (obj instanceof Array) {
            target = obj.map(item => cloneDeep(item, map))
        }
    
        // Object
        for (const key in obj) {
            const val = obj[key]
            const val1 = cloneDeep(val, map)
            target[key] = val1
        }
    
        return target
    }
    // 功能测试
    const a: any = {
        set: new Set([10, 20, 30]),
        map: new Map([['x', 10], ['y', 20]]),
        info: {
            city: 'shenzhen'
        },
        fn: () => { console.info(100) }
    }
    a.self = a
    console.log( cloneDeep(a) )

第150题 用JS实现一个LRU缓存

  • 什么是LRU缓存
    • LRU(Least Recently Used) 最近最少使用
    • 假如我们有一块内存,专门用来缓存我们最近发访问的网页,访问一个新网页,我们就会往内存中添加一个网页地址,随着网页的不断增加,内存存满了,这个时候我们就需要考虑删除一些网页了。这个时候我们找到内存中最早访问的那个网页地址,然后把它删掉。这一整个过程就可以称之为 LRU 算法
    • 核心两个APIgetset
  • 分析
    • 用哈希表存储数据,这样get set才够快,时间复杂度O(1)
    • 必须是有序的,常用数据放在前面,沉水数据放在后面
    • 哈希表 + 有序,就是Map
    class LRUCache {
        constructor(length) {
            if (length < 1) throw new Error('invalid length')
            this.length = length
        }
    
        set(key, value) {
            const data = this.data
    
            if (data.has(key)) {
                data.delete(key)
            }
            data.set(key, value)
    
            if (data.size > this.length) {
                // 如果超出了容量,则删除 Map 最老的元素
                const delKey = data.keys().next().value
                data.delete(delKey)
            }
        }
    
        get(key) {
            const data = this.data
    
            if (!data.has(key)) return null
    
            const value = data.get(key)
    
            // 先删除,再添加,就是最新的了
            data.delete(key)
            data.set(key, value)
    
            return value
        }
    }
    // 测试
    
    const lruCache = new LRUCache(2)
    lruCache.set(1, 1) // {1=1}
    lruCache.set(2, 2) // {1=1, 2=2}
    console.info(lruCache.get(1)) // 1 {2=2, 1=1}
    lruCache.set(3, 3) // {1=1, 3=3}
    console.info(lruCache.get(2)) // null
    lruCache.set(4, 4) // {3=3, 4=4}
    console.info(lruCache.get(1)) // null
    console.info(lruCache.get(3)) // 3 {4=4, 3=3}
    console.info(lruCache.get(4)) // 4 {3=3, 4=4}

第149题 手写EventBus自定义事件

分析

  • ononce注册函数,存储起来
  • emit时找到对应的函数,执行
  • off找到对应函数,从存储中删除

注意

  • on绑定的事件可以连续执行,除非off
  • once绑定的函数emit一次即删除,也可以未执行而被off

实现方式1

    class EventBus {
        /**
         * {
         *    'key1': [
         *        { fn: fn1, isOnce: false },
         *        { fn: fn2, isOnce: false },
         *        { fn: fn3, isOnce: true },
         *    ]
         *    'key2': [] // 有序
         *    'key3': []
         * }
         */
        constructor() {
            this.events = {}
        }
    
        on(type, fn, isOnce = false) {
            const events = this.events
            if (events[type] == null) {
                events[type] = [] // 初始化 key 的 fn 数组
            }
            events[type].push({ fn, isOnce })
        }
    
        once(type, fn) {
            this.on(type, fn, true)
        }
    
        off(type, fn) {
            if (!fn) {
                // 解绑所有 type 的函数
                this.events[type] = []
            } else {
                // 解绑单个 fn
                const fnList = this.events[type]
                if (fnList) {
                    this.events[type] = fnList.filter(item => item.fn !== fn)
                }
            }
        }
    
        emit(type, ...args) {
            const fnList = this.events[type]
            if (fnList == null) return
    
            // 注意过滤后重新赋值
            this.events[type] = fnList.filter(item => {
                const { fn, isOnce } = item
                fn(...args)
    
                // once 执行一次就要被过滤掉
                if (!isOnce) return true
                return false
            })
        }
    }

实现方式2:拆分保存 on 和 once 事件

    // 拆分保存 on 和 once 事件
    
    class EventBus {
        constructor() {
            this.events = {} // { key1: [fn1, fn2], key2: [fn1, fn2] }
            this.onceEvents = {}
        }
    
        on(type, fn) {
            const events = this.events
            if (events[type] == null) events[type] = []
            events[type].push(fn)
        }
    
        once(type, fn) {
            const onceEvents = this.onceEvents
            if (onceEvents[type] == null) onceEvents[type] = []
            onceEvents[type].push(fn)
        }
    
        off(type, fn) {
            if (!fn) {
                // 解绑所有事件
                this.events[type] = []
                this.onceEvents[type] = []
            } else {
                // 解绑单个事件
                const fnList = this.events[type]
                const onceFnList = this.onceEvents[type]
                if (fnList) {
                    this.events[type] = fnList.filter(curFn => curFn !== fn)
                }
                if (onceFnList) {
                    this.onceEvents[type] = onceFnList.filter(curFn => curFn !== fn)
                }
            }
        }
    
        emit(type, ...args) {
            const fnList = this.events[type]
            const onceFnList = this.onceEvents[type]
    
            if (fnList) {
                fnList.forEach(f => f(...args))
            }
            if (onceFnList) {
                onceFnList.forEach(f => f(...args))
    
                // once 执行一次就删除
                this.onceEvents[type] = []
            }
        }
    }
    // 测试
    const e = new EventBus()
    
    function fn1(a, b) { console.log('fn1', a, b) }
    function fn2(a, b) { console.log('fn2', a, b) }
    function fn3(a, b) { console.log('fn3', a, b) }
    
    e.on('key1', fn1)
    e.on('key1', fn2)
    e.once('key1', fn3)
    e.on('xxxxxx', fn3)
    
    e.emit('key1', 10, 20) // 触发 fn1 fn2 fn3
    
    e.off('key1', fn1)
    
    e.emit('key1', 100, 200) // 触发 fn2

第148题 手写curry函数,实现函数柯里化

分析

  • curry返回的是一个函数fn
  • 执行fn,中间状态返回函数,如add(1)或者add(1)(2)
  • 最后返回执行结果,如add(1)(2)(3)
    // 实现函数柯里化
    
    function curry(fn) {
        const fnArgsLength = fn.length // 传入函数的参数长度
        let args = []
    
        function calc(...newArgs) {
            // 积累参数保存到闭包中
            args = [
                ...args,
                ...newArgs
            ]
            // 积累的参数长度跟传入函数的参数长度对比
            if (args.length < fnArgsLength) {
                // 参数不够,返回函数
                return calc
            } else {
                // 参数够了,返回执行结果
                return fn.apply(this, args.slice(0, fnArgsLength)) // 传入超过fnArgsLength长度的参数没有意义
            }
        }
    
        // 返回一个函数
        return calc
    }
    // 测试
    
    function add(a, b, c) {
        return a + b + c
    }
    // add(10, 20, 30) // 60
    
    var curryAdd = curry(add)
    var res = curryAdd(10)(20)(30) // 60
    console.info(res)

第147题 手写一个LazyMan,实现sleep机制

  • 支持sleepeat两个方法
  • 支持链式调用
    // LazyMan示例
    
    const me = new LazyMan('张三')
    me.eat('苹果').eat('香蕉').sleep(5).eat('葡萄')
    
    // 打印
    // 张三 eat 苹果
    // 张三 eat 香蕉
    // 等待5秒
    // 张三 eat 葡萄

思路

  • 由于有sleep功能,函数不能直接在调用时触发
  • 初始化一个列表,把函数注册进去
  • 由每个item触发next执行(遇到sleep则异步触发,使用setTimeout

    /**
     * @description lazy man
     */
    
    class LazyMan {
        constructor(name) {
            this.name = name
    
            this.tasks = [] // 任务列表
    
            // 等注册完后在初始执行next
            setTimeout(() => {
                this.next()
            })
        }
    
        next() {
            const task = this.tasks.shift() // 取出当前 tasks 的第一个任务
            if (task) task()
        }
    
        eat(food) {
            const task = () => {
                console.info(`${this.name} eat ${food}`)
                this.next() // 立刻执行下一个任务
            }
            this.tasks.push(task)
    
            return this // 链式调用
        }
    
        sleep(seconds) {
            const task = () => {
                console.info(`${this.name} 开始睡觉`)
                setTimeout(() => {
                    console.info(`${this.name} 已经睡完了 ${seconds}s,开始执行下一个任务`)
                    this.next() // xx 秒之后再执行下一个任务
                }, seconds * 1000)
            }
            this.tasks.push(task)
    
            return this // 链式调用
        }
    }
    // 测试
    
    const me = new LazyMan('张三')
    me.eat('苹果').eat('香蕉').sleep(2).eat('葡萄').eat('西瓜').sleep(2).eat('橘子')

第146题 深度优先和广度优先遍历一个DOM树

遍历DOM树

  • 给一个DOM
  • 深度优先遍历结果会输出什么
  • 广度优先遍历结果会输出什么
    <!-- 需要遍历的html节点 -->
    <div id="box">
        <p>hello <b>world</b></p>
        <img src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>
        <!-注释->
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </div>

深度优先,以深为主,递归,贪心,有深就深入,否则在回溯到上一级父节点

广度优先,使用队列,对子节点以广为主一层层的遍历

深度优先遍历一个DOM树

    /**
     * 访问节点
     * @param n node
     */
    function visitNode(n) {
        if (n instanceof Comment) {
          // 注释
          console.info('Comment node ---', n.textContent)
        }
        if (n instanceof Text) {
          // 文本
          const t = n.textContent?.trim() // 去掉换行符
          if (t) {
            console.info('Text node ---', t)
          }
        }
        if (n instanceof HTMLElement) {
          // element
          console.info('Element node ---', `<${n.tagName.toLowerCase()}>`)
        }
    }

深度优先遍历-递归

    /**
     * 深度优先遍历-递归
     * @param root dom node
     */
    function depthFirstTraverse1(root) {
        visitNode(root) // 先访问root节点
    
        // .childNodes 和 .children 不一样
        // children // children是HTMLCollection 只获取元素
        // childNodes // childNodes是NodeList 包含Text和Comment节点
        const childNodes = root.childNodes 
        if (childNodes.length) {
            childNodes.forEach(child => {
                depthFirstTraverse1(child) // 递归 深入访问子节点
            })
        }
    }

深度优先遍历-栈实现

    /**
     * 可以不用递归,用栈。因为递归本身就是栈
     * 深度优先遍历:使用栈来实现  先进后出 进push 出pop
     * @param root dom node
     */
     function depthFirstTraverse2(root) {
        const stack = []
    
        // 根节点压栈
        stack.push(root)
    
        // stack.length继续访问栈顶
        while (stack.length > 0) {
            const curNode = stack.pop() // 出栈
            if (curNode == null) break
    
            visitNode(curNode) // 访问栈顶
    
            // 子节点压栈
            const childNodes = curNode.childNodes
            if (childNodes.length > 0) {
                // reverse 反顺序压栈
                // 压栈过程 [div,ul,comment,img,p,b,hello,world,li右,li左,a,b] 遇到子节点倒叙压栈
                Array.from(childNodes).reverse().forEach(child => stack.push(child))
            }
        }
     }
  • 递归逻辑更加清晰,但容易发生栈溢出错误。频繁创建函数,效率低一些
  • 非递归效率好,但逻辑比较复杂
    <!-- 测试 -->
    <div id="box">
        <p>hello <b>world</b></p>
        <img src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>
        <!-注释->
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </div>
    <script>
        const box = document.getElementById('box')
        depthFirstTraverse2(box)
    </script>

深度优先遍历结果

广度优先遍历一个DOM树

    /**
     * 广度优先遍历 需要一个队列:先进先出 进unshift 出pop
     * @param root dom node
     */
    function breadthFirstTraverse(root) {
        const queue = [] // 数组 vs 链表实现性能更好一些
     
        // 根节点入队列
        queue.unshift(root)
    
        while (queue.length > 0) {
          const curNode = queue.pop() // 当前节点
          if (curNode == null) break
    
          visitNode(curNode)
    
          // 子节点入队
          const childNodes = curNode.childNodes
          if (childNodes.length) {
            // queue = [ul, comment, img, p] 出队pop  p标签出来访问 img出来访问 ...
            // p标签访问 也会导致子p下的子节点入队 [<b>,hello] ...
            childNodes.forEach(child => queue.unshift(child))
          }
        }
    }
    <!-- 测试 -->
    <div id="box">
        <p>hello <b>world</b></p>
        <img src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>
        <!-注释->
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </div>
    <script>
        const box = document.getElementById('box')
        breadthFirstTraverse(box)
    </script>

广度优先遍历结果

第145题 手写一个getType函数,获取详细的数据类型

  • 获取类型
    • 手写一个getType函数,传入任意变量,可准确获取类型
    • numberstringboolean等值类型
    • 引用类型objectarraymapregexp
    /**
     * 获取详细的数据类型
     * @param x x
     */
    function getType(x) {
      const originType = Object.prototype.toString.call(x) // '[object String]'
      const spaceIndex = originType.indexOf(' ')
      const type = originType.slice(spaceIndex + 1, -1) // 'String' -1不要右边的]
      return type.toLowerCase() // 'string'
    }
    // 功能测试
    console.info( getType(null) ) // null
    console.info( getType(undefined) ) // undefined
    console.info( getType(100) ) // number
    console.info( getType('abc') ) // string
    console.info( getType(true) ) // boolean
    console.info( getType(Symbol()) ) // symbol
    console.info( getType({}) ) // object
    console.info( getType([]) ) // array
    console.info( getType(() => {}) ) // function
    console.info( getType(new Date()) ) // date
    console.info( getType(new RegExp('')) ) // regexp
    console.info( getType(new Map()) ) // map
    console.info( getType(new Set()) ) // set
    console.info( getType(new WeakMap()) ) // weakmap
    console.info( getType(new WeakSet()) ) // weakset
    console.info( getType(new Error()) ) // error
    console.info( getType(new Promise(() => {})) ) // promise

第144题 手写一个JS函数,实现数组扁平化Array Flatten

  • 写一个JS函数,实现数组扁平化,只减少一次嵌套
  • 如输入[1,[2,[3]],4] 输出[1,2,[3],4]

思路

  • 定义空数组arr=[] 遍历当前数组
  • 如果item非数组,则累加到arr
  • 如果item是数组,则遍历之后累加到arr
    /**
     * 数组扁平化,使用 push
     * @param arr arr
     */
    function flatten1(arr) {
      const res = []
    
      arr.forEach(item => {
        if (Array.isArray(item)) {
          item.forEach(n => res.push(n))
        } else {
          res.push(item)
        }
      })
    
      return res
    }
    /**
     * 数组扁平化,使用 concat
     * @param arr arr
     */
    function flatten2(arr) {
      let res = []
    
      arr.forEach(item => {
        res = res.concat(item)
      })
    
      return res
    }
    // 功能测试
    const arr = [1, [2, [3], 4], 5]
    console.info(flatten2(arr))

连环问:手写一个JS函数,实现数组深度扁平化

  • 如输入[1, [2, [3]], 4] 输出[1,2,3,4]

思路

  • 先实现一级扁平化,然后递归调用,直到全部扁平化
    /**
     * 数组深度扁平化,使用 push
     * @param arr arr
     */
    function flattenDeep1(arr) {
      const res = []
    
      arr.forEach(item => {
        if (Array.isArray(item)) {
          const flatItem = flattenDeep1(item) // 递归
          flatItem.forEach(n => res.push(n))
        } else {
          res.push(item)
        }
      })
    
      return res
    }
    /**
     * 数组深度扁平化,使用 concat
     * @param arr arr
     */
    function flattenDeep2(arr) {
      let res = []
    
      arr.forEach(item => {
        if (Array.isArray(item)) {
          const flatItem = flattenDeep2(item) // 递归
          res = res.concat(flatItem)
        } else {
          res = res.concat(item)
        }
      })
    
      return res
    }
    // 功能测试
    const arr = [1, [2, [3, ['a', [true], 'b'], 4], 5], 6]
    console.info( flattenDeep2(arr) )

第143题 设计实现一个H5图片懒加载

  • 分析
    • 定义 <img src="loading.png" data-src="xx.png" />
    • 页面滚动时,图片露出,将data-src赋值给src
    • 滚动要节流
  • 获取图片定位
    • 元素的位置ele.getBoundingClientRect
    • 图片top > window.innerHeight没有露出,top < window.innerHeight露出
    <!-- 图片拦截加载 -->
    <div class="item-container">
      <p>新闻标题</p>
      <img src="./img/loading.gif" data-src="./img/animal1.jpeg"/>
    </div>
    <div class="item-container">
      <p>新闻标题</p>
      <img src="./img/loading.gif" data-src="./img/animal2.webp"/>
    </div>
    <div class="item-container">
      <p>新闻标题</p>
      <img src="./img/loading.gif" data-src="./img/animal3.jpeg"/>
    </div>
    <div class="item-container">
      <p>新闻标题</p>
      <img src="./img/loading.gif" data-src="./img/animal4.webp"/>
    </div>
    <div class="item-container">
      <p>新闻标题</p>
      <img src="./img/loading.gif" data-src="./img/animal5.webp"/>
    </div>
    <div class="item-container">
      <p>新闻标题</p>
      <img src="./img/loading.gif" data-src="./img/animal6.webp"/>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
      function mapImagesAndTryLoad() {
        const images = document.querySelectorAll('img[data-src]')
        if (images.length === 0) return
    
        images.forEach(img => {
          const rect = img.getBoundingClientRect()
          if (rect.top < window.innerHeight) {
            // 漏出来
            // console.info('loading img', img.dataset.src)
            img.src = img.dataset.src
            img.removeAttribute('data-src') // 移除 data-src 属性,为了下次执行时减少计算成本
          }
        })
      }
    
      // 滚动需要节流
      window.addEventListener('scroll', _.throttle(() => {
        mapImagesAndTryLoad()
      }, 100))
    
      // 初始化默认执行一次
      mapImagesAndTryLoad()
    </script>

第142题 如果你是项目前端技术负责人,将如何做技术选型

  • 技术选型,选什么?
    • 前端框架(Vue React Nuxt.hs Next.js 或者nodejs框架)
    • 语言(JavaScriptTypescript
    • 其他(构建工具、CI/CD等)
  • 技术选型的依据
    • 社区是否足够成熟
    • 公司已经有了经验积累
    • 团队成员的学习成本
    • 要站在公司角度,而非个人角度
  • 要全面考虑各种成本
    • 学习成本
    • 管理成本(如用TS遍地都是any怎么办)
    • 运维成本(如用ssr技术)

第141题 开发一个H5抽奖页,需要后端提供哪些接口

  • 常用答案
    • 抽奖接口
    • 用户信息接口(需要知道抽奖人是谁)
    • 是否已经抽奖
  • 先梳理页面业务流程图
  • 答案
    • 登录,获取用户信息,用户是否已抽奖
    • 抽奖接口
    • 统计接口,微信JSSDK信息(需要和PM确定是否需要)
  • 其他
    • 让页面动起来,分析业务流程
    • 技术人员要去熟悉业务,技术永远是为业务服务的

第140题 简单描述hybrid模板的更新流程

增加版本后

  • App何时下载新版本
    • App启动时检查、下载
    • 实时,每隔5min检查、下载
  • 延迟使用
    • 立即下载、使用会影响性能(下载需要时间,网络环境不同)
    • 检查到新版本,现在后台下载,此时先用着老版本
    • 待新版本下载完成,在替换为新版本,开始使用
  • 总结
    • hybrid运转流程
    • 模板的延迟使用

第139题 设计一个“用户-角色-权限”的模型和功能

  • 例如一个博客管理后台
    • 普通成员:查看博客,审核博客,下架博客
    • 管理员:普通用户权限 + 修改博客 + 删除博客
    • 超级管理员:管理员角色 + 添加、删除用户、绑定用户和角色
  • 基于角色的访问控制 RBAC(Role based access control)
    • RBAC三个模型,两个关系
    • RBAC举例
    • 功能模块
      • 用户管理:增删改查,绑定角色
      • 角色管理:增删改查,绑定权限
      • 权限管理:增删改查
  • 总结
    • 尽量去参考现有标准
    • 设计 就是数据模型(关系)+ 如何操作数据(功能)

第138题 设计一个H5编辑器的数据模型和核心功能

  • 使用vue+vuex开发
    • 问题1:点击保存按钮,提交给服务端的数据格式怎么设计
    • 问题2:如何保证画布和属性面板的信息同步
    • 问题3:如果在拓展一个图层面板,vuex如何设计数据
  • 总结
    • 组件有序结构,参考vnode格式
    • 通过id对应选中的组件,即可使用vuex同步数据
    • 图层使用vuex getter,而非独立的数据
    // 问题1 提交给服务端的数据格式怎么设计
    
    // 错误示例
    const page = {
      // Array 才有序
      components: {
        'text1': {
          type: 'text',
          value: '文本1',
          style: {
            color: 'red',
            fontSize: '16px',
          },
          attrs: {
    
          },
          on: {
              
          }
        },
        'text2': {
          type: 'text',
          value: '文本2',
          color: 'red',
          fontSize: '16px',
        },
        'img1': {
          type: 'image',
          src: 'xxx.png',
          width: '100px'
        }
      }
    }
    
    // 存在问题
    // 组件应该是有序的结构,属性应该参考vnode设计
    
    // 正确示例
    const store = {
      page: {
        title: '标题',
        setting: { /* 其他扩展信息:多语言,微信分享的配置,其他 */ },
        props: { /* 当前页面的属性设置,背景 */ },
        components: [
          // components 有序,数组
          // 参考vnode来设计
          {
            id: 'x1',
            name: '文本1',
            tag: 'text', // type
            style: { color: 'red', fontSize: '16px' },
            attrs: { /* 其他属性 */ },
            text: '文本1',
          },
          {
            // 文本2
          },
          {
            id: 'x3',
            name: '图片1',
            tag: 'image',
            style: { width: '100px' },
            attrs: { src: 'xxx.png' }
          }
        ]
      },
    
      // 问题二:如何保证画布和属性面板的信息同步 
      // vuex 同步
    
      // 用于记录当前选中的组件,记录 id 即可
      activeComponentId: 'x3'
    }
    // 问题三:如果在拓展一个图层面板,vuex如何设计数据
    
    // 错误示例
    {
      layers: [
        {
          id: 'text1',
          name: '文本1'
        },
        {
          id: 'text2', // component id
          name: '文本2' // layer name
        },
        {
          id: 'img1',
          name: '图片'
        },
      ]
    }
    
    // 存在问题
    // 图层,仅仅是一个索引,应该用computed这种格式
    
    // 正确示例
    // Vuex getters
    const getters = {
      // Vue computed
      // 图层里面的数据等于是把画布components重新计算了一遍
      // layers是画布的一个影子
      layers() {
        store.page.components.map(c => {
          return {
            id: c.id,
            name: c.name
          }
        })
      }
    }

第137题 SPA和MPA应该如何选择

  • SPA(Single Page Application) 单页面应用
  • MPA(Multi Page Application) 多页面应用
  • 默认情况下VueReact都是SPA
  • SPA特点
    • 一个HTML页面通过前端路由来切换不同的前端功能
    • 以为操作为主,非展示为主
    • 适合一个综合web应用
    • SPA场景
      • 大型后台管理系统
      • 比较复杂的WebApp如外卖H5
  • MPA特点
    • 功能较少,一个页面展示的完
    • 以为展示为主,操作比较少
    • 适合一个孤立的页面
    • MPA场景
      • 分享页,如腾讯文档分享出去
      • 新闻详情页,如新闻App的详情页
      • 这类不合适用SPA做,生成的JS包大,加载慢
    // spa单页应用配置
    
    module.exports = { 
      entry: path.join(srcPath, 'index'), // 单入口
      plugins: [
        new HtmlWebpackPlugin({
            template: path.join(tplPath, 'index.html'), // 单个页面
            filename: 'index.html'
        })
      ]
    }
    // mpa多页应用配置
    
    module.exports = {
      mode: 'production',
      // 多入口
      entry: {
        home: './src/home/index.js',
        product: './src/product/index.js',
        about: './src/about/index.js'
      },
      output: {
        filename: 'js/[name].[contentHash].js', // name 即 entry 的 key
        path: path.resolve(__dirname, './dist')
      },
      plugins: [
        // 三个页面
        new HtmlWebpackPlugin({
          title: '首页',
          template: './template/index.html',
          filename: 'home.html',
          chunks: ['home']
        }),
        new HtmlWebpackPlugin({
          title: '产品',
          template: './template/product.html',
          filename: 'product.html',
          chunks: ['product']
        }),
        new HtmlWebpackPlugin({
          title: '关于',
          template: './template/about.html',
          filename: 'about.html',
          chunks: ['about']
        })
      ]
    }

第136题 如何设计一个前端统计SDK

  • 前端统计的范围
    • 访问量PV
    • 自定义事件
    • 性能,错误
    // 统计sdk
    
    const PV_URL_SET = new Set()
    
    class MyStatistic {
      constructor(productId) {
        this.productId = productId
    
        // 内部处理
        this.initPerformance() // 性能统计
        this.initError() // 错误监控
      }
    
      // 发送统计数据
      send(url, params = {}) {
        params.productId = productId
    
        const paramArr = []
        for (let key in params) {
          const val = params[key]
          paramArr.push(`${key}=${value}`)
        }
    
        const newUrl = `${url}?${paramArr.join('&')}` // url?a=10&b=20
    
        // 用 <img> 发送:1. 可跨域;2. 兼容性非常好
        const img = document.createElement('img')
        img.src = newUrl // get
      }
    
      // 初始化性能统计
      initPerformance() {
        const url = 'yyy'
        this.send(url, performance.timing) // 给最原始的、完整的结果,原始数据。让服务端加工处理
      }
    
      // 初始化错误监控
      initError() {
        window.addEventListener('error', event => {
          const { error, lineno, colno } = event
          this.error(error, { lineno, colno })
        })
        // Promise 未 catch 住的报错
        window.addEventListener('unhandledrejection', event => {
          this.error(new Error(event.reason), { type: 'unhandledrejection' })
        })
      }
    
      pv() {
        const href = location.href
        if (PV_URL_SET.get(href)) return // 不重复发送 pv
    
        this.event('pv')
    
        PV_URL_SET.add(href)
      }
    
      event(key, val) {
        const url = 'xxx' // 自定义事件统计 server API
        this.send(url, {key, val})
      }
    
      error(err, info = {}) {
        const url = 'zzz'
        const { message, stack } = err
        this.send(url, { message, stack, ...info  })
      }
    }
    
    // const s = new MyStatistic('a1') // 最好在DOMContentLoaded的时候在初始化
    // s.pv() // 用户主动发送 SPA 路由切换 PV
    
    // 用户自行发送自定义事件
    // s.event('vip', 'close')
    
    // 用户处理try catch
    // try {
    // } catch(ex) {
    //     s.error(ex, {})
    // }
    
    // 在vue、react单独监听配置的错误的配置 也可以s.error单独发过去。跟try catch一样的

连环问:sourcemap有何作用,如何配置

js报错,可能会问sourcemap相关问题

  • sourcemap作用
    • JS上线时要压缩、混淆
    • 线上的JS报错信息,将无法识别行、列
    • sourcemap即可解决这个问题
  • webpack通过devtool配置sourcemap
    • evalJSeval(...)中,不生成sourcemap
    • source-map:生成单独的map文件,并在JS最后指定
    • eval-source-mapJSeval(...)中,sourcemap内嵌
    • inline-source-mapsourcemap内嵌到JS中,不是单独文件
    • cheap-source-mapsourcemap中只有行信息,没有列
    • eval-cheap-source-mapJSeval(...)中,没有独立的sourcemap文件,cheap-source-map只有行没有列
    • 总结
      • 开发环境使用eval效率高:evaleval-source-mapeval-cheap-source-map
      • 线上环境使用:source-map 生成单独的map文件(不要泄露sourcemap文件)

第135题 React setState经典面试题

    // setState笔试题考察 下面这道题输出什么
    class Example extends React.Component {
      constructor() {
      super()
      this.state = {
        val: 0
      }
    }
    componentDidMount() {
      this.setState({ val: this.state.val + 1 })
      console.log(this.state.val)
      // 第 1 次 log
      this.setState({ val: this.state.val + 1 })
      console.log(this.state.val)
      // 第 2 次 log
      setTimeout(() => {
        this.setState({ val: this.state.val + 1 }) 
        console.log(this.state.val)
        // 第 3 次 log
        this.setState({ val: this.state.val + 1 })
        console.log(this.state.val)
        // 第 4 次 log
        }, 0)
      }
      render() {
        return null
      }
    }
```**答案**  
```js
    // 答案
    0
    0
    2
    3
  • 关于setState的两个考点
    • 同步或异步
    • state合并或不合并
      • setState传入函数不会合并覆盖
      • setState传入对象会合并覆盖Object.assigin({})
  • 分析
    • 默认情况
      • state默认异步更新
      • state默认合并后更新(后面的覆盖前面的,多次重复执行不会累加)
    • setState在合成事件和生命周期钩子中,是异步更新的
    • react同步更新,不在react上下文中触发
      • 原生事件setTimeoutsetIntervalpromise.thenAjax回调中,setState是同步的,可以马上获取更新后的值
        • 原生事件如document.getElementById('test').addEventListener('click',()=>{this.setState({count:this.state.count + 1}})
      • 原因: 原生事件是浏览器本身的实现,与事务流无关,自然是同步;而setTimeout是放置于定时器线程中延后执行,此时事务流已结束,因此也是同步
    • 注意:在react18中不一样
      • 上述场景,在react18中可以异步更新(Auto Batch
      • 需将ReactDOM.render替换为ReactDOM.createRoot

如需要实时获取结果,在回调函数中获取 setState({count:this.state.count + 1},()=>console.log(this.state.count)})

    // setState原理模拟
    let isBatchingUpdate = true;
    
    let queue = [];
    let state = {number:0};
    function setState(newSate){
      //state={...state,...newSate}
      // setState异步更新
      if(isBatchingUpdate){
        queue.push(newSate);
      }else{
        // setState同步更新
        state={...state,...newSate}
      }   
    }
    
    // react事件是合成事件,在合成事件中isBatchingUpdate需要设置为true
    // 模拟react中事件点击
    function handleClick(){
      isBatchingUpdate=true; // 批量更新标志
    
      /**我们自己逻辑开始 */
      setState({number:state.number+1});
      setState({number:state.number+1});
      console.log(state); // 0
      setState({number:state.number+1});
      console.log(state); // 0
      /**我们自己逻辑结束 */
    
      state= queue.reduce((newState,action)=>{
        return {...newState,...action}
      },state); 
    }
    handleClick();
    console.log(state); // 1
    // setState笔试题考察 下面这道题输出什么
    class Example extends React.Component {
      constructor() {
      super()
      this.state = {
        val: 0
      }
    }
    // componentDidMount中isBatchingUpdate=true setState批量更新
    componentDidMount() {
      // setState传入对象会合并,后面覆盖前面的Object.assign({})
      this.setState({ val: this.state.val + 1 }) // 添加到queue队列中,等待处理 
      console.log(this.state.val)
      // 第 1 次 log
      this.setState({ val: this.state.val + 1 }) // 添加到queue队列中,等待处理
      console.log(this.state.val)
      // 第 2 次 log
      setTimeout(() => {
        // 到这里this.state.val结果等于1了
        // 在原生事件和setTimeout中(isBatchingUpdate=false),setState同步更新,可以马上获取更新后的值
        this.setState({ val: this.state.val + 1 }) // 同步更新
        console.log(this.state.val)
        // 第 3 次 log
        this.setState({ val: this.state.val + 1 }) // 同步更新
        console.log(this.state.val)
        // 第 4 次 log
        }, 0)
      }
      render() {
        return null
      }
    }
    
    // 答案:0, 0, 2, 3

React 18之前,setStateReact的合成事件中是合并更新的,在setTimeout的原生事件中是同步按序更新的。例如

    handleClick = () => {
      this.setState({ age: this.state.age + 1 });
      console.log(this.state.age); // 0
      this.setState({ age: this.state.age + 1 });
      console.log(this.state.age); // 0
      this.setState({ age: this.state.age + 1 });
      console.log(this.state.age); // 0
      setTimeout(() => {
        this.setState({ age: this.state.age + 1 });
        console.log(this.state.age); // 2
        this.setState({ age: this.state.age + 1 });
        console.log(this.state.age); // 3
      });
    };

而在React 18中,不论是在合成事件中,还是在宏任务中,都是会合并更新

    function handleClick() {
      setState({ age: state.age + 1 }, onePriority);
      console.log(state.age);// 0
      setState({ age: state.age + 1 }, onePriority);
      console.log(state.age); // 0
      setTimeout(() => {
        setState({ age: state.age + 1 }, towPriority);
        console.log(state.age); // 1
        setState({ age: state.age + 1 }, towPriority);
        console.log(state.age); // 1
      });
    }
    // 拓展:setState传入函数不会合并
    class Example extends React.Component {
      constructor() {
      super()
      this.state = {
        val: 0
      }
    }
    componentDidMount() {
      this.setState((prevState,props)=>{
        return {val: prevState.val + 1}
      })
      console.log(this.state.val) // 0
      // 第 1 次 log
      this.setState((prevState,props)=>{ // 传入函数,不会合并覆盖前面的
        return {val: prevState.val + 1}
      })
      console.log(this.state.val) // 0
      // 第 2 次 log
      setTimeout(() => {
        // setTimeout中setState同步执行
        // 到这里this.state.val结果等于2了
        this.setState({ val: this.state.val + 1 }) 
        console.log(this.state.val) // 3
        // 第 3 次 log
        this.setState({ val: this.state.val + 1 })
        console.log(this.state.val) // 4
        // 第 4 次 log
        }, 0)
      }
      render() {
        return null
      }
    }
    // 答案:0 0 3 4 
    // react hooks中打印
    
    function useStateDemo() {
      const [value, setValue] = useState(100)
    
      function clickHandler() {
        // 1.传入常量,state会合并
        setValue(value + 1)
        setValue(value + 1)
        console.log(1, value) // 100
        // 2.传入函数,state不会合并
        setValue(value=>value + 1)
        setValue(value=>value + 1)
        console.log(2, value) // 100
    
        // 3.setTimeout中,React18也开始合并state(之前版本会同步更新、不合并)
        setTimeout(()=>{
          setValue(value + 1)
          setValue(value + 1)
          console.log(3, value) // 100
          setValue(value + 1)
        })
    
        // 4.同理 setTimeout中,传入函数不合并
        setTimeout(()=>{
          setValue(value => value + 1)
          setValue(value => value + 1)
          console.log(4, value) // 100
        })
      }
      return (
        <button onClick={clickHandler}>点击 {value}</button>
      )
    }

连环问:setState是宏任务还是微任务

  • setState本质是同步的
    • setState是同步的,不过让react做成异步更新的样子而已
      • 如果setState是微任务,就不应该在promise.then微任务之前打印出来(promise then微任务先注册)
    • 因为要考虑性能,多次state修改,只进行一次DOM渲染
    • 日常所说的“异步”是不严谨的,但沟通成本低
  • 总结
    • setState是同步执行,state都是同步更新(只是我们日常把setState当异步来处理)
    • 在微任务promise.then之前,state已经计算完了
    • 同步,不是微任务或宏任务
    import React from 'react'
    
    class Example extends React.Component {
      constructor() {
        super()
        this.state = {
          val: 0
        }
      }
    
      clickHandler = () => {
        // react事件中 setState异步执行
        console.log('--- start ---')
    
        Promise.resolve().then(() => console.log('promise then') /* callback */)
    
        // “异步”
        this.setState(
          { val: this.state.val + 1 },
          () => { console.log('state callback...', this.state) } // callback
        )
    
        console.log('--- end ---')
    
        // 结果: 
        // start 
        // end
        // state callback {val:1} 
        // promise then 
    
        // 疑问?
        // promise then微任务先注册的,按理应该先打印promise then再到state callback
        // 因为:setState本质是同步的,不过让react做成异步更新的样子而已
        // 因为要考虑性能,多次state修改,只进行一次DOM渲染
      }
    
      componentDidMount() {
        setTimeout(() => {
          // setTimeout中setState是同步更新
          console.log('--- start ---')
    
          Promise.resolve().then(() => console.log('promise then'))
    
          this.setState(
            { val: this.state.val + 1 }
          )
          console.log('state...', this.state)
      
          console.log('--- end ---')
        })
    
        // 结果: 
        // start 
        // state {val:1} 
        // end
        // promise then 
      }
    
      render() {
        return <p id="p1" onClick={this.clickHandler}>
          setState demo: {this.state.val}
        </p>
      }
    }

第134题 一道让人失眠的promise then执行顺序问题

    Promise.resolve().then(()=>{
      console.log(0)
      return Promise.resolve(4)
    }).then((res)=>{
      console.log(res)
    }).then(()=>{
      console.log(5.5)
    })
    
    Promise.resolve().then(()=>{
      console.log(1)
    }).then(()=>{
      console.log(2)
    }).then(()=>{
      console.log(3)
    }).then(()=>{
      console.log(5)
    }).then(()=>{
      console.log(6)
    })
```**答案**  
```js
    // 答案
    
    0 
    1 
    2 
    3 
    4 
    5 
    5.5
    6

分析

  • 回顾JS知识
    • 单线程,异步
    • 事件循环Event Loop
    • 宏任务和微任务
  • then交替执行
    • 如果有多个fulfilled的实例,通知执行then链式调用
    • then交替执行
    • 这是编译器优化,防止一个promise占据太久时间
        // fulfilled状态
    Promise.resolve().then(() => {
      console.log(10)
    }).then(() => {
      console.log(20)
    }).then(() => {
      console.log(30)
    }).then(() => {
      console.log(40)
    }).then(() =>{
      console.log(50)
    })
    // fulfilled状态
    Promise.resolve().then(() => {
      console.log(100)
    }).then(() => {
      console.log(200)
    }).then(() => {
      console.log(300)
    }).then(() => {
      console.log(400)
    }).then(() =>{
      console.log(500)
    })
    // 交替执行结果是:10 100 20 200 30 300 40 400 50 500
  • then中返回新的promise实例
    • 相当多出一个promise实例
    • 也会遵循交替执行
    • 但和直接声明一个promise实例,结果有些差异
    • then中返回新的promise实例,会出现慢两拍的效果
      • 第一拍:promise需要由pending变为fulfilled
      • 第二拍:then函数挂载到微任务队列
        Promise.resolve().then(()=>{
      console.log(0)
      // 返回新的promise实例,慢两拍,所以先下面的2、3才到这里的4
      return Promise.resolve(4) // 第一拍:promise需要由pending变为fulfilled
    }).then((res)=>{ // 第二拍:把then后面的任务放到[微任务队列]
      console.log(res)
    }).then(()=>{
      console.log(5.5)
    })
    // 模拟慢两拍的情况
    /**
     * Promise.resolve().then(()=>{
        // 第一拍:改变状态
        const p = Promise.resolve(4)
        Promise.resolve().then(()=>{
          // 第二拍:把then函数挂载上
          p.then(res=>console.log(res))
        })
      })
     */
    
    Promise.resolve().then(()=>{
      console.log(1)
    }).then(()=>{
      console.log(2)
    }).then(()=>{
      console.log(3)
    }).then(()=>{
      console.log(5) // 执行5 交替执行-在返回第一个Promise.resolve()看有没有then,执行5.5 最后在交替执行下面的6
    }).then(()=>{
      console.log(6)
    })
    // 结果 0 1 2 3 4 5 5.5 6

第133题 把一个数组转换为树

    const arr = [
      {id:1, name: '部门A', parentId: 0},
      {id:2, name: '部门B', parentId: 1},
      {id:3, name: '部门C', parentId: 1},
      {id:4, name: '部门D', parentId: 2},
      {id:5, name: '部门E', parentId: 2},
      {id:6, name: '部门F', parentId: 3},
    ]

树节点

    interface ITreeNode {
      id:number
      name: string
      children?: ITreeNode[] // 子节点
    }

思路

  • 遍历数组
  • 每个元素生成TreeNode
  • 找到parentNode,并加入它的children
    • 如何找到parentNode
      • 遍历数组去查找太慢
      • 可用一个Map来维护关系,便于查找
    /**
     * @description array to tree
     */
    
    // 数据结构
    interface ITreeNode {
      id: number
      name: string
      children?: ITreeNode[]
    }
    
    function arr2tree(arr) {
      // 用于 id 和 treeNode 的映射
      const idToTreeNode = new Map()
    
      let root = null // 返回一棵树 tree rootNode
    
      arr.forEach(item => {
        const { id, name, parentId } = item
    
        // 定义 tree node 并加入 map
        const treeNode = { id, name }
        idToTreeNode.set(id, treeNode)
    
        // 找到 parentNode 并加入到它的 children
        const parentNode = idToTreeNode.get(parentId)
        if (parentNode) {
          if (parentNode.children == null){
            parentNode.children = []
          }
          parentNode.children.push(treeNode) // 把treeNode加入到parentNode下
        }
    
        // 找到根节点
        if (parentId === 0) {
          root = treeNode
        }
      })
    
      return root
    }
    
    const arr = [
      { id: 1, name: '部门A', parentId: 0 }, // 0 代表顶级节点,无父节点
      { id: 2, name: '部门B', parentId: 1 },
      { id: 3, name: '部门C', parentId: 1 },
      { id: 4, name: '部门D', parentId: 2 },
      { id: 5, name: '部门E', parentId: 2 },
      { id: 6, name: '部门F', parentId: 3 },
    ]
    const tree = arr2tree(arr)
    console.info(tree)

连环问:把一个树转换为数组

  • 思路
    • 遍历树节点(广度优先:一层层去遍历,结果是ABCDEF)而深度优先是(ABDECF
    • 将树节点转为Array Itempush到数组中
    • 根据父子关系,找到Array ItemparentId
      • 如何找到parentId
        • 遍历树查找太慢
        • 可用一个Map来维护关系,便于查找
    /**
     * @description tree to arr
     */
    
    // 数据结构
    interface ITreeNode {
      id: number
      name: string
      children?: ITreeNode[]
    }
    
    function tree2arr(root) {
      // Map
      const nodeToParent = new Map() // 映射当前节点和父节点关系
    
      const arr = []
    
      // 广度优先遍历,queue
      const queue = []
      queue.unshift(root) // 根节点 入队
    
      while (queue.length > 0) {
        const curNode = queue.pop() // 出队
        if (curNode == null) break
    
        const { id, name, children = [] } = curNode
    
        // 创建数组 item 并 push
        const parentNode = nodeToParent.get(curNode)
        const parentId = parentNode?.id || 0
        const item = { id, name, parentId }
        arr.push(item)
    
        // 子节点入队
        children.forEach(child => {
          // 映射 parent
          nodeToParent.set(child, curNode)
          // 入队
          queue.unshift(child)
        })
      }
    
      return arr
    }
    
    const obj = {
      id: 1,
      name: '部门A',
      children: [
        {
          id: 2,
          name: '部门B',
          children: [
            { id: 4, name: '部门D' },
            { id: 5, name: '部门E' }
          ]
        },
        {
          id: 3,
          name: '部门C',
          children: [
            { id: 6, name: '部门F' }
          ]
        }
      ]
    }
    const arr = tree2arr(obj)
    console.info(arr)

第132题 ["1", "2", "3"].map(parseInt) 答案是多少

parseInt(str, radix)

  • 解析一个字符串,并返回10进制整数
  • 第一个参数str,即要解析的字符串
  • 第二个参数radix,基数(进制),范围2-36 ,以radix进制的规则去解析str字符串。不合法导致解析失败
  • 如果没有传radix
    • str0开头,则按照16进制处理
    • str0开头,则按照8进制处理(但是ES5取消了,可能还有一些老的浏览器使用)会按照10进制处理
    • 其他情况按照10进制处理
  • eslint会建议parseInt写第二个参数(是因为0开始的那个8进制写法不确定(如078),会按照10进制处理)

答案

    // 拆解
    const arr = ["1", "2", "3"]
    const res = arr.map((item,index,array)=>{
      // item: '1', index: 0
      // item: '2', index: 1
      // item: '3', index: 2
      return parseInt(item, index)
      // parseInt('1', 0) // 0相当没有传,按照10进制处理返回1 等价于parseInt('1')
      // parseInt('2', 1) // NaN 1不符合redix 2-36 的一个范围
      // parseInt('3', 2) // 2进制没有3 返回NaN
    })
    
    // 答案 [1, NaN, NaN] 

第131题 工作中遇到过哪些项目难点,是如何解决的

遇到问题要注意积累

  • 每个人都会遇到问题,总有几个问题让你头疼
  • 日常要注意积累,解决了问题要自己写文章复盘

如果之前没有积累

  • 回顾一下半年之内遇到的难题
  • 思考当时解决方案,以及解决之后的效果
  • 写一篇文章记录一下,答案就有了

答案模板

  • 描述问题:背景 + 现象 + 造成的影响
  • 问题如何被解决:分析 + 解决
  • 自己的成长:学到了什么 + 以后如何避免

一个示例

  • 问题:编辑器只能回显JSON格式的数据,而不支持老版本的HTML格式
  • 解决:将老版本的HTML反解析成JSON格式即可解决
  • 成长:要考虑完整的输入输出 + 考虑旧版本用户 + 参考其他产品

第130题 如果一个H5很慢,如何排查性能问题

  • 通过前端性能指标分析
  • 通过Performancelighthouse分析
  • 持续跟进,持续优化

前端性能指标

  • FP(First Paint):首次绘制,即首次绘制任何内容到屏幕上
  • FCP(First Content Paint):首次内容绘制,即首次绘制非空白内容到屏幕上
  • FMP(First Meaning Paint):首次有意义绘制,即首次绘制有意义的内容到屏幕上-已弃用,改用LCP
    • FMP业务指标,没有统一标准
  • LCP(Largest Contentful Paint):最大内容绘制,即最大的内容绘制到屏幕上
  • TTI(Time to Interactive):可交互时间,即页面加载完成,可以进行交互的时间
  • TBT(Total Blocking Time):总阻塞时间,即页面加载过程中,主线程被占用的时间
  • CLS(Cumulative Layout Shift):累计布局偏移,即页面加载过程中,元素位置发生变化的程度
  • FCPLCPTTITBTCLS都是web-vitals库提供的指标
  • DCL(DOM Content Loaded)DOM加载完成,即页面DOM结构加载完成的时间
  • L(Load):页面完全加载完成的时间

通过Chrome Performance分析

打开浏览器无痕模式,点击Performance > ScreenShot

如果加载很快就会很快就到达FP,在分析FCP、LCP、DCL、L看渲染时间

国内访问GitHub可以看到加载到FP非常慢,但是渲染很快

network > show overview 查看每个资源的加载时间,或者从waterfall查看

使用lighthouse分析

    # 通过node使用
    npm i lighthouse -g
    
    # 需要稍等一会就分析完毕输出报告
    lighthouse https://baidu.com --view --preset=desktop

通过工具就可以识别到问题

  • 加载慢?
    • 优化服务器硬件配置,使用CDN
    • 路由懒加载,大组件异步加载--减少主包体积
    • 优化HTTP缓存策略
  • 渲染慢
    • 优化服务端接口(如Ajax获取数据慢)
    • 继续分析,优化前端组件内部逻辑(参考vuereact优化)
    • 服务端渲染SSR

性能优化是一个循序渐进的过程,不像bug一次解决。持续跟进统计结果,再逐步分析性能瓶颈,持续优化。可使用第三方统计服务,如百度统计

第129题 如何统一监听React组件报错

  • ErrorBoundary组件
    • react16版本之后,增加了ErrorBoundary组件
    • 监听所有下级组件报错,可降级展示UI
    • 只监听组件渲染时报错,不监听DOM事件错误、异步错误
      • ErrorBoundary没有办法监听到点击按钮时候的在click的时候报错
      • 只能监听组件从一开始渲染到渲染成功这段时间报错,渲染成功后在怎么操作产生的错误就不管了
      • 可用try catch或者window.onerror(二选一)
    • 只在production环境生效(需要打包之后查看效果),dev会直接抛出错误
  • 总结
    • ErrorBoundary监听组件渲染报错
    • 事件报错使用try catchwindow.onerror
    • 异步报错使用window.onerror
    // ErrorBoundary.js
    
    import React from 'react'
    
    class ErrorBoundary extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          error: null // 存储当前的报错信息
        }
      }
      static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染能够显示降级后的 UI
        console.info('getDerivedStateFromError...', error)
        return { error } // return的信息会等于this.state的信息
      }
      componentDidCatch(error, errorInfo) {
        // 统计上报错误信息
        console.info('componentDidCatch...', error, errorInfo)
      }
      render() {
        if (this.state.error) {
          // 提示错误
          return <h1>报错了</h1>
        }
    
        // 没有错误,就渲染子组件
        return this.props.children
      }
    }
    // index.js 中使用
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import ErrorBoundary from './ErrorBoundary'
    
    ReactDOM.render(
      <React.StrictMode>
        <ErrorBoundary>
          <App />
        </ErrorBoundary>
      </React.StrictMode>,
      document.getElementById('root')
    );

第128题 如何统一监听Vue组件报错

  • window.onerror
    • 全局监听所有JS错误,包括异步错误
    • 但是它是JS级别的,识别不了Vue组件信息,Vue内部的错误还是用Vue来监听
    • 捕捉一些Vue监听不到的错误
  • errorCaptured生命周期
    • 监听所有下级组件 的错误
    • 返回false会阻止向上传播到window.onerror
  • errorHandler配置
    • Vue全局错误监听,所有组件错误都会汇总到这里
    • errorCaptured返回false,不会传播到这里
    • window.onerrorerrorHandler互斥,window.onerror不会在被触发,这里都是全局错误监听了
  • 异步错误
    • 异步回调里的错误,errorHandler监听不到
    • 需要使用window.onerror
  • 总结
    • 实际工作中,三者结合使用
    • promisepromise没有被catch的报错,使用onunhandledrejection监听)和setTimeout异步,vue里面监听不了
        window.addEventListener("unhandledrejection", event => {
      // 捕获 Promise 没有 catch 的错误
      console.info('unhandledrejection----', event)
    })
    Promise.reject('错误信息')
    // .catch(e => console.info(e)) // catch 住了,就不会被 unhandledrejection 捕获
* `errorCaptured`监听一些重要的、有风险组件的错误
* `window.onerror`和`errorCaptured`候补全局监听
    // main.js
    const app = createApp(App)
    
    // 所有组件错误都会汇总到这里
    // window.onerror和errorHandler互斥,window.onerror不会在被触发,这里都是全局错误监听了
    // 阻止向window.onerror传播
    app.config.errorHandler = (error, vm, info) => {
      console.info('errorHandler----', error, vm, info)
    }
    // 在app.vue最上层中监控全局组件
    export default {
      mounted() {
        /**
         * msg:错误的信息
         * source:哪个文件
         * line:行
         * column:列
         * error:错误的对象
         */
        // 可以监听一切js的报错, try...catch 捕获的 error ,无法被 window.onerror 监听到
        window.onerror = function (msg, source, line, column, error) {
          console.info('window.onerror----', msg, source, line, column, error)
        }
        // 用addEventListener跟window.onerror效果一样,参数不一样
        // window.addEventListener('error', event => {
        //   console.info('window error', event)
        // })
      },
      errorCaptured: (errInfo, vm, info) => {
        console.info('errorCaptured----', errInfo, vm, info)
        // 返回false会阻止向上传播到window.onerror
        // 返回false会阻止传播到errorHandler
        // return false
      },
    }
    // ErrorDemo.vue
    export default {
      name: 'ErrorDemo',
      data() {
        return {
          num: 100
        }
      },
      methods: {
        clickHandler() {
          try {
            this.num() // 报错
          } catch (ex) {
            console.error('catch.....', ex)
            // try...catch 捕获的 error ,无法被 window.onerror 监听到
          }
    
          this.num() // 报错
        }
      },
      mounted() {
        // 被errorCaptured捕获
        // throw new Error('mounted 报错')
    
        // 异步报错,errorHandler、errorCaptured监听不到,vue对异步报错监听不了,需要使用window.onerror来做
        // setTimeout(() => {
        //     throw new Error('setTimeout 报错')
        // }, 1000)
      },
    }

第127题 在实际工作中,你对React做过哪些优化

  • 修改CSS模拟v-show
        // 原始写法
    {!flag && <MyComonent style={{display:'none'}} />}
    {flag && <MyComonent />}
    
    // 模拟v-show
    {<MyComonent style={{display:flag ? 'block' : 'none'}} />}
  • 循环使用key
    • key不要用index
  • 使用Flagment或 <></>空标签包裹减少多个层级组件的嵌套
  • jsx中不要定义函数JSX会被频繁执行的
        // bad 
    // react中的jsx被频繁执行(state更改)应该避免函数被多次新建
    <button onClick={()=>{}}>点击</button>
    // goods
    function useButton() {
      const handleClick = ()=>{}
      return <button onClick={handleClick}>点击</button>
    }
  • 使用shouldComponentUpdate
    • 判断组件是否需要更新
    • 或者使用React.PureComponent比较props第一层属性
    • 函数组件使用React.memo(comp, fn)包裹 function fn(prevProps,nextProps) {// 自己实现对比,像shouldComponentUpdate}
  • Hooks缓存数据和函数
    • useCallback: 缓存回调函数,避免传入的回调每次都是新的函数实例而导致依赖组件重新渲染,具有性能优化的效果
    • useMemo: 用于缓存传入的 props,避免依赖的组件每次都重新渲染
  • 使用异步组件
        import React,{lazy,Suspense} from 'react'
    const OtherComp = lazy(/**webpackChunkName:'OtherComp'**/ ()=>import('./otherComp'))
    
    function MyComp(){
      return (
        <Suspense fallback={<div>loading...</div>}>
          <OtherComp />
        </Suspense>
      )
    }
  • 路由懒加载
        import React,{lazy,Suspense} from 'react'
    import {BrowserRouter as Router,Route, Switch} from 'react-router-dom'
    
    const Home = lazy(/**webpackChunkName:'h=Home'**/()=>import('./Home'))
    const List = lazy(/**webpackChunkName:'List'**/()=>import('./List'))
    
    const App = ()=>(
      <Router>
        <Suspense fallback={<div>loading...</div>}>
          <Switch>
            <Route exact path='/' component={Home} />
            <Route exact path='/list' component={List} />
          </Switch>
        </Suspense>
      </Router>
    )
  • 使用SSRNext.js

连环问:你在使用React时遇到过哪些坑

  • 自定义组件的名称首字母要大写
        // 原生html组件
    <input />
    
    // 自定义组件
    <Input />
  • JS关键字的冲突
        // for改成htmlFor,class改成className
    <label htmlFor="input-name" className="label">
      用户名 <input id="username" />
    </label>
  • JSX数据类型
        // correct
    <Demo flag={true} />
    // error
    <Demo flag="true" />
  • setState不会马上获取最新的结果

    • 如需要实时获取结果,在回调函数中获取 setState({count:this.state.count + 1},()=>console.log(this.state.count)})
    • setState在合成事件和生命周期钩子中,是异步更新的
    • 原生事件setTimeout中,setState是同步的,可以马上获取更新后的值;
    • 原因: 原生事件是浏览器本身的实现,与事务流无关,自然是同步;而setTimeout是放置于定时器线程中延后执行,此时事务流已结束,因此也是同步;
        // setState原理模拟
    let isBatchingUpdate = true;
    
    let queue = [];
    let state = {number:0};
    function setState(newSate){
      //state={...state,...newSate}
      // setState异步更新
      if(isBatchingUpdate){
        queue.push(newSate);
      }else{
        // setState同步更新
        state={...state,...newSate}
      }   
    }
    
    // react事件是合成事件,在合成事件中isBatchingUpdate需要设置为true
    // 模拟react中事件点击
    function handleClick(){
      isBatchingUpdate=true; // 批量更新标志
    
      /**我们自己逻辑开始 */
      setState({number:state.number+1});
      setState({number:state.number+1});
      console.log(state); // 0
      setState({number:state.number+1});
      console.log(state); // 0
      /**我们自己逻辑结束 */
    
      state= queue.reduce((newState,action)=>{
        return {...newState,...action}
      },state); 
    }
    handleClick();
    console.log(state); // 1
        // setState笔试题考察 下面这道题输出什么
    class Example extends React.Component {
      constructor() {
      super()
      this.state = {
        val: 0
      }
    }
    // componentDidMount中isBatchingUpdate=true setState批量更新
    componentDidMount() {
      this.setState({ val: this.state.val + 1 }) // 添加到queue队列中,等待处理
      console.log(this.state.val)
      // 第 1 次 log
      this.setState({ val: this.state.val + 1 }) // 添加到queue队列中,等待处理
      console.log(this.state.val)
      // 第 2 次 log
      setTimeout(() => {
        // 在原生事件和setTimeout中(isBatchingUpdate=false),setState同步更新,可以马上获取更新后的值
        this.setState({ val: this.state.val + 1 }) // 同步更新
        console.log(this.state.val)
        // 第 3 次 log
        this.setState({ val: this.state.val + 1 }) // 同步更新
        console.log(this.state.val)
        // 第 4 次 log
        }, 0)
      }
      render() {
        return null
      }
    }
    
    // 答案:0, 0, 2, 3

第126题 在实际工作中,你对Vue做过哪些优化

  • v-if和v-show
    • v-if彻底销毁组件
    • v-show使用dispaly切换none
    • 实际工作中大部分情况下使用v-if就好,不要过渡优化
  • v-for使用key
    • key不要使用index
  • 使用computed缓存
  • keep-alive缓存组件
    • 频繁切换的组件 tabs
    • 不要乱用,缓存会占用更多的内存
  • 异步组件
    • 针对体积较大的组件,如编辑器、复杂表格、复杂表单
    • 拆包,需要时异步加载,不需要时不加载
    • 减少主包体积,首页会加载更快
    • 演示
        <!-- index.vue -->
    <template>
      <Child></Child>
    </template>
    <script>
    import { defineAsyncComponent } from 'vue'
    export default {
      name: 'AsyncComponent',
      components: {
        // child体积大 异步加载才有意义
        // defineAsyncComponent vue3的写法
        Child: defineAsyncComponent(() => import(/* webpackChunkName: "async-child" */ './Child.vue'))
      }
    }
    </>
    
    <!-- child.vue -->
    <template>
      <p>async component child</p>
    </template>
    <script>
    export default {
      name: 'Child',
    }
    </script>
  • 路由懒加载
    • 项目比较大,拆分路由,保证首页先加载
    • 演示
        const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home // 直接加载
      },
      {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        // 路由懒加载
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
  • 服务端SSR
    • 可使用Nuxt.js
    • 按需优化,使用SSR成本比较高
  • 实际工作中你遇到积累的业务的优化经验也可以说

连环问:你在使用Vue过程中遇到过哪些坑

  • 内存泄露
    • 全局变量、全局事件、全局定时器没有销毁
    • 自定义事件没有销毁
  • Vue2响应式的缺陷(vue3不在有)
    • data后续新增属性用Vue.set
    • data删除属性用Vue.delete
    • Vue2并不支持数组下标的响应式。也就是说Vue2检测不到通过下标更改数组的值 arr[index] = value
  • 路由切换时scroll会重新回到顶部
    • 这是SPA应用的通病,不仅仅是vue
    • 如,列表页滚动到第二屏,点击详情页,再返回列表页,此时列表页组件会重新渲染回到了第一页
    • 解决方案
      • 在列表页缓存翻页过的数据和scrollTop的值
      • 当再次返回列表页时,渲染列表组件,执行scrollTo(xx)
      • 终极方案:MPA(多页面) + App WebView(可以打开多个页面不会销毁之前的)
  • 日常遇到问题记录总结,下次面试就能用到

第125题 前端常用的设计模式和使用场景

  • 工厂模式
    • 用一个工厂函数来创建实例,使用的时候隐藏new,可在工厂函数中使用newfunction factory(a,b,c) {return new Foo()}
    • jQuery$函数:$等于是在内部使用了new JQuery实例(用工厂函数$包裹了一下),可以直接使用$(div)
    • reactcreateElement
  • 单例模式
    • 全局唯一的实例(无法生成第二个)
    • Vuex Reduxstore
    • 如全局唯一的dialogmodal
    • 演示
                // 通过class实现单例构造器
        class Singleton {
          private static instance
          private contructor() {}
          public static getInstance() {
            if(!this.instance) {
              this.instance = new Singleton()
            }
            return this.instance
          },
          fn1() {}
          fn2() {}
        }
        
        // 通过闭包实现单例构造器
        const Singleton = (function () {
          // 隐藏Class的构造函数,避免多次实例化
          function FooService() {}
        
          // 未初始化的单例对象
          let fooService;
        
          return {
            // 创建/获取单例对象的函数
            // 通过暴露一个 getInstance() 方法来创建/获取唯一实例
            getInstance: function () {
              if (!fooService) {
                fooService = new FooService();
              }
              return fooService;
            }
          }
        })();
        // 使用
        const s1 = Singleton.getInstance()
        const s2 = Singleton.getInstance()
        // s1 === s2 // 都是同一个实例
  • 代理模式
    • 使用者不能直接访问对象,而是访问一个代理层
    • 在代理层可以监听get set做很多事
    • ES6 Proxy实现Vue3响应式
        var obj = new Proxy({},{
      get:function(target,key,receiver) {
        return Refect.get(target,key,receiver)
      },
      set:function(target,key,value,receiver) {
        return Refect.set(target,key,value,receiver)
      }
    })
  • 观察者模式
    • 观察者模式(基于发布订阅模式)有观察者,也有被观察者
    • 观察者需要放到被观察者中,被观察者的状态变化需要通知观察者 我变化了,内部也是基于发布订阅模式,收集观察者,状态变化后要主动通知观察者
        class Subject { // 被观察者 学生
      constructor(name) {
        this.state = 'happy'
        this.observers = []; // 存储所有的观察者
      }
      // 收集所有的观察者
      attach(o){ // Subject. prototype. attch
        this.observers.push(o)
      }
      // 更新被观察者 状态的方法
      setState(newState) {
        this.state = newState; // 更新状态
        // this 指被观察者 学生
        this.observers.forEach(o => o.update(this)) // 通知观察者 更新它们的状态
      }
    }
    
    class Observer{ // 观察者 父母和老师
      constructor(name) {
        this.name = name
      }
      update(student) {
        console.log('当前' + this.name + '被通知了', '当前学生的状态是' + student.state)
      }
    }
    
    let student = new Subject('学生'); 
    let parent = new Observer('父母'); 
    let teacher = new Observer('老师'); 
    
    // 被观察者存储观察者的前提,需要先接纳观察者
    student.attach(parent); 
    student.attach(teacher); 
    student.setState('被欺负了');
  • 发布订阅模式
    • 发布订阅者模式,一种对象间一对多的依赖关系,但一个对象的状态发生改变时,所依赖它的对象都将得到状态改变的通知。
    • 主要的作用(优点):
      • 广泛应用于异步编程中(替代了传递回调函数)
      • 对象之间松散耦合的编写代码
    • 缺点:
      • 创建订阅者本身要消耗一定的时间和内存
      • 多个发布者和订阅者嵌套一起的时候,程序难以跟踪维护
    • 发布订阅者模式和观察者模式的区别?
      • 发布/订阅模式是观察者模式的一种变形,两者区别在于,发布/订阅模式在观察者模式的基础上,在目标和观察者之间增加一个调度中心。
      • 观察者模式 是由具体目标调度,比如当事件触发,Subject 就会去调用观察者的方法,所以观察者模式的订阅者与发布者之间是存在依赖的(互相认识的)。
      • 发布/订阅模式 由统一调度中心调用,因此发布者和订阅者不需要知道对方的存在(publishersubscriber是不认识的,中间有个Event Channel隔起来了)
      • 总结一下:
        • 观察者模式:SubjectObserver直接绑定,没有中间媒介。如addEventListener直接绑定事件
        • 发布订阅模式:publishersubscriber互相不认识,需要有中间媒介Event Channel。如EventBus自定义事件
    • 实现的思路:
      • 创建一个对象(缓存列表)
      • on方法用来把回调函数fn都加到缓存列表中
      • emit 根据key值去执行对应缓存列表中的函数
      • off方法可以根据key值取消订阅
                class EventEmiter {
          constructor() {
            // 事件对象,存放订阅的名字和事件
            this._events = {}
          }
          // 订阅事件的方法
          on(eventName,callback) {
            if(!this._events) {
              this._events = {}
            }
            // 合并之前订阅的cb
            this._events[eventName] = [...(this._events[eventName] || []),callback]
          }
          // 触发事件的方法
          emit(eventName, ...args) {
            if(!this._events[eventName]) {
              return
            }
            // 遍历执行所有订阅的事件