前端性能优化-页面性能优化-页面加载缓慢的因素

页面加载缓慢的因素

页面加载缓慢地因素在抛开网速不谈的情况下，一般分为服务端因素和客户端因素，这里只说客户端因素。

客户端因素也分为两部分：浏览器部分和代码部分。

浏览器部分

• 网络层面
  1、过多的HTTP请求, 打开一个网页的时候，后台程序的响应并不需要太多的时间，等待的时间主要花费在下载网页元素上了，即HTML、CSS、Javascript、Flash(很少了)、图片（占用大量的资源）等。
  2、资源访问带宽小，客户端带宽，服务端带宽（顺带一提，不说明）
  3、网页元素太大，视频、高清图片、高复杂度的样式渲染等。
• 浏览器层面
  1、渲染阻塞，浏览器先要渲染一个页面就必须先构建出来DOM树和CSSOM树，如果HTML与CSS文件结构非常庞大与复杂，这显然会给页面加载速度带来严重的影响。
  渲染阻塞资源，就是对该资源发送请求后，还需要构建对应的DOM树或CSSOM树，显然会延迟渲染操作的开始时间。
  JS阻塞和CSS阻塞：
  HTML、CSS、Javascript都是会对渲染产生阻塞的资源，HTML是必需的（没有DOM就没有渲染），但还可以从CSS与Javascript着手开始优化，尽可能的减少阻塞。
  2、重复渲染，重复多次的对页面进行渲染，重复的构建DOM，执行CSS和Javascript。多次触发回流
  3、DNS解析，域名解析到IP地址，解析的越快，越能正确的访问IP。
• 服务端层面（顺带一提，不作详表）
  1、硬件配置低
  2、服务器软件
  3、未对Nginx等web服务器进行配置优化
  4、CPU占满、数据库未优化
  5、服务端代码问题
  6、过得的分析类工具

代码部分

• 构建层面
  未对代码进行打包、压缩、兼容性优化
  未合并重复的请求和代码
• 编码层面
  没有良好的编码习惯、错误的编排JS与CSS
  for循环、迭代、同步、重定向、阻塞请求
  未删除重复、无用的代码
  未对逻辑业务复杂的代码进行重构，了解设计模式（工厂模式等），对业务进行梳理
• 机制（SSR）
  未加入Async异步机制
  未思考页面加载、用户体验
• 规范
  CSS规范
  HTML规范/HTML5规范
  Aitbnb代码规范等