题

KsxS666
116 阅读9分钟

一、一个元素给他相对定位，同时向左移动10px，会触发重排回流吗？

会。相对定位的元素处于文档中，尺寸的改变或者位置的改变都会触发重排（回流）。

二、两个div自适应高度，并且高度相同，如何布局

1、给父元素设置position:relative，左边的子元素设置position:absulote，且左边元素的高度为100%。CSS代码如下：

div{
  border: 1px solid black;
}
/*position*/
.left{
  height: 100%;
  width: 100px;
  background: aqua;
  position: absolute;
}
.right{
  width: 300px;
  margin-left: 110px;
  background: antiquewhite;
}
.parent{
  position: relative;
}

2、flex布局。父元素的align-items:stretch属性可以让子元素高度自动铺满。

 /*flex布局*/
.parent{
  display: flex;
  display: -webkit-flex;
  display: -o-flex;
  display: -moz-flex;
  display: -ms-flex;
  align-items: stretch;
 }
.left{
  background: aqua;
}
.right{
  margin-left: 110px;
  background: antiquewhite;
}

三、知道treeshaking吗

Tree-Shaking 是一种基于 ESModule规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码. 比如在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。 主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。而Vue3源码引入tree shaking特性，将全局 API 进行分块。 如果你不使用其某些功能，它们将不会包含在你的基础包中 就是比如你要用watch 就是import {watch} from 'vue' 其他的computed 没用到就不会给你打包减少体积.

四、了解webpack的什么配置，或者插件？

1、文件打包的入口出口。

2、webpack如何开启一台服务

3、weboack如何打包图片、静态资源等(file-loader)

4、webpack配置loader

5、配置plugin

6、配置sourcemap

7、配置babel语法降级

8、配置externals（如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals）

module.exports = {
  entry : './src/index.js'  // 配置打包入口文件
  output : { // 配置打包完成的出口文件 路径 
    path : path.resolve(__dirname , './dist/'),
    filename : 'building.js'
  }
}

var path = require('path'); //引入node的核心模块path，来处理路径
module.exports = {
    mode: 'development',
    entry: './src/index.js', //入口文件为当前目录下的src下的index.js文件
    module: {//这里是新增的配置
        rules: [{
            test: /.(jpe?g|png|gif)$/,
            use: {
                loader: 'file-loader'
            }
        }]
    },
    output: {
        filename: 'bundle.js', //打包后的文件名
        path: path.resolve(__dirname, 'bundle') //__dirname:表示当前文件所在的文件目录，也就是项目根目录
    },

}

  "dev": "webpack-dev-server"

const path = require("path");

module.exports = {
 devServer : {  // 
   host : 'localhost', // 服务启动的 ip 地址 localhost 即本地
   port : '3000', // 开启的端口
   open : true // 是否开启服务后 打开浏览器
 },
 entry : './src/index.js',
 output : {
   path : path.resolve(__dirname , './dist/'),
   filename : 'building.js'
 }
}

五、webpack loader 和 plugin的区别

webpack默认只能处理js文件，如果项目中使用了图片，css，less，vue以及其他非js文件，webpack就不知道该怎么办了，这个时候loader就闪亮登场了，loader可以帮助我们处理特定类型的文件，有了合适的loader，webpack就可以正确的对一些非js文件进行翻译了 plugin是插件的意思，通常用于对现有的架构进行扩展。`webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

六、项目中 webpack 用了哪些 loader 和 plugin

less-loader | sass-loader: css预处理器,用于将less | sass编译成css.同时也可以配置全局css变量
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
- 处理css:
css-loader和style-loader
css-loader ，主要是 解析我们编写的 css ,因为 css 本身并不是一个模块，所以在js 中导入 css 你就需要 `css-loader` 来识别它们，而 style-loader 就是将 css-loader 解析完的结果 ，作为样式内容插入到 html style标签内，这样我们样式就生效了。
postcss-loader, 用于补充css样式各种浏览器内核前缀，用于处理css兼容问题，需要和postcss、postcss-preset-env配合使用
- babel
babel-loader, 将Es6+ 语法转换为Es5语法
- svg
svg-sprite-loader, 用于将加载的 svg 图片拼接成 雪碧图，放到页面中.配合封装的svg-icon组件。通过传入 svg 文件名称前缀就可以在页面上展示 svg 图标。

module.exports = {
    chainWebpack: config => {
        const svgRule = config.module.rule('svg')  // 找到svg-loader
        
        svgRule.uses.clear() // 清除已有的loader，不这样做会添加到此loader之后，svg-sprite-loader不会生效
        svgRule.exclude.add(/node_modules/)   // 正则匹配排除node_modules目录
        svgRule
            .test(/.svg$/)
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]',
            })
    }
}

 html-webpack-plugin， html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:"development",
    plugins: [
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./public/index.html'
        })
    ]
}
// 执行webpack打包命令，在 ./dist 文件夹下会生成，main.js和index.html两个文件，index.html文件引入了main.js文件

七、如何减少 webpack 打包体积

1、CDN抽离不经常更新的库
比如 `element-ui`,`echarts`,`xlsx`,`moment`以及`vue`的三大件都可以使用`cdn`缓存，以提高我们的速度以及缩小包大小
externals：外部扩展,详细了解查看看官网文档，这个操作同时会将`chunk-vendors.js`体积缩小，减少首屏白屏时间

externals: {
    key: value
}
// key是第三方依赖库的名称，同package.json文件中的dependencies对象的key一样
// value值可以是字符串、数组、对象。应该是第三方依赖编译打包后生成的js（要用CDN引入的js文件）文件，执行后赋值给window的全局变量名称

2、图片优化
由于项目中图片用的比较多、打包后图片文件很大导致dist包体积很大，这时候想通过webpack插件去处理图片资源、从而瘦身dist包体积
  • url-loader ｜ file-loader
webpack对png等图片静态资源打包用到的插件，对图片路径的处理方法常用的有两种，一种是file-loader，一种是url-loader.简单点说url-loader包含了file-loader，通过限定一个图片的大小（limit），来判断是否采用编码的方式。小于limit的时候使用base64进行压缩，大于则使用file-loader变成路径

var img = require('./banner.jpg)
// 然后运行打包命令就发生报错现象,提示我们需要提供相关的loader来处理图片类型的文件

file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。

url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。

1.file-loader

作用：

（1）指定输出文件的路径——即打包后文件的存储位置。

（2）生成解析文件的路径——即打包后引用文件时的URL地址。

（3）返回一个字符串形式的 JS 模块，加载这个模块，就可以得到文件路径；

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: 'photo[hash:6].[ext]'
                esModule: false
            }
        }
    ]
}

效果：

image.png

1.url-loader

作用：
url-loader包含了file-loader，但 url-loader 不依赖于 file-loader，通过限定一个图片的大小（limit），来判断是否采用编码的方式

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[path]photo[hash:6].[ext]'
                limit: 1024 * 40
            }
        }
    ]
}

效果：

image.png

3. 按需加载第三方库如element
```js
// 配置Babel.config.js
module.exports = {
  ...
  plugins:[
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
}
// 如echarts
module.exports = {
  ...
  plugins:[
   ...
   'equire'
  ]
}
// 按需导入组件

import Vue from 'vue'
import { Dialog } from 'element-ui'
Vue.use(Dialog)

// 按需使用echarts
// eslint-disable-next-line
const echarts = equire([
  "line",
  "bar"
])
export default echarts


4. gzip压缩
前端使用 compression-webpack-plugin 插件

 configureWebpack: {
      plugins: [
            // gizp压缩
            new CompressionWebpackPlugin({
              test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
              threshold: 10240, // 对10K以上的数据进行压缩
              deleteOriginalAssets: true
            })
      ]
    },

将dist文件放入node环境

const path = require('path');
const fs = require('fs');
//导入express模块
const express = require('express')
//创建express的服务器实例
const app = express()

app.use((request, response, next) => {
	//由于我是把server.js和dist文件夹放在同一路径下，因此需要拼接
    const fullPath = path.join(__dirname,'dist',`${request.originalUrl}.gz`);     
    // 检测是否存在同名.gz压缩文件
    if (fs.existsSync(fullPath)) {
        // 存在就告诉浏览器用gzip编码格式来解析，并把对应的“.gz”格式文件发送给浏览器。
        response.setHeader('Content-Encoding', 'gzip')  
        response.sendFile(fullPath);
    } else {
        next()
    }
   })

//将dist目录托管为静态资源服务器
app.use(express.static('./dist'))

//调用app.listen方法，指定端口号并启动web服务器
app.listen(3140,function(){
    console.log('Express server running at http://127.0.0.1:3140');
})


5.让项目打包更快

module.exports = {
  ...
  chainWebpack: config =>{
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')
  }
}

注意：路由懒加载不会减小体积，只会减小首屏渲染得时间，因为组件其实都在已经在里面了

八、Vue路由钩子

- 全局守卫
beforeEach: 在路由跳转前触发，参数包括to,from,next三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚
to：代表要进入的目标，它是一个路由对象
from：代表当前正要离开的路由，同样也是一个路由对象
next：这是一个必须需要调用的方法，而具体的执行效果则依赖next方法调用的参数
beforeResolve:这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就会被调用。即在beforeEach和组件内beforeRouteEnter之后，afterEach之后，afterEach之前调用

- 路由独享守卫
是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。其位置如下，也就是像File这样的组件都存在这样的钩子函数。目前它只有一个钩子函数beforeEnter。
- 局部守卫
是指在组件内执行的钩子函数，类似于组件内的生命周期函数，相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave三个

九、除了路由导航鉴权，还有其他方式吗？

1、渲染菜单时控制模块按钮的显示隐藏（不足：直接输入链接仍然可以访问模块）
2、借助vue-router 2.x版本新加的API addRouters动态添加路由信息（**不足：首次加载需要解析和添加，多跳转一次路由**）

十、数据结构

  1. 数组：Array
  2. 堆栈：Stack
  3. 队列：Queue
  4. 链表：Linked Lists
  5. 树：Trees
  6. 图：Graphs
  7. 字典树：Trie
  8. 散列表（哈希表）：Hash Tables

十一、布局方案

  • 静态布局

最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。缺点：移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现

  • 流式布局（百分比布局）

左侧固定+右侧自适应
左右固定宽度+中间自适应

页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。 你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。 优点 元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化

  • 弹性布局

十二、堆和栈

　栈：先进后出，由操作系统自动分配释放，存放函数的参数值、局部变量值等。其操作方式类似于数据结构中的栈；是一种运算受限的线性表；

　堆：先进先出，动态分配的空间一般由程序员来分配释放，若不主动释放，程序结束由系统回收，分配方式类似于链表；是一个特定的存储区或寄存器，他的一端是固定的，另一端是浮动的。

　　

avatar
文章
阅读
粉丝