《高效前端》笔记

第一章 HTML/CSS优化

• HTML和CSS优先法则
能用HTML和CSS实现的尽量不要使用JS实现

简单就意味着更快的开发速度，更小的维护成本

例如：
• CSS中的hover
• 伪类before/after
• CSS中checked选择器
• 利用CSS中的display:table实现多列登高

• HTML尽量使用语义化标签
不要全都用div，还有很多其他标签如p、ul、li、form、table等等，该用什么标签用什么标签
尽量用HTML5语义化标签

• CSS画一个三角形
核心是利用三个border，两个border宽度一样，另一个宽度不一样，两个一样的border去掉颜色。
 

第二章 JS优化

• 高内聚低耦合

• 尽量不要在js中直接更改CSS样式, 可以通过JS控制CSS类名修改样式

不推荐直接在JS里面更改样式属性，应该通过增删类来控制样式

• 修改类名控制样式的好处是不仅可以修改当前元素样式还可以修改子元素的样式

通过类控制样式有一个好处，当你给容器动态地增删一个类时，可以借助子元素选择器，用这个新加的类控制它的子元素的样式，非常方便。

• 高内聚

在功能上是高度内聚的，每个模块都有自己的职责，不可拆分，这在面向对象编程里面叫做“单一职责原则”，一个模块只负责一个功能。

现在很多大型框架都是遵从的这个高内聚的原则，比如Vue的组合式Api、React的react-hook

• 将单独完整的功能封装成一个类

使用类是模块化的一种思想

• 开闭原则

不需要改动原有代码的逻辑，对扩展是开发的，而对修改是封闭的，这就是面向对象编程里的开闭原则

• 设计思想
低耦合高内聚思想、设计模式的思想、面向对象的思想

• JS书写优化

定义变量的时候要指明类型

不要随意更改变量的类型

函数的返回类型应该是确定的

不要让代码暴露在全局作用域下

不要滥用闭包

避免==的使用

函数传参要写明参数值含义，不要直接传一个固定值

 

第三章 页面优化

• 页面渲染流程
JavaScript > Style > Layout > Paint > Composition
触发js > 样式变化 > 重新布局 > 生成画布 > 渲染到屏幕

• 回流和重绘
回流：修改样式会导致页面布局发生变化，页面内容的结构、位置、大小会改变。
重绘：修改样式页面布局不会发生变化，页面内容的结构、位置、大小不会改变。

• 减少Head中阻塞的js标签

• 减少Head中的CSS资源

• 图片延迟加载

• 压缩和缓存
• cache-control
• etag
• gzip压缩

• 用户体验
• 加loading效果
• 记录使用习惯

• 去掉无效文件，检查没有用的Css/js

• console.trace追踪代码位置

• chrome-devtool模拟断网情况