记一次前端优化

本贴最后更新于 2173 天前,其中的信息可能已经天翻地覆

简直坑死我了,刚接手这个项目没几天,就各种开发任务,好多需求还不是很明白,只能一边开发,一边问别人需求什么的。

都在说,现在的版本首页访问速度太慢,找我做优化~(因为现在组里就我一个前端)

这几天也查了很多资料,看了很多关于优化的一些方案,技术文章。

说一下这个页面的耗时:

正常网络,无缓存的情况下,首页所有的请求完成需要一分钟的时间,简直受不鸟。

然后说一下我的思路:

1.要找到原因,为什么耗时这么多,是请求太多?图片太大?服务器太烂?代码写的太烂?

我去抓了包,整理了所有的请求和时间。为什么慢基本一目了然。

2.这个页面因为图片太多,有 80 多个,我选择了懒加载,图片按需加载。

3.部分接口响应时间太慢,找后台开发人员做接口优化和 sql 查询优化。

4.js,css 合并压缩,这个没什么多说的。

5.还有一个预加载,但我还没试这个。

尝试了这些之后,首屏的加载时间减少到了 8s 左右,虽然比之前的时间减少了不少,但还是没达到要求,所以还是需要改进优化的。

下面是过程中的一些笔记:


#查看首页所有网络请求,分析时间消耗

140 个请求   

34 个 XHR(16 个 ajax 请求)

16 个 js

7 个 css

80 个 img(4.5M/5.6M)

1 个 font

1 个 jsp

1 个 ico

http://..../hotRead/getList?pageNum=1&pageSize=11  9.62s(首页中加载耗时) |4107ms(直接掉接口耗时)

http://..../monthNewBook/getList |3.11s |1355ms

http://..../saleRank/getList?pageNum=1&pageSize=10        5.36s                   2959ms

http://..../popularityRank/getList?pageNum=1&pageSize=10  5.8s                    1399ms

http://..../recommendRank/getList?pageNum=1&pageSize=10   4.11s                   1671ms

http://..../subjectFine/getList?subjectTypeID=0A8192CDC19E4AE8A7421DB252E3F8FD&pageNum=1&pageSize=11   8.65s 5873ms

是否有没用的请求或者无效的资源?

js,css 文件是否有重复请求的?

js.css 能否压缩合并,减少请求个数?

能否使用预加载?

CDN?

使 css,js,font 文件可缓存,ajax 可缓存

css @import 会导致浏览器顺序加载,无法并行加载

样式表放在脚本前面

预加载:

DNS preFetch : <linkrel="dns-prefetch"href="//example.com">

PreContent : linkrel="preconnect"href="http://css-tricks.com"

Prefetch : <linkrel="prefetch"href="image.png">

Subresource : <linkrel="subresource"href="styles.css">

Prerender : <linkrel="prerender"  href="/thenextpage.html"/>

Preload : <linkrel="preload"href="image.png">

部分图片使用 lazyload 技术,部分图片按需加载

···

最后保证首屏加载速度

  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    246 引用 • 1338 回帖
  • 优化

    不成熟的优化是万恶之源。

    过度优化实则是劣化。

    32 引用 • 173 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
maixiaojie
如果哪天你累了告诉我 我背你。❤️

推荐标签 标签

  • AWS
    11 引用 • 28 回帖 • 9 关注
  • 996
    13 引用 • 200 回帖 • 6 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 1 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 613 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 549 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 504 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 374 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 786 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 76 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    246 引用 • 1338 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 250 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3200 引用 • 8216 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 12 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 830 关注
  • Access
    1 引用 • 3 回帖 • 2 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 590 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    369 引用 • 1846 回帖 • 3 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 113 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 5 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 637 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 157 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    184 引用 • 1018 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖