前端性能优化指南(1)

此文主要描述 html / css / js / react 即时渲染和网络加载优化方面的知识,webpack常用优化方法和HTTP Server等优化请关注《 前端性能优化指南(2) 》

如果之后发现有其它要点值得梳理,会继续更新本文...

目录

》 思维导图:

前端性能优化指南(1)_第1张图片

     前端性能优化是个很大的概念,涉及HTTP协议、浏览器渲染原理、操作系统和网络、前端工程化和Js底层原理等各个方面。通过建立思维导图可以让我们很好的将各个优化方面组织和联系起来。
     按照优化原理的不同则可以将其分为网络层面优化渲染层面的优化,网络层面的优化更多体现在资源加载时的优化,而渲染层的优化更多体现在运行时优化。
     例如优化浏览器缓存策略以减少HTTP请求传输量、图片和其它静态资源的压缩、服务器端启用Gzip压缩、使用CDN、图片懒加载、延迟脚本Defer和异步脚本Async等属于网络层面的优化。另一方面,减少页面的回流和重绘、使用React.Fragment减少界面dom层级、使用骨架屏、函数节流和去抖、React长列表组件优化、通过事件冒泡机制实现事件委托等就属于渲染层面的优化。

➣ HTML/CSS 性能优化方面

1. 网络层面

1)抽离内联样式内联脚本
  • 内联资源不利于浏览器缓存,造成重复的资源请求
  • 内联资源会造成HTML臃肿,不利于HTTP传输
  • 内联资源的下载和解析可能会阻塞导致界面渲染,导致界面白屏
  • 内联资源不好管理和维护
2)defer脚本和async脚本

     HTML在解析时遇到声明的

你可能感兴趣的:(前端性能优化指南(1))