浅谈前端加载优化

0x01 前言

要了解前端优化,要从一个经典问题入手:从输入网址按下回车到显示页面,中间经历了什么

0x02 从输入网址按下回车到显示页面,中间经历了什么

1、DNS 解析

  1. 验证本地 hosts,返回 IP 地址,不存在则进行第二步;
  2. 查询本地 DNS 服务器,返回 IP 地址,不存在则进行第三步;
  3. 查询根 DNS 服务器,返回 IP 地址;

2、数据发送

  1. 封装 HTTP 数据包
  2. 移交给 TCP 进行数据交互

3、服务器数据接收和处理

  1. 服务器接收到数据,最终还原成应用层的 HTTP 报文;
  2. Web Server 解析报文,得到域名、路径、文件等信息;
  3. Web Server 根据报文信息,从本地获取信息或移交给 Application Server 处理;
  4. Web Server 拿到对应所需数据,返回给 Client;

4、浏览器解析报文并渲染

  1. 构建 DOM 树;
  2. 构建 CSSOM 树;
  3. 解析和执行 JS 语句;
  4. 布局 Render 树;
  5. 绘制 Render 树;

0x03 与前端加载有关的因素

  1. DNS 寻址;
  2. 建立连接;
  3. 下载内容;
  4. 渲染:回流、重绘;
  5. 服务器响应;

0x04 雅虎优化网站性能的 14 条法则

  1. 尽可能的减少 HTTP 的请求数;
  2. 使用 CDN(Content Delivery Network);
  3. 添加 Expires 头(或者 Cache-control );
  4. Gzip 组件;
  5. 将 CSS 样式放在页面的上方;
  6. 将脚本移动到底部(包括内联的);
  7. 避免使用 CSS 中的 Expressions;
  8. 将 JavaScript 和 CSS 独立成外部文件;
  9. 减少 DNS 查询;
  10. 压缩 JavaScript 和 CSS (包括内联的);
  11. 避免重定向 server;
  12. 移除重复的脚本 javascript;
  13. 配置实体标签(ETags);
  14. 使 AJAX 缓存;

0x05 聊聊常见的加载优化方法

  1. (HTTP)减少请求文件的数量,将 CSS 与 JS 各自合成一个文件,将小图标合并成雪碧图,此步骤主要节省了建立连接的时间;
  2. 使用 CDN 来分发静态资源,主要节约了下载时间;
  3. 添加缓存标识,CDN 再快,终究也是要下载,如果能够命中缓存,则直接省略了下载过程;
  4. Gzip 压缩,减少下载量;
  5. 将 CSS 放置在页面的开头,因为部分浏览器在 CSS 下载完成之前不会进行渲染,将其放在前面,可以优先下载;如使用 preload 特性进行加载,不会阻塞初次渲染;
  6. 将 JS 放置在页面底部,js 的执行会阻塞页面的下载,将其放置在底部,可以尽可能的避免阻塞,也可以用 asyncdefer 特性,来声明 JS 的执行时机,使用时需要留意浏览器支持;还有一个小问题就是下载 JS 文件时,有可能会阻塞其他文件的下载;
  7. 控制页面内使用的域名数量,主要是为了节省 DNS 查询的时间。在 HTTP 的时代,一个域名最多允许建立 2 个连接,而 HTTPS 由于其多路复用的特性,可以肆无忌惮地较少域名数量;
  8. HTTPS;
  9. 懒加载;
  10. 避免回流和重绘;
  11. 避免HTTP挑战,比如很多 Web Server 识别到 http://a.com 时会跳转到 http://a.com/
  12. 代码优化;

水平不够,也只能写这么多了。

共有 3 条评论

  1. 跨境电商之家

    学习学习,必须的!谢谢!

    1. 电商多平台运营

      很好啊,顶一下\\\

    2. 跨境卖家导航

      很好啊,顶一下\\\

Top