前端试题1#记录

junsens

已于 2024-04-01 16:18:31 修改

阅读量722

点赞数 14

文章标签：前端 javascript scss sass html 前端框架

于 2024-03-30 10:26:37 首次发布

本文链接：https://blog.csdn.net/junsens/article/details/137164496

版权

1、sass中一般在function、变量前面加什么符号？

正答：function:@、变量:$

2、css3中伪类选择器

正答：

（1）动态伪类选择器（5个）

:link 选择地址没有被访问过的超链接元素

:visited 选择地址被访问过的超链接元素

:hover 选择鼠标悬停在上面的元素。

:active 选择鼠标在上面并且按键按下不松手的元素 :

focus 选择获取焦点的元素。

（2）结构伪类选择器（12个）

:root 选择到根元素。

:empty 选择到既不能有文本内容也没有后代元素的元素。

:first-child 所有兄弟元素中的第一个。

:last-child 所有兄弟元素中的最后一个。

:nth-child(n) 所有兄弟元素中的第n个，n是个数字。

:nth-last-child(n) 所有兄弟元素中的倒数第n个，n是个数字。

:only-child 没有兄弟元素的元素 :first-of-type 所有兄弟元素中同类型的第一个。

:last-of-type 所有兄弟元素中同类型的最后一个。

:nth-of-type(n) 所有兄弟元素中同类型的第n个,n是个数字。

:nth-last-of-type(n) 所有兄弟元素中同类型的倒数第n个，n是数字。

:only-of-type 没有同类型兄弟元素。

（3）目标伪类选择器（1个）

:target 选择当前锚点指向的元素。

（4）UI元素伪类选择器（3个）

:enabled 选择可以使用的表单控件（没有设置disabled 属性）。

:disabled 选择不可以使用的表单控件（设置了disabled属性）。

:checked 选择到被选中的单选按钮、复选框、下拉选项（option）。

（5）语言伪类选择器 (1个)

lang() 根据语言选择元素（lang 属性的值）。

3、canvas理解，canvas相关的库

canvas理解：Canvas是一个HTML5元素，用于在Web页面上绘制2D或3D图形。它允许使用JavaScript在网页上创建和操作图形。Canvas的主要功能是绘图，通过使用path API，可以创建复杂的形状和路径。同时，还可以在Canvas上添加图像，通过缩放、旋转、移动等操作进行处理。还可以用于创建动画效果。可以使用JavaScript逐帧地修改和更新Canvas元素，从而创建动画效果。可以使用setTimeout()或requestAnimationFrame()函数来控制动画的帧速率和时间。但也可以用来实现其他功能，如交互式游戏。

canvas相关的库：three.js、D3.js

4、常用打包工具及常用功能

1、webpack：

（1）entry：一个可执行模块或者库的入口。

（2）chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一个chunk，这是打包。

（3）loader：文件转换器。例如把es6转为es5，scss转为css等。

常见的 Loader：

image-loader：加载并且压缩图片文件。
css-loader：帮助 webpack 打包处理 css 文件，使用 css-loader 必须要配合使用 style-loader。
style-loader：用于将 css 编译完成的样式，挂载到页面的 style 标签上。但是要注意 loader 执行顺序，style-loader 要放在第一位，loader 都是从后往前执行。
babel-loader：把 ES6 转换成 ES5。
sass-loader: css 预处理器，能更好的编写 css。
postcss-loader: 用于补充 css 样式在各种浏览器的前缀，很方便，不需要手动写了。
eslint-loader: 用于检查代码是否符合规范，是否存在语法错误。
url-loader: 处理图片类型资源，可以根据图片的大小进行不同的操作，如果图片大小大于指定大小，则将图片进行资源打包，否则将图片转换为 base64 格式字符串，再把这个字符串打包到 JS 文件里。

（4）plugin：扩展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook，添加功能。

2、vite

5、JSON与字符串相互转换的两个函数及操作数组的内置函数

JSON与字符串相互转换的两个函数:JSON.stringify()、JSON.parse();
操作数组的内置函数:

1. every() 检测数组元素的每个元素是否都符合条件
2. filter() 检测数组元素，并返回符合条件所有元素的数组
3. find() 返回符合传入测试（函数）条件的数组元素
4. map() 通过指定函数处理数组的每个元素，并返回处理后的数组
5. slice() 选取数组的的一部分，并返回一个新数组
6. splice() 从数组中添加或删除元素
7. shift() 删除数组的第一个元素
8. unshift() 向数组的开头添加一个或更多元素，并返回新的长度
9. pop() 删除数组的最后一个元素并返回删除的元素
10. push() 向数组的末尾添加一个或更多元素，并返回新的长度

6、常见的首批加载速度优化

(1)使用 terser-webpack-plugin 清除 console.log

npm install terser-webpack-plugin --save-dev


chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
        args[0].terserOptions.compress.drop_console = true
        return args
      })
}

(2)使用 compression-webpack-plugin 开启 gzip 压缩(开启Gzip压缩进行前端优化)详情点击此处

npm install compression-webpack-plugin -D

const CompressionWebpackPlugin = require('compression-webpack-plugin')
 
module.exports = {
    plugins: [
      //使用gzip打包
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ],
}

(3)配置使用 CDN 方式引入资源库

(4)图片压缩

npm install image-webpack-loader --save-dev

config.module
      .rule('images')
      .use('imageWebpackLoader')
      .loader('image-webpack-loader')
      .options({
        disable: process.env.NODE_ENV === 'development', // 开发环境下禁止压缩
        gifsicle: {
          interlaced: false
        }
      })

(5)路由懒加载

// 将 import UserDetails from './views/UserDetails.vue'

// 替换成

const home= () => import('./views/home.vue')

const router = createRouter({
  // ...
  routes: [{ path: '/home', component: home}],
})

//写法二

{
    path: "/login",
    component: Layout,
    redirect: "/login",
    children: [
      {
        path: "/login",
        component: (resolve) => require(["@/views/login/index"], resolve),
        name: "login",
        meta: { title: "登录", icon: "login", affix: true },
      },
    ],
},

7、vue的表单修饰符有哪些？vue2和vue3修饰符之间的变化？

vue的表单修饰符：lazy、trim、number

vue2和vue3修饰符之间的变化：vue3修改默认 prop 名和事件名、废除 model 选项和 .sync 修饰符、支持使用多个 v-model、自定义 v-model 修饰符。

8、使用原型链为a扩展一个名为abc的方法

var a = function(){
    this.name = 'a'
}

Object.defineProperty(
    a.prototype, 'abc', 
    { 
        value: function() { 
            console.log('abc'); 
        }, 
        writable: false, 
        enumerable: false, 
        configurable: false 
    }
);