（达达前端加星，提升前端技能）
内容较多，请静下心来慢慢阅读。 请您今后多多关注。
说到高级Web前端开发，必须掌握的就是HTML和CSS代码的优化。 前端优化非常重要。 这是你走向成功之路需要关注的一个知识点。 说到代码优化，我们首先需要学习的是前端命名规范、HTML代码优化、CSS代码优化。
前端命名标准非常重要。 我一直说这非常重要。 当你用过别人的代码重构过的时候，你就会知道，如果看到一长串的代码，不明白人家以前是怎么写的，你就会无从下手。 依靠猜测，最终的结果就是不断浪费时间。
掌握前端优化目录的学习
前端命名规范，前端结构组织，文件命名规范，项目中代码的组织结构必须清晰易懂，同一类型的文件可以归入同一文件夹，文件命名规则需要统一，命名必须意义明确。 这里有意义意味着名称应该易于理解。 英语单词是可以缩写的，没必要沾沾自喜，写那么长的单词。
命名规范在前端领域，涉及HTML、CSS，HTML代码中所有标签名和属性都应该小写，属性值要用引号括起来。 元素的id和class必须按照规定命名。 代码一定要缩进并格式化，才能让代码美观。 有时可以在 HTML 代码中添加必要的注释。
关于CSS命名的规范，尽量使用类选择器来定义样式。 命名类时，以父元素的类名为前缀，并使用-符号连接。 用空格分隔类名和样式。
关于命名约定，变量名称区分大小写。 第一个字符不允许是数字，不允许有空格，不允许有其他标签符号。 尝试使用有意义的名称，不要使用关键字或保留字。 。
优化前端代码，优化HTML代码。 为了让网站搜索更好，让用户更快的搜索到我们的网站，要写好HTML代码，使用正确的HTML结束标签，并在HTML代码层级之间进行合理的缩进和属性。 值需要使用双引号，结构和样式有效分离，结构和行为有效分离。
对于 HTML 语义标签，HTML5 提供了一些新的语义元素来阐明网页的不同部分，包括：
为了优化前端效果，可以删除多余的容器元素来降低代码层级，避免使用表格进行页面布局，改用div+css样式布局。
CSS代码优化，在各个浏览器中，相同元素的解析结果不同，所以需要手动重置一些样式。
去掉标签的默认样式，如p、li、input等。
HTML5新标签设置为：block。
重置某些元素的样式，例如超链接、字体大小等。
css样式选择器优先级
对于 CSS 样式选择器，优先级较高的选择器将覆盖优先级较低的选择器。
首先，id 选择器的权重为 100，其次，类选择器的权重为 10，第三，标签选择器的权重为 1。
注意，尽量不要在 CSS 样式中使用 id 选择器。 它会降低代码的可重用性。 尽量不要使用！，它会降低代码的可重用性，并尽量减少子选择器的级别。
去除多余的CSS样式并优化结构
定义简洁的CSS样式规则，合并相关的CSS样式规则，定义简洁的属性值，合并相同的，删除无效的。
马赛克
css，也称为css 、精灵。
它是一种Web应用程序处理方法，将分散的背景图片组合成一张大图片，然后利用CSS的-属性对背景进行定位，以减少图片请求次数，加快加载速度。
属性
-color，描述要使用的背景颜色
-，描述指定背景图片的位置
-size，描述指定背景图片的大小
-，描述如何重复背景图像
-，描述指定背景图片的定位区域
-clip，描述指定背景的绘制区域
-，描述指定背景图像是固定的还是与页面的其余部分一起滚动
-image，描述要使用的背景图像
-属性
top、left、right等，top表示垂直位置的顶部，表示垂直位置的底部，left表示水平位置的最左边，表示水平位置的中间，right表示水平位置的最右边位置。
x% y%
第一个值是水平位置，第二个值是垂直位置。
左上角是0% 0%。 右下角是100% 100%。
如果仅指定一个值，则另一值将为 50%。
x 位置 y 位置
第一个值是水平位置，第二个值是垂直位置。
左上角是0 0。
单位是像素 (0px 0px) 或任何其他 CSS 单位。
如果仅指定一个值，则另一值将为 50%。
您可以混合% 和值。
CSS创建工具
css制作工具，以及打包工具来制作。
打包工具，现在很多流行的前端打包工具都支持CSS集成，比如
只需要安装--依赖，然后在配置文件中引用依赖var=('-')，最后在配置文件中添加代码即可。
代码压缩、打包工具
前端优化、压缩和css非常重要。 最常用的代码压缩工具之一是它会分析代码语法树并理解代码的含义，从而可以进行诸如删除无效代码、删除日志输出代码、缩短变量名等优化。
访问需要以插件的形式，是常用的插件。 只需要在配置文件..js中添加以下代码即可。
压缩CSS代码是常用的，并且是基于的，它可以让我们的代码提高加载速度和代码混淆。
图片预加载
简单来说，预加载就是提前在本地请求并加载所有需要的资源，以便需要时可以直接从缓存中取资源。
图像延迟加载
首屏的加载是采用图片延迟加载技术，即在可见区域加载。
对于延迟加载图像，请使用 ..js。 这个js是一个基于的延迟加载插件，封装了延迟加载使用的方法和实现。 第二个是echo.js，这是一个非常简单、实用、轻量级的图像延迟加载插件。
代码优化
代码可维护性
什么是代码和结构的分离？
代码和结构的分离意味着将HTML代码和代码分离。 首先，在 HTML 中分离，其次，在 HTML 中分离。
风格和结构的分离是什么？
样式和结构的分离意味着CSS代码和HTML代码的有效分离。
什么是数据和代码的分离？
数据和代码的分离也可以认为是前后端分离的一种体现。 后端接口只负责返回json格式的数据，不会返回带标签甚至样式或组合的数据。
代码可调整性
代码可调试性，可以使用.log、alert、try...catch捕获异常进行调试。
.log，即添加.log(msg)
msg是需要打印的信息，可以是变量，也可以是字符串。 变量类型可以是数组、对象、数字等。
该关键字用于停止执行和调试函数。 该关键字与在调试工具中设置断点的效果相同。
警报与.log 相同。 警报是通过添加alert(msg)来添加的。 Msg是需要弹窗的信息。 值得一提的是，这个弹框是强制屏蔽的。 只有关闭弹窗才能解锁，请谨慎使用。 。
try...catch 用于try...catch... 捕获异常。 try代码块代表可能引发异常的代码，catch代表捕获异常对象，无论是否发生异常都会执行。
,,
,,
DOM优化
提高文件的加载速度，合并代码，尽量少用标签，无阻塞加载。 这是通过向标签添加 defer 属性或 async 属性来实现的。
动态创建标签来加载、优化 DOM 操作、访问和修改 DOM。 都说访问DOM很消耗性能，循环访问也是如此，所以需要减少DOM访问。
回流焊和重绘
使用 style批量修改DOM。
DOM脚本加载优化
学习前端高级水平，掌握入门
和
是一个模块构建工具，由于应用程序的复杂性不断增加，它已成为 Web 开发不可或缺的一部分。
它帮助我们打包、编译和管理项目所需的许多资源文件和依赖库。 支持AMD和ES6模块系统，兼容多种JS编写规范。 它可以处理模块之间的依赖关系，因此具有更强大的JS模块化功能。 它可以压缩图像，对css和js文件进行语法检查和压缩。 ，编译并打包。
构建工具没有标准
现在可供开发人员使用的构建工具包括
、gulp、、npm、grunt 等。
缺点是不适合Web开发初学者。 对于css、图片等非JS资源文件，需要先进行混淆处理。 文档不完整并且变化很大。 不同版本的使用有很大差异。
安装
全局安装，用于使用命令行全局打包文件
//安装-g //安装--cli -g
创建一个新的项目文件夹
进入项目文件夹，打开cmd命令行窗口
-v
显示版本号说明安装成功，可以在全局任意目录下使用。
基本应用
什么是SPA，它是一个单页面应用程序。
Page Web 是典型的打包应用。 一个典型的SPA应用主要由以下几个部分组成。
Index.html主文件，js文件，多个js文件可以合并打包成一个文件，css文件，多个css文件可以合并打包成一个文件。 图像可以通过压缩来优化。
新建src文件夹，存放开发文件。 在src目录下创建文件。
创建一个新的 dist 文件夹
该文件存放的是打包后的文件，不需要创建。 它可以在打包过程中自动创建。
打包，-mode，打包后已经根据三个js依赖打包并合并到dist/main.js中。
--文件名、输出文件路径
--文件名，用于指定其他配置文件
默认为 ..js
--mode模式、打包模式、生成模式、开发模式。
--watch 监控文件变化并自动打包
-p 压缩混淆的脚本
-d 生成Map映射文件
-- 显示进度并打印出编译进度的百分比值
--color 用不同的颜色标记不同的信息
-- 显示每个编译步骤的具体时间，可以帮助优化构建性能
--热热替换
--bail 如果编译过程中出现错误，立即停止编译
配置文件入门
通过定义配置文件来执行复杂的操作，文件名..js
配置文件的基本结构：
Entry，入口定义入口文件，默认文件./src/index.js
，输出定义导出文件，默认文件./dist/main.js
，解析路径映射，省略后缀名等。
，模块定义不同，允许处理非模块
、插件扩展功能
，开发服务器用于配置-dev-选项
简单的配置文件
你好世界示例：
修改.json文件
配置详细条目和
入口配置是指页面中的入口文件。 默认入口文件为./src/index.js。
导出配置是指生成的文件输出到哪里，./dist/main.js
路径、输出路径、输出文件名
，只能打包js文件，无法识别其他语法的文件。 如果要打包其他文件，首先需要识别不同的文件。
分类
分类说明
转换-、babel-、ts-、-
处理样式 style-、css-、less-、sass-、-
处理文件 raw--、url-、file-
处理数据 csv-、xml-
处理模板语言 html-、pug-、jade-、-
清洁并测试摩卡-,-
常用
阐明
css-解析 css 语句
style - 将标签添加到 css 解析的文本中
babel - 将 ES6+ 和 JSX 语法转换为 ES5 低版本语法
url--对未设置或小于限制字节设置的图像进行格式转换。
使用 file- 解析大于限制字节的图像。
文件解析项目中的url引入（包括img的src和url）
修改打包文件引用路径，使其指向正确的文件
less 编译器
vue-也推出了自己的vue-，可以方便的打包.vue文件的代码。
用于vue-cli（快速构建单页应用程序的脚手架）。
通天塔
babel是一个js编译器，通过语法转换器支持最新版本。 该插件允许您使用新语法而无需等待浏览器支持。
要使用 babel，您必须首先配置 . 文件，用于设置转码规则和插件，存放在项目根目录下。
在Linux系统中，以rc结尾的文件通常代表运行时自动加载的文件、配置等。
在. 文件中，您主要配置预设和插件。
配置项说明
默认编译js最新的语法糖，不负责翻译新的api和全局对象。 例如：let/const可以编译，但是. 和 。 无法编译。常用翻译器：babel--env、babel--(2016、2017)、babel--等
该插件控制如何转换代码。 Babel 默认只转换新的 js 语法，不转换新的 API，比如 Set、Maps 等全局对象——用来解决上述问题。
插件能扩展的功能和不能做的处理都可以由它来完成。
配置如何查找模块对应的文件。 启动后，会从配置的入口模块触发，查找所有依赖模块。 默认情况下，将使用模块化标准中约定编号的规则进行搜索。
属性说明
alias（翻译：别名）通过别名将原来的导入路径映射到新的导入路径
（翻译：）将数组导入模块时可以省略的文件后缀名
其他配置
配置项说明
是否生成以及如何生成
启动本地开发服务器
Watch监控文件变化并自动打包
自定义观看模式的选项
打包后如何在命令行显示性能提示？ 如果超过一定大小，是警告还是错误？
-开发-
它是一个小型Web服务器，可以自动监视项目文件的变化并自动刷新浏览器。 其HMR方式只替换更新的部分，而不需要重新加载页面，大大提高了刷新效率。
配置项说明默认值
自动刷新
当我们对业务代码进行一些修改并保存（ctrl+s）时，页面会自动刷新，修改会直接同步到页面。 无需手动刷新页面或重启服务 true
热热模块更换
无需配置（一般通过命令行--hot选项启动，插件会自动加载） true
主机主机地址
open 自动打开浏览器，可以指定浏览器，例如：--open ''false
默认端口是8080
当发生编译错误时，浏览器页面上会显示错误 false。
stats 用于控制编译时在shell上的输出内容
stats: "-only" 仅打印错误
除了””，””，””
: 对所有服务器资源使用 gzip 压缩 false
指定服务器资源的根目录，
如果不写值，则默认为项目目录“./”
它使用HTML5 API，任何跳转或404响应都可以指向index.html页面 true
例子：
跑步
npm 启动
运行后，-dev-就会开始运行。 打开浏览器，直接输入127.0.0.1:8080/index.html。 打包后的页面即可使用。
注意：
不需要将main.js文件引入到index.html中。 该文件会自动引入到打包好的index.html文件中。
-dev-运行后，浏览器中输出的页面全部在内存中运行。 只有构建完成后，dist目录下才会得到最终的结果文件。
ES6 基础知识
它和之间是什么关系？
它是语言的国际标准，是一种理想的实现。 ES6简称ES6，是该语言的下一代标准。
数据类型是一种唯一标识符，可以作为对象的唯一属性名称，这样任何人都无法覆盖或改写你设置的属性值。
作为对象属性名称
他们永远不平等。 创建时传入的相同值的参数也不相等。 因此，可以利用这一特性来解决属性名称的冲突问题，这也是该数据类型的主要目的。
该值不能与其他类型的值进行操作，可以显式转换为字符串。
使用场景
向对象添加属性。 新添加的属性与原始属性具有相同的名称。 新添加的属性仅作为标记，不需要遍历器遍历。
让和常量
用 var 声明的变量会造成全局污染。
let 用于声明变量。 它们必须先声明然后使用。
常量
const 声明一个只读常量。 一旦声明，常量的值就不能更改。
特征
作用域级 函数级 块级 块级
