前端开发性能优化方案-14条

news2025/2/22 0:21:05

1、减少http请求数量。

单独得一个图片,js,css都是一个请求,将同类合并可以有效得减少请求个数。

2、使用CDN(内容分发网络) 

需要新增服务器减少请求得站点个数(靠钱解决需要买服务器)。

 

3、添加Expire/Cache-Control头 

Expire 头的内容是一个 时间值,值就是资源在本地的过期时间、存在本地。

在本地缓存阶段,找到一个对应的资源值,当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送http请求。

 

4、启用Gzip压缩

文件压缩后变小,提升文件的传输速度。

 

5、将css放在页面顶部 head标签中加载。

为了提高浏览器的渲染性能,

避免出现空白页面或散错的问题。

 

6、将script 放在页面最下面。

会先将页面内容呈现出来,避免了script报错页面空白等 问题,不会让用户等太久。

 

7、避免在css中使用Expressions(表达式)

Css 表达式存在会导致频繁计算,严重影响性能及用户体验。

8、将 javascript 和css 都放到外部文件中

        写在页面内的情况 :

        a、当样式或控制只应用一个页面时,写在页面内的好处大于提取出来。

        b、不经常被访问的

        c、脚本和样式很少

 

9、减少DNS查询

查询需要时间,在查询时间内浏览器就什么都干不了。如果有很多的查找过程对打开浏览器有很大的性能影响,所以需要对这个过程进行缓存,缓存之后就能减少这种查找过程。目前浏览器都自带有缓存功能,被缓存后浏览器会直接从缓存里面查找,节省时间。

通过配置多个域名存放不同的资源,但不是越多越好。

利用多个域名来存储网站资源优点:

     1、CDN缓存更方便。(用户就近获取资源)。

     2、突破浏览器并发限制。

同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞。大多数浏览器的 并发数量控制在6以内。有些资源的请求时间很长,因而会阻塞其他资源的请求,因此,对于一些静态资源,如果放到不同的域名下面就能实现与其他资源的并发请求。

        a.节约cookie带宽

        b.节约主域名的连接数,优化页面相应速度

        c.防止不必要的安全问题。

     3、缺点:

过多的域名会使DNS解析负担加重,因此一般控制在2-4个。

 

10、最小化javascript 和css

减小文件体积,

a、去除不必要的空白符,格式符,注释符。

b、简写方法名、参数名压缩js脚本。

c、在正式上线项目前,将javascript和css都进行压缩,使线上版本是最轻量级的,大幅提升网站性能。

 

11、避免重定向 ,找到了告知被转移再次请求,增加了浏览器的 往返次数。

永久重定向(301)和临时重定向(302),这对浏览器来说差异不大,都需要再次请求新地址,从而降低网站加载速度。

但是,搜索引擎会定时爬网络,遇到301会智能地只收录新地址,但是遇到302我们还是得从旧地址跳到新地址。

 

12、移除重复的脚本。

重复引用的脚本会重复执行,导致逻辑错误并延长页面加载时间。。

 

13、配置实体标签(ETag)

实体标签ETag,即是Entity Tag,需要服务器端配置。若用户请求时,浏览器和服务器的ETag一致,则说明资源未修改(304),则可以直接使用本地缓存的资源,减少传输资源带来的网页加载延迟。

不同服务器(IIS、Apache、Nginx)配置ETag的方式不一样。

 

14、使用ajax缓存

 

最后,推荐网站性能优化工具Yslow插件使用。

需要配合Firefox浏览器,同时依赖Firebug 插件,对自己写的网站进行具体地性能分析,生成性能优化报告。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/28994.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GitHub标星百万的程序员转架构之路,竟被阿里用作内部晋升参考

架构师是很多程序员的奋斗目标,也可以说是职场生涯的一个重要选择方向,今天我就跟大家聊一聊如何从一个程序员成长为一个架构师。 首先我们先来看看架构师的定义到底是什么? 系统架构师是一个不仅需要主持整体又得需体察局部瓶颈并且依据详…

Vulkan API的性能及兼容性

1)Vulkan API的性能及兼容性 ​2)FrameTiming.gpuFrameTime获取GPU耗时有什么条件 3)MMO里面的寻路网格如何制作 4)万国这种联盟边界的实现思路 这是第314篇UWA技术知识分享的推送。今天我们继续为大家精选了若干和开发、优化相关…

(九)笔记.net学习之委托和事件、多播委托、观察者模式

1.委托得声明、实例化和调用 (1)委托:本质是一个类,继承自System.MulticastDelegate,里面内置了几个方法,如构造函数等。 (2)声明委托:委托无方法体,可以有返回值或参数…

Linux文件系统和软硬连接

目录 1.文件组成 2.文件系统 3.软硬连接 1.文件组成 先来看看文件的属性部分: 文件属性由权限,硬连接数量,所属组,所属人,大小和修改时间构成。 再来看看文件由的一个的东西inode 793395 793328就是inode 2.文件系…

聚观早报 |中国企业成世界杯最大金主;马斯克恐失去世界首富位置

今日要闻:中国企业成世界杯最大金主;马斯克恐失去世界首富位置;刘强东称对不起京东高管;苹果在沪最大代工厂重启招工;威马汽车上海全员工资打折中国企业成世界杯最大金主 据报道,作为全球最为瞩目的赛事之一…

谁懂,java后端面试多次惨败并发的苦!幸好有阿里首发并发编程学习文档,系统全面还便于上手!

什么是并发 并发指的在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行。 并发和并行是十分容易混淆的概念。并发指的是多个任务交…

如何测试 esp-matter_example_light 例程

此例程支持三种配网方式: 苹果手机扫码配网chip-tool 命令配网Matter 指令配网 1 使用苹果手机扫码配网 说明文档:Apple Matter 测试方法 所需设备: 苹果手机(最新版本 IOS 系统)苹果音响(Apple-Matter&a…

【文本挖掘】业绩预告原因·其一

下载数据及提取信息 在此单列前15行: 000001,平安银行,预计本公司2006年度净利润与上一年度相比将增长300%-350%。2)业绩变化原因:利润的显著增长主要是由于利差的改善、资金运用效率的提高和贷款的良好增长,不良资产的成功清收和资产质量的…

基于PHP+MySQL企业网站的设计与开发

现如今,企业网站是商业贸易中的一条非常重要的道路,可以把其从传统的实体模式中解放中来,让用户足不出户就了解到企业的各种信息,为用户提供了极大的方便,网新帮德网站的主要功能包含:企业简介,新闻功能信息,企业业务信息,在线留言等功能。网站分为管理员、会员用户…

计算机组成原理期末复习第三章-1(唐朔飞)

计算机组成原理期末复习第三章-1(唐朔飞) ✨欢迎关注🖱点赞🎀收藏⭐留言✒ 🔮本文由京与旧铺原创,csdn首发! 😘系列专栏:java学习 💻首发时间:&am…

Ubuntu 20.04安装ipopt和cppAD(安装全流程+报错解决)

文章目录参考资料1. Ipopt安装1. 方式1: 命令行安装2. 方式2:源码安装3. 方式3:源码安装4. Ipopt测试5. 报错修复2. CppAD安装1. 方式1:命令行安装2. 方式2:源码方式安装3. CppAD测试3. 测试Ipopt与CppAD是否可用1. 例…

uni——app、H5省市区选择

案例演示 步骤 封装的组件&#xff0c;之后引用组件。 父&#xff1a; <pickerAddress change"change"><input type"text" placeholder"请选择所在地区" :value"value" /><image :src"$common.image(/static/p…

[附源码]java毕业设计新闻发布和评论管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

安装Jenkins

安装Jenkins jenkins官网 1、安装jdk 1&#xff09;yum安装 yum search java|grep jdk # yum查看jdk版yum install -y java-11-openjdk #安装jreyum install -y java-devel #安装jdk2&#xff09;自定义安装 ①下载java ②上传解压tar ③配置环境变量&#xff08;此步…

原生js 之 (BOM操作)

BOM(浏览器对象模型) Window对象对应着浏览器窗口本身&#xff0c;它的属性和方法通常被统称为BOM (浏览器对象模型) BOM 提供了独立于内容而与浏览器窗口进行交互的对象。 BOM主要用于管理窗口与窗口之间的通讯&#xff0c;因此其核心对象是Window BOM由一系列相关的对象组成…

Spark DAG及内存迭代计算

文章目录DAGJob与Action之间的关系DAG和分区DAG宽窄依赖DAG宽窄依赖的划分Spark内存迭代计算总结Spark是怎么做内存计算的&#xff1f;DAG的作用&#xff1f;Stage阶段划分作用&#xff1f;Spark为什么比MapReduce快&#xff1f;DAG Spark的核心是根据RDD来实现的&#xff0c;…

cubemx stm32 lu90614模块 人体温度检测模块 可以替代温枪 驱动代码

lu90614 使用串口通信在&#xff0c;指值得注意的是&#xff0c;他的TX接单片机的TX&#xff0c;RX接单片机的RX&#xff0c;和其他的串口设备不一样。 模式切换包 lu90614有两种模式&#xff0c; 一个是物温模式&#xff0c;一个是体温模式&#xff08;检测人体温度用体温…

【CSDN 竞赛—第10期】所有题目解法的思考和总结

目录 一、 熊孩子拜访 二、 走楼梯 三、括号上色 四、喜水青蛙 一、 熊孩子拜访 已知存在一个长度为n的整数序列A。 A中所有元素按照从小到达的顺序进行排序。 现在执行操作倒置一段序列。 请找到A序列里的倒置子序列。 我的解题思路&#xff08;通过所有测试用例&#xff0…

[附源码]java毕业设计星期八酒店管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Opengl ES之PBO

叨叨一句几句 关于Opengl的系列已经有较长的一段时间没有更新了&#xff0c;然而这个系列还远没有到完毕地步&#xff0c;后续至少还有关于Opengl矩阵变换、YUV与RGB互转、Opengl水印贴图、Opengl转场动画等主题文章。 断更的主要原因如果给自己找个借口的话可以说是工作比价…