网站导航
> 文章列表 > 前端必须了解的知识点（面试+实际开发）

前端必须了解的知识点（面试+实际开发）

网友: 文章列表 2024-03-22 04:56:13

前端必须了解的知识点（面试+实际开发）

目录

一、JavaScript

1.1 数组遍历方法

1.2 数组元素添加、删除

1.3 匹配、过滤、排序、合并

1.4 拷贝

二、CSS

2.1 CSS3动画属性

2.2 弹性布局

2.3 定位

三、Vue2.0

3.1 组件通信方式

3.2 路由跳转

四、前端性能优化

4.1 加载优化（减少http请求数）

4.2 图片优化

4.3 样式表和JS文件的优化

以下是我在工作中以及面试中的总结，后续还会不断更新，希望可以帮助到大家。

一、JavaScript

  • 1.1 数组遍历方法

方法名称 描述 注意
map()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；map() 方法按照原始数组元素顺序依次处理元素。

 当数组元素是基本数据类型时，map()方法不会改变原数组；当数组元素是引用类型时，map()方法会改变原数组
forEach() forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数 没有返回值；不改变原数组
for for用于循环代码块一定的次数
for in for/in主要用于循环遍历对象的属性

  • 1.2 数组元素添加、删除

添加：

  1. push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
  2. unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
  3. splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容

删除：

  1. shift() 方法用于把数组的第一个元素从其中删除，方法改变数组的长度
  2. pop() 方法用于删除数组的最后一个元素并返回删除的元素，方法改变数组的长度
  3. slice() 方法可从已有的数组中返回选定的元素，不会改变原始数组
  4. splice() 方法用于添加或删除数组中的元素，会改变原始数组

  • 1.3 匹配、过滤、排序、合并

匹配：

  1. find() 方法返回通过测试（函数内判断）的数组的第一个元素的值
  2. some() 方法用于检测数组中的元素是否满足指定条件（函数提供）
  3. every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）
  4. includes()用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false;不会改变原数组。
  5. indexOf()检索某个指定的元素在数组中首次出现的位置，返回元素的索引；不会改变原数组。

过滤：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,不会改变原始数组

排序：

  1. sort() 方法用于对数组的元素进行排序，排序顺序可以是字母或数字，并按升序或降序；默认排序顺序为按字母升序;会改变原数数组
  2. reserve()用于反转数组的元素顺序，会改变原数数组

合并：

concat()将数组和数组（或数组和元素)合并，并返回一个新的数组;不会改变原数组

  • 1.4 拷贝

浅拷贝：Object.assign()

深拷贝：JSON.parse(JSON.stringify())

区别：浅拷贝只复制某个对象的引用，而不复制对象本身，新旧对象还是共享同一块内存；深拷贝会创造一个一摸一样的对象，新对象和原对象不共享内存，修改新对象不会改变原对对象。

二、CSS

  • 2.1 CSS3动画属性

值 说明
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
initial 设置属性为其默认值。 
inherit 从父元素继承属性。 

  • 2.2 弹性布局

注意：flex属性写在父盒子里面

/* 主轴居中 */justify-content: center;/* 侧轴剧中 */align-items: center;

  • 2.3 定位

值 描述
absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

三、Vue2.0

  • 3.1 组件通信方式

(1) 父子通信

父向子传递数据是通过 props，子向父是通过 events（$emit）
通过父链 / 子链也可以通信（$parent / $children）
ref 也可以访问组件实例；
provide / inject
$attrs/$listeners

(2) 兄弟通信

Bus
Vuex

(3) 跨级通信

Bus
Vuex
provide / inject
$attrs / $listeners

  • 3.2 路由跳转

router-link（声明式路由，在页面中调用）
this.$router.push() (在函数里面调用)
this.$router.resolve()打开新窗口跳转

四、前端性能优化

4.1 加载优化（减少http请求数）

  • 合并图片：当图片较多时，像精灵图，雪碧图可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。
  • 合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。
  • 去掉不必要的请求，开发写代码或者系统升级之后残留的无效请求连接。
  • 首屏加载：首屏快速显示可大大的提升用户对页面速度的感知，应尽量针对首屏的快速显示做出相应的优化。
  • 充分利用缓存：来减少向服务器发送的请求数，节省网络资源，所有静态资源都要放在服务器端并设置缓存，并且要尽量使用长缓存。
  • 预加载：大型资源页面可使用Loading，资源加载完成后再显示页面，但是加载时间过长，会造成负体验。
  • 异步加载第三方资源：第三方资源不可控，会影响页面加载，所以要异步加载第三方资源。

4.2 图片优化

  • 尽可能的使用PNG格式的图片，它相对来说体积较小，可以使用工具压缩，在上线之前最好进行一定的优化。
  • 同时在代码中进行图片的延迟加载，也叫做赖加载。
  • 避免img、iframe等标签的src属性为空：空src会重新加载当前页面，影响速度和效率。

4.3 样式表和JS文件的优化

  • 头部内联的样式和脚本会阻塞页面的渲染，一般我们会把css样式表文件放到文件的头部使用link引入，这样可以让CSS样式表尽早地完成下载。
  • 对应js脚本文件，一般我们把脚本放在尾部并使用异步方式加载，这样可以尽最大限度的减少样式和脚本对页面的阻塞。 

各位看官，阅读完这篇文章之后，如果对你有帮助的话，那就麻烦点个关注吧！！！

网络标签：

相关问题