ByteDance青训营

这是我参加快乐出发活动立下的Flag。希望能通过这次活动养成好习惯。Stay Hungry, Stay Foolish.

从ES6开始JavaScript新增了大量新规范、语法糖和有用的方法。了解ESNext历程中的种种新规范，理清楚这里面的脉络，对我们的JS学习也是大有脾益。

前言：昨天我们介绍了ES5的新特性，今天我们将介绍ES6的新特性。 ES6 ES2015是改动最大的一个版本，基本上对ES2015之前的所有的内容都做了扩展

ES5-ES2022历代新特性 ES5发布于2009，ES6于2015，从2015开始使用年份命名，ES6 即是 ECMAScript 2015，目前绝大部分浏览器都已经支持ES6了。

JavaScript面向对象编程(OOP) OOP专有名词 Namespace 命名空间 允许开发人员在一个独特，应用相关的名字的名称下捆绑所有功能的容器。 Class 类 定义对象的特征。

游戏分类 前端场景下的游戏 项目分工 策划 数值 内容 美术 2D/3D 原画 音效/动效 程序 前端 后端 其他 运营 运维 QA 市场 游戏开发基本链路 游戏引擎 多平台移植：RN、Weex

浅析DOMContentLoaded 什么是DOMContentLoaded 简而言之：初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发。

可视化分类 科学可视化 科学数据的直观展示。 信息可视化 对抽象数据的直观展示。 可视分析 对分析结果的直观展示，及交互式反馈。跨领域的方向。 可视化设计原则及方法 为什么要进行可视化 记录信息 分析

语言层面 动态类型：变量定义时无类型声明。 变量的类型在运行的时候确定。 变量的类型在运行可以修改。 静态类型：变量定义时有类型声明。 变量的类型在编译的时候确定 变量的类型在运行时不能修改，这样编译

模块化：ESM、CommonJS、UMD 资源编译：高级语法（>ES6）、TS的转译、CSS预处理 产物质量：代码体积（冗余？压缩？）、代码性能 开发效率：热更新

知识体系 为什么要学习Webpack 理解前端工程化的概念、工具、目标 提高个人核心竞争力 高阶前端必经之路 什么是Webpack 本质上是一种前端资源编译、打包工具 多份资源文件打包成一个Bundl

应用场景 首先要提到的是前端工程化的场景。早期 ajax, jquery 比较流行的时候，我们直接在页面中引入需要的 lib 即可。后续随着模块化、transpile 逐渐成熟、需求逐渐增多

历史与应用 2010年，FaceBook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。 Jordan Walke创造了FaxJS，也就是后来的React

前端Debug的特点 多平台：浏览器、Hybrid、Nodejs、小程序、桌面应用 多环境：本地开发环境、线上环境 多工具：Chrome devTools、Charles（抓包工具）、Whistle、

红蓝对抗：本文主要围绕攻-防两个方面介绍Web前端安全的相关知识，包括常见的前端攻击方式以及对应的防御策略。

一篇关于设计模式的基础介绍和几种前端常用设计模式的介绍。同时包括设计模式的三大原则、设计模式的分类以及前端常用设计模式及代码实现。

JS三原则，各司其责：HTML、CSS和JS职能分离；组件封装：正确性、扩展性、复用性；过程抽象：函数式编程思想

大致介绍了CSS Work FLow，以及BFC的基础知识和相关应用。对理解CSS工作流程，以及CSS中遇到的坍塌问题有了更深刻的理解。

这是我参与「第四届青训营 」笔记创作活动的的第1天 ，内容包括HTML部分和CSS部分的重点、开发中常用的知识。