范式编程

• 范式编程：
  命令式：面向过程，面向对象。
  声明式：函数式，响应式。
• 前端用函数式编程。

前端调试开发

• 动态修改元素和样式

1. 在左侧Elements，右边点击.cls开启动态修改元素的class。勾选取消可动态查看类名生效效果。点击具体样式值（字号，颜色，宽高）可进行编辑实时观看。
2. console（控制台）：console.log（正常） console.warn（警告） console.error（错误） console.debug
   占位符：给日志添加样式，可以突出重要信息。%S：字符串占位符，%o:对象占位符，%c：样式占位符，%d：数字占位符。
   console.table：把数组数据按照表格展示。
3. sources:展示我们项目的源代码。
   右：watch 观测结果 ；Break point 显示所有断点； scope 作用域；stack 调用栈。
   前端代码天生具有开源属性，处于安全考虑，上线之前的JavaScript代码通常会被压缩，压缩后的代码只有一行，变量用‘a’,‘b’代替，整体变得不可阅读。
   source（来源）Map：webpack构建中用devtool:'soure-map'，开启source Map是一个信息文件，里面存储了代码大包转换后的位置信息，维护了打包前后代码的映射关系。
4. Network：显示整个站点加载时的资源，可以模拟3G网速和4G，可以看后端接口传来的信息是否满足需求。
5. performance(性能):可看FPS：每秒帧数，CPU：处理各个任务请求花费的时间，NET：各个请求所花费的时间。先点圆圈录制。 页面卡顿，查看FPS指标：帧率和刷新率。
6. Lighthouse看性能及各种指标
   First Contentful Paint 第一个元素开始渲染时间
   Largest Contentful Paint 渲染完毕时间
   Time to Interactive 可以交互的时间
   LCP(Largest Contentful Paint)最大内容绘制，最佳2.5m内。 FID(First Input Delay)首次输入延迟，应该100ms或者更短。 CLS(Cumulatice Layout Shift)累计布局偏移量，测量视觉稳定性，应该0.1或者更少。