网络层面和渲染层面层面来解决前端性能优化问题?

[xccjk]

网络层面和渲染层面层面来解决前端性能优化问题

从输入URL到页面加载完成，发生了什么？

1. 首先我们需要通过DNS(域名解析系统)将URL解析为对应的IP地址
2. 然后与这个IP地址确定的那台服务器建立起TCP连接
3. 随后向服务器抛出HTTP请求
4. 服务端处理完请求后，将目标数据放在HTTP响应里返回给客户端
5. 拿到数据的浏览器对数据进行渲染

切分过程

1. DNS解析
2. TCP连接(三次握手)
3. HTTP请求抛出
4. 服务端处理请求，HTTP响应返回
5. 浏览器拿到响应数据，解析响应内容，把解析结果展示给用户

DNS解析

1. 能不能减少解析次数或者解析前置？浏览器DNS缓存和DNS prefetch

TCP三次握手

1. 通过长连接，预连接，接入spdy协议

HTTP连接

1. 减少请求次数和减小请求体积
2. 服务器越远，一次请求就越慢，部署时把静态资源放在离我们更近的CDN上

浏览器端渲染

1. 资源加载优化
2. 服务端渲染
3. 浏览器缓存机制DOM树的构建
4. 网页排版和渲染过程
5. 回流与重绘的考量
6. DOM操作的合理规避

前端性能优化思维导图

1. 网络层面

   • 请求过程的优化

     • HTTP请求优化
     • 构建工具性能调优
     • Gzip压缩原理
     • 图片优化

   • 减少网络请求

     • 本地存储
     • 浏览器缓存技术
     • 离线存储技术

2. 渲染层面

   • 服务端渲染的探索与实践

   • 浏览器的渲染机制解析

     • CSS性能方案
     • JS性能方案

   • DOM优化

     • 原理与基本思路
     • 事件循环与异步更新
     • 回流与重绘

   • 首屏渲染提示：懒加载初探

3. 经典面试教学

   • 懒加载初探
   • 事件防抖与节流

4. 性能监测

   • 可视化工具

     • Performance
     • LightHouse

   • W3C性能API