编程范式
编程语言分为：机器语言，汇编语言，中级语言，高级语言
面向对象：c++ ，函数式：lisp 多范式：js
编程范式 命令式和声明式-> 命令式： 面向过程/面对对象 |声明式： 函数式和响应式
面向过程：数据和算法关联比较弱，不利于修改和扩展，不利于代码重用
面向对象：继承，封装，多态
面向对象的五大原则：
1.单一职责的原则（功能单一）
2.开发封闭原则 （可以扩展不可以更改）
3.里式替换原则（子类可以替换父类）
4.依赖导致原则
5.接口分离原则
面向对象的问题：它总是要附带所有它需要的潜在在环境
函数式编程：
函数优先级较高、纯粹的函数没有副作用、高阶函数,闭包
响应式编程的compose
合并，过滤，转化，异常处理，多播
特定领域的语言：
HTML,SQL 设计思路：lexer->parser->tools->visitor
web 浏览器
浏览器的进化
1.单进程 架构
2.多进程架构：主进程，网络进程，渲染进程，GPU进程，插件进程
3.面向服务端架构将原来的UI 数据库、文件、设备
渲染进程：多线程架构，分为js引擎，GUI引擎，定时器触发，网络线程，事件触发
JS引擎的流程 JS源码-js解析器-> AST->字节码->操作系统
渲染引擎->生成Dom树， 和cssom 树 合成渲染树 ->布局->构建图层->光栅化->展示
浏览器优化：
1首屏优化：压缩、分包、删除无用代码、静态资源的分离、JS脚本非阻塞加载、缓存策略、SSR 、预制loading、骨架屏
2渲染加速： GPU 加速，transform动画 减少回流重绘 离屏加速 懒加载
3JS优化：防止内存泄漏，循环尽可能break，合理使用闭包，减少Dom访问，防抖节流，webworker
跨端方案：
webview，小程序，RN/weex lynx Flutter
webview 实现原理
webview 即网页视图用于加载Url，可以嵌入在移动端app 里面
JS环境中提供通信的 JSBridge，Native 端提供SDK 响应 JSBridge 发出调用
前端和 客户端分别实现对应功能能模块
React Native/weex
1.原生组件的渲染
2.React/Vue框架
3.virtual dom
4 JSbirdge
跨端容器的基本原理
1.UI组件
2.渲染引擎
3.逻辑控制引擎
4.通信桥梁
5.底层Native api磨平差异
前端语言串讲
前端 三件套：HTML ， CSS ,JS
JS 8种基本类型 String，Number，Boolean，Null，Undefined，Symbol bigInt Object
浏览器进行渲染的过程 ： 构建dom树->构建css树->构建渲染树->排版分图层->分块->光栅化->渲染
CSS 的引入 inline （写在标签里面），internalcss（使用style标签进行引入），External （link标签）外部文件
JavaScipt in HTML 使用 script 标签
HTML in JavaScript :jsx
CSS in JavaScript ：使用jss
前端三件套的冷门知识：
HTML 是一种非图灵完备的语言（是不能解决计算逻辑类问题），是一种标签 语言
HTML基本元素：Element 标签元素，文本Text ，注释 Comment，DTD
HTML 标签分类：
文档类：
闭合类：闭合标签
空标签 < br > img input换行类：块级标签： div 行内元素 span a
H5新元素：语义化标签 ，媒体标签 video audio embed，表单标签 input，功能标签 canvas progress
head 里面常用的标签 ：title （设置页标名字）base meta link script 进行 aria 标签使用标签
H5 常用功能
语义化标签，表单增强，Cookies ,Local Storage Seession Storage IndexedDB
H5 PWA 和 AMP
PWA 渐进式的网页应用程序
- Service Worker （可以理解为服务工厂）
- Manifest （应用清单）
- Push Notification（推送通知）
AMP
Accelerated Mobile Pages AMP HTML 本质上是使用自定义 AMP 属性扩展的 HTML。最简单的 AMP HTML 文件如下
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
html5 Audio/html video和audio
H5 的 Drag 和 Drop API 进行拖拽
H5 web worker 实现多线程
H5 web socket 进行 全双工
web component 的使用 Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上，
将一个隐藏 Shadow host：一个常规 DOM 节点，Shadow DOM 会被附加到这个节点上。Shadow tree：Shadow DOM 内部的 DOM 树。Shadow boundary：Shadow DOM 结束的地方，也是常规 DOM 开始的地方。Shadow root: Shadow tree 的根节点。
H5 SVG 和 Canvas
SVG 是 使用向量，使用xml 实现，无损变化，支持事件处理，不用于游戏，
Canvas 是使用位图，是html 标签，有损变化，不支持事件处理，用于游戏，
webGL 使用 API进行绘制
大前端： 跨端的web ## 班会内容
什么是前端？开发用户交换应用的开发人员 如 web ，小程序，app
web1->看 web2-> 参与提供内容
为什么有前端？chatgpt的出现的影响？
短期不会有大变化，gpt 功能复杂度不行，可视化效果不佳，与业务的沟通，兼容性，安全性的问题 ，工作的复杂性依然存在
前端的入门简单，天花板低？
1.工程化的思维的提升（如何降本增效 框架的设计）
2.平台运营活动，低代码的平台的开发
3.代码开发的优化，性能提升
4.前端在业务链中的协作提升，前后端的协同的优化
5.treejs webGL等方面应用
6.web的视频业务的优化
学习路径推荐？
三件套，web Api react vue webpack ,vite ->性能，图形，编辑器
前端软技能？
基本技术，好奇心，有问题多问
团队协作能力，有效沟通，主动性
结构化思维，数据驱动 ROI 投入产出比
跨端的介绍？
什么项目是好的项目？ 1.后台管理，复杂的数据接口
2.面向用户如 模仿掘金的项目
