前端语言串讲 | 青训营笔记

鉴常明
94 阅读3分钟

前端语言串讲

01_前端语言的基本能力

  • HTML( Hypertext Markup Language 超文本标记语言)

    • 控制框架结构，包含内容布局，为前端设计师提供一个层次结构，是web页面的基石

  • CSS( Cascading Style Sheet 层叠样式表)

    • 给网站添加样式——元素添加样式、适配不同的屏幕大小等

  • JavaScript

    • web网站的灵魂，提供交互性

屏幕截图 2023-04-26 101509.png

01_1_HTML

image-20230426101652249.png

  • 本质就是搭建有标签构成的文本文件，通过浏览器容器将其形成具体的元素，完成文本到内部元素的转换过程

01_2_CSS

image-20230426102008105.png

  • 语法简单（注意，是语法），但是要想运用的好却很困难

  • 他是由一组类似key-value的结构组成的，通过选择器选中要添加样式的元素，之后在大括号中写上想要添加的样式

_查看文档（学习css和写css时非常需要掌握的一项技能）

image-20230426102341361.png

这里推荐MDN

01_3_JavaScript

image-20230426102504297.png

  • JavaScript是在10天内被开发出来的，距今已经30多年

  • 自从15年ES6的出现与像vue这样的打包工具的兴起，使前端正式进入一个鼎盛时代

JavaScript的一些语法

image-20230426103003908.png

  • 基本类型：String、Number、Boolean、Null、Undefined、Symbol
  • 引用类型：Object （Array、Function）

image-20230426103233381.png

01_4_Browser

浏览器主要分为两个引擎

  • 渲染引擎
    • 主要负责加载页面，然后形成DOM树的结构，之后计算css样式与元素的匹配形成CSSOM树，之后对页面进行排版、并判断页面哪些部分可以变成一个整体去渲染图层，这样效率更高，最好绘制页面

image-20230426103322092.png

  • JavaScript引擎
  • JS的本质样式一段文本，需要通过解释器才能运行
    • 引擎会把JS源码进行词法语法解析转化成为AST树，接着通过Ignition转化为字节码，字节码可以在虚拟机中运行（如果虚拟机发现有热点代码，可以反过来让Turbofan直接生成优化后的机器码，性能会更高，不过这里可能会有一个Deoptimize的流程，一般Turbofan与运行时发现数据类型不对了，就会反过来让Ignition重新优化兼容类型的代码）

image-20230426103654065.png

02_前端语言的协作配合

image-20230426104305503.png

02_1_Trending

image-20230426104338351.png

  • 纵坐标表示时间
  • 横坐标表示三剑客的生态

02_2_CSS in HTML

image-20230426104621497.png

  • 内联样式
  • style标签添加样式
  • 引入外部样式

02_3_JavaScript in HTML

image-20230426104737207.png

image-20230426105107214.png

1ff376bd-aea2-4125-884a-e4dbec22e9a3.gif

  • 宏任务队列与微任务队列
    • 一般先执行微任务队列中的任务，再执行宏任务队列中的任务
      • 常见的微任务有：promise.resolve
      • 常见的宏任务：其实浏览器默认情况下执行的代码都是宏任务，如setimeout

02_4_HTML in JavaScript

image-20230426105707591.png

  • JSX技术

image-20230426105737523.png

02_5_CSS in JavaScript

  • React 与 Vue

image-20230426105818657.png

  • CSS Module 与 JSS

image-20230426105923573.png

03_你不知道的HTML

03_1_HTML DTD

  • HTML并非图灵完备，它只是一门标记语言

image-20230426110135120.png

03_2_HTML 全部标签发分类

image-20230426110248854.png

03_3_HTML_head标签

image-20230426113503372.png

03_4_HTML_body功能性标签

image-20230426113844348.png

03_4_HTML_ ARIA

image-20230426113931598.png

HTML5规范

image-20230426114051075.png

03_5_HTML5_ 语义化标签

image-20230426114235436.png

建议：用对比不用好，不用比用错好

03_6_HTML5_ 表达增强

image-20230426114826031.png

03_7_HTML5_ 存储

image-20230426114915338.png

03_8_HTML5_ IndexedDB

用较少，但能力很强

  • 是异步的
  • 支持事务性

image-20230426115246551.png

03_9_HTML5_ PWA & AMP

image-20230426115405707.png

03_9_HTML5_ Audio

声音的三要素

振幅：决定声音的音量

频率：决定声音的音高

波形：决定声音的音色

image-20230426115618003.png

03_10_HTML5_ Video

image-20230426115913623.png

03_11_HTML5_ 二进制

image-20230426120024288.png

03_12_HTML5_ API

image-20230426120108915.png

03_13_HTML5_ Web Worker

image-20230426120140932.png

03_13_HTML5_ Web Socket

image-20230426120207972.png

03_13_HTML5_Shadow DOM

image-20230426120229536.png

03_13_HTML5_Web Component

image-20230426120256081.png

03_13_HTML5_SVG & Canves

image-20230426120324850.png

image-20230426120344925.png

03_WebGL & WebGPU

image-20230426120433084.png

image-20230426120648099.png

03_HTML5 WebAssembly

image-20230426120809734.png

04_拓展交流

04_1_Web 的风靡

image-20230426120904172.png

04_1_大前端

image-20230426121122212.png

04_1_MVC & MVVM & MVP

交互范式

image-20230426121211136.png

avatar
文章
阅读
粉丝