数据结构与算法
这一块在笔试、面试的代码题中考核较多,其中常考的数据结构主要有:数组、链表、队列、栈、Set、Map、哈希表等,不同数据结构有不同的方法以及储存原理,这些算是技术岗的必备知识。算法部分主要分为两大块,排序算法与一些其他算法题。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
排序算法根据考频高低主要有:快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种,这类考核点要么是算法的时间、空间复杂度、稳定度,要么是直接手写代码,故在理解算法原理的同时,对JS语言版的排序算法代码也要加强记忆。
- 二叉树层序遍历
- B 树的特性,B 树和 B+树的区别
- 尾递归
- 如何写一个大数阶乘?递归的方法会出现什么问题?
- 把多维数组变成一维数组的方法
- 知道的排序算法 说一下冒泡快排的原理
- Heap 排序方法的原理?复杂度?
- 几种常见的排序算法,手写
- 数组的去重,尽可能写出多个方法
- 如果有一个大的数组,都是整型,怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2
- 合并两个有序数组
- 给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)
url-loader 将文件作为 data URI 内联到 bundle 中
file-loader 将文件发送到输出目录
资源模块类型(asset module type),通过添加 4 种新的模块类型,来替换所有这些 loader:
-
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
-
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
-
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
-
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过
使用 url-loader,并且配置资源体积限制实现。
当在 webpack 5 中使用旧的 assets loader(如 file-loader/url-loader/raw-loader 等)和 asset 模块时,你可能想停止当前 asset 模块的处理,并再次启动处理,这可能会导致 asset 重复,你可以通过将 asset 模块的类型设置为 ‘javascript/auto’ 来解决。
我使用的图片打包配置
{
test: /.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: “asset”
},
现在,webpack 将按照默认条件,自动地在 resource 和 inline 之间进行选择:小于 8kb 的文件,将会视为 inline 模块类型,否则会被视为 resource 模块类型。
打包完之后的组件包:
可以看出有图片已经打包成resource 处理了,如果将打包后的js直接放到Html 中引用也是没有问题的,路径也正确。
问题步骤
-
webpack5 打包dist
-
将dist发布到npm
-
使用umi 集成包或者其他经过webpack 打包工程集成
-
将会出现图片加载失败,已屏蔽图片,图片是一个
file://
本地连接
问:为什么会是本地路径呢?
带着这个问题,一起看一个打包之后的代码
先看这一段:
/***/ “./src/img/earth_glow.png”:
/!********************************!\
!*** ./src/img/earth_glow.png ***!
********************************/
/***/ ((module, __unused_webpack_exports, webpack_require) => {
eval(“module.exports = webpack_require.p + “9e4abf8518ca87b87326.png”;\n\n//# sourceURL=webpack://3d-earth/./src/img/earth_glow.png?”);
/***/ }),
不难看出最终图片输出的路径是:webpack_require.p + 图片名
问:webpack_require.p 是什么路径呢?
__webpack_require是webpack 打包的核心函数,webpack_require.p一般是从 output.publicPath 读取的。
output.publicPath
可以参考官网了解详情 :传送门
重点看下常用几种类型:
output: {
// One of the below
publicPath: ‘auto’, // It automatically determines the public path from either import.meta.url
, document.currentScript
, <script />
or self.location
.
publicPath: ‘https://cdn.example.com/assets/’, // CDN(总是 HTTPS 协议)
css
1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解
js
1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
AnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
[外链图片转存中…(img-2K8VUWDG-1715847251597)]