前端静态资源请求和加载优化总结
如果有这样一个项目,js脚本数量100+,其中50个是各种框架或库,css数量20+,图片若干 。那么,不用说,这个页面加载起来,一定快不了。
静态资源的请求和加载速度,直接影响页面呈现,应该怎么优化呢?
不请求 - 用cache
- 最好的方式就是尽量引用公共资源,同时设置缓存,不去重新请求资源
- 也可以运用PWA的离线缓存技术,可以帮助wep实现离线使用
- 从策略上说,如果业务类型允许的话,可以做某些降级。比如,弱网优先使用缓存文件。网络状况分为 WiFi、4G、3G、2G、unknown ,其中 2G和unknown 被我们认为是弱网。先保证体验,再保证更新
- 避免资源属性为空或者错误。当<link>、<a>标签的 href 无效,或<script>、<img>、<iframe>标签的 src 属性为无效,浏览器在渲染的过程中仍会进行请求和加载,这种错误只会浪费性能
- 不要做页面重定向。页面每次重定向都会延长页面内容返回的等待延时,一次重定向大约需要200毫秒不等的时间开销
- 如果没有必要,请求就不要带cookie(减少约1kb)
- 设置文件资源的 DNS 预解析,让浏览器提前解析获取静态资源的主机 IP,避免等到请求时才发起 DNS 解析请求,比如
<!--cdn域名预解析--> <meta http-equiv="x-dns-prefetch-control" content="on" > <link rel="dns-prefetch" href="//cdn.domain.com" >
合并请求 - combo
- CDN的combo技术能把多个资源文件合并引用,减少请求次数
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
合并和拆分资源
- 打包有很多方式,比如使用工具webpack、rollup,可以实现打包js,打包小图片至js(内嵌base64),生成雪碧图,甚至把项目打包为单个html文件
- 拆分则是把开发时使用的库,单独剥离出来,以公共资源的方式引入
- 还有就是要把过大的包,拆分成多个较少的包,防止单个资源耗时过大
压缩资源
- 前端打包时压缩
- 服务器上的zip压缩
- 图片压缩(比如tiny),使用webp等高压缩比格式
- 尽量保证页面的 HTML 内容在 1KB 以内,这样整个 HTML 的内容请求就可以在一个 RTT 内请求完成,最大限度地提高 HTML 载入速度。通常情况下,TCP 网络传输的最大传输单元(Maximum Transmission Unit,MTU)为 1500B
静态资源分域存放
- 从不同域名请求资源。因为大多数浏览器的并发数量都控制在6以内,同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞。如果资源来自于多个域下,可以增大并行请求和下载速度。如下是jd img资源的域名
延迟、异步、预加载、懒加载
- 对于非首屏的资源,可以使用 defer 或 async 的方式引入
- 也可以按需加载,在逻辑中,只有执行到时才做请求
- 对于多屏页面,滚动时才动态载入图片
- 对于移动端首屏加载后可能会被使用的资源,需要在首屏完成加载后尽快进行加载
参考资料
【FE】这么多前端优化点你都记得住吗?
Web静态资源缓存及优化
美团金融扫码付静态资源加载优化实践
浏览器缓存知识小结及应用
前端静态资源请求和加载优化总结相关推荐
- 【校招VIP】前端浏览器之性能和加载优化
考点介绍: 随着前端项目不断扩大,浏览器渲染的压力变得越来越重.配置好一点的计算机可以顺利地展现页面:配置低一些的计算机渲染页面的性能就不那么可观了.性能优化部分的面试题主要考察应试者对网站性能优化的 ...
- 记前端项目首屏加载优化(网络篇)
继之前的一篇<记前端项目首屏加载优化(打包篇)>之后,这次来讲一讲我的首屏加载在网络方面的优化?. 写在前面 资源加载是一个网站的展示在用户浏览器的必经之路,资源的请求次数和响应时间决定了 ...
- 线上前端静态资源代理到本地的几种方式
前言 我是一个小前端,前段时间开始支持集团监控平台业务. 当我拉下代码,开启本地服务,出现了一大堆请求错误. 原因是:本地的host是127.0.0.1,而接口调用的是线上数据. 接口的host和平台 ...
- idea拦截了html中的静态资源,IDEA配置静态资源热加载操作(Springboot修改静态资源不重启)...
第一步: 修改file->settings->compiler->build project automatically 第二步: 按ctrl+shift+a,搜索Registry双 ...
- 静态资源请求被拦截问题
SpringMVC中配置URL拦截,非常简单.网上找个示例,就能通过.但是,在我做了好几个Web项目,又参与了别人主导的Web项目时,发现URL配置也非常有学问. 先说说一种比较常见的: <se ...
- 前端静态资源缓存最优解以及max-age的陷阱
原文地址:点这里 合理的使用缓存可以极大地提高网站资源的利用率,还可以节约带宽从而降低服务器成本.但是很多站点针对缓存的策略并不合理,甚至是完全无作为,如果是这样,就完全没有发挥出缓存的优势,而不合理 ...
- 静态资源文件加载错误
提醒 在写java程序的时候,经常会遇到一些资源文件无法加载出来的问题.对于逻辑代码,配置信息都完全没有问题,但就是不能达到预想的效果. 这很大的原因就是放入的文件并没有真正被load到target中 ...
- 前端静态资源加载顺序
一.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...
- 面向对象的静态、抽象和加载
静态: 关键字为:static 静态成员与普通成员的区别:普通成员是属于对象的,为静态成员是属于类的. class FenBi{public static $color; //静态成员public $ ...
最新文章
- Java 动态代理原理
- 使用USMT备份和还原用户数据
- rust(49)-图像(2)
- HttpClient中的各种请求
- 升序排序中国_干货满满!6行python代码挑战展示2020下半年中国最娱乐的人气男明星人气排行榜top10!...
- linux连接小米随身wifi密码忘记了,小米随身wifi设置教程
- PHP实现查找msn联系人
- MATLAB编程 动态数组的创建
- 内网穿透软件对比——cpolar : 网云穿(下)
- 转帖:还有谁在用王林快码,还有谁记得王林
- 第四次计算革命孕育“数字经济体”
- 一场官司,终于让人们看清了苹果
- 前行、生活、少年、爱情
- 微信小程序苹果手机边框显示不全解决办法
- 九九乘法表c语言编程java,九九乘法表(c语言和java语言)+心得
- 2022 云原生编程挑战赛圆满收官,见证冠军战队的诞生
- 为什么https比http更安全?_货车拉钢卷为什么都是立式运输,平放不是更安全吗?...
- 《一周搞定模电》—集成运算放大器
- 开通香港股票开户需要什么条件?
- 小米手环4怎么使用_小米手环4怎么使用 小米手环4开机方法