前端知识大总结 | 青训营笔记

池恩
106 阅读5分钟

这是我参与「第五届青训营 」笔记创作活动的第17天

前端学习也有一段时间了，今天来总结一下前面学到的东西吧。

一、HTML

1、HTML 标签语义化优缺点

优点：

  1. 使HTML的结构更清晰
  2. 代码的可读性较好
  3. 代码的可维护性好
  4. 搜索引擎可根据标签的语言确定上下文和权重
  5. 移动设备的支持度更好

缺点：

  • 低版本浏览器存在兼容性问题（例如 IE9 以下浏览器）

2、HTML新特性

常用标签

  • header、nav、article、footer、section、aside、audio(音频)、video(视频)、embed、canvas、svg等

常用属性

  • input的属性值：calendar、date、time、email、url、search
  • hidden、draggable等

二、CSS 部分

1、CSS新特性

  1. 边框；border-radius(圆角)、border-image(图片)、border-shadow(阴影)等等
  2. 文字效果：text-justify(对齐方式)、text-shadow(阴影)、text-wrap(换行)等等
  3. 过度(transition)
  4. 动画(animation)
  5. 计算属性(calc)
  6. 伪类：nth-child、nth-of-type等
  7. ...

2、常见的布局方式

  1. 弹性布局(flex)
  2. 流式布局(百分比布局)
  3. 响应式布局(使用媒体查询让一套代码适配多种设备终端)
  4. rem布局(通过设置html根节点的font-size大小实现)
  5. bfc布局
  6. 瀑布流布局
  7. 双飞翼布局
  8. ...

3、盒子模型

  • W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding。
  • IE 盒模型：属性width,height包含border和padding，指的是content+padding+border。

三、JS 部分

1、原型

可以通过构造函数，生成一个新的对象的对象，就是原型，即原型的对象

2、原型链

调用原型上定义的属性，会沿着__proto__这条链往上查找，直到查找到 null 为止，这条链就叫原型链

3、作用域

有全局作用域和局部作用域，局部作用域分为块级作用域和函数作用域（函数在定义的时候，不是调用的时候，就已经确定了函数体内部自由变量的作用域，所以自由变量的作用域需要到创建这个函数的作用域下去寻找）

4、作用域链

在局部作用域中使用的自由变量，就是通过一级一级往上找的，这个查找的过程就是作用域链

5、执行上下文环境

在执行代码之前，把将要用到的所有的变量都事先拿出来，有的直接赋值了，有的先用undefined占个空。函数每次调用都会生成一个执行上下文环境

  • 全局上下文：变量声明，函数声明，this赋值
  • 函数上下文：变量声明，函数声明，this赋值，参数赋值，arguments赋值，自由变量的取值作用域

四、浏览器

主流浏览器内核

  • 谷歌浏览器：以前是Webkit内核，现在是Blink内核。
  • 火狐浏览器：Gecko内核，俗称Firefox内核。
  • 欧鹏浏览器：最初是自己的Presto内核，后来是Webkit，现在是Blink内核。
  • 苹果浏览器：Webkit内核。
  • IE浏览器：IE4以上版本都是Trident内核。

五、webpack

webpack 是一个模块打包器。webpack 的主要目标是将 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源（resource or asset）。

随着 webpack 不断地发展，webpack 配置变得越来越简单，构建速度也越来越快，官方文档上说 webpack4 比 webpack3 构建速度快了 98%，这还不仅如此，官方标识在 webpack5 中，会使用多进程构建，进一步优化构建速度。

Webpack 核心概念

  • 入口（入口）
  • 输出（输出）
  • 装载 机
  • 插件（插件）

入口

入口是 webpack 构建开始的地方，通过入口文件，webpack 可以找到入口文件所依赖的文件，并逐步递归，找出所有依赖的文件。

输出

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。

装载机

webpack 自身只支持 JavaScript。而 loader 能够让 webpack 处理那些非 JavaScript 文件，并且先将它们转换为有效的模块，然后添加到依赖图中，这样就可以提供给应用程序使用。

插件

插件其实就是一个类，通过监听 webpack 执行流程上的钩子函数，可以更精密地控制 webpack 的输出，包括：打包优化、资源管理和注入环境变量。

六、Vite

Vite, 一个基于浏览器原生ES MODULE的下一代前端开发和构建工具。利用浏览器解析import发出Http请求，服务端拦截返回给定资源，完全摒弃了打包操作，服务器即启即用。他不仅支持Vue文件，还搞定了热更新，并且热更新的速度并不会随着模块的增多而直线下降（其它构建工具的弊端），按需加载，仅使用需要的模块。在生产环境上使用Rollup进行构建。

Vite的特点

  1. 按需编译

  2. 极速的服务启动。 使用原生ESM模块，无需打包

  3. 轻量快速的热重载HMR。 无论应用程序大小如何，始终于一的模块热重载。

  4. 丰富的功能。 对 TypeScript、JSX、CSS 等支持开箱即用。

  5. 优化的构建。 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建

  6. 通用的插件。 vite和Rollup的插件是可以共用的

以上就是我对已学前端知识的总结，欢迎各位指出问题。

avatar
文章
阅读
粉丝