常见前端项目性能优化方案

常见前端项目性能优化方案

一、页面内容优化

  1. 减少http请求次数
  2. 减少DNS查询次数
  3. 避免页面跳转
  4. 缓存ajax
  5. 延迟加载(一般用在图片多的页面中,滚动时才加载)
  6. 预加载
  7. 减少DOM元素数量
  8. 减少iframe数量
  9. 避免404

二、css优化

  1. 将样式表置顶将 (CSS放在 HEAD中,防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面)
  2. 避免css表达式
  3. 用link代替@import ; 使用css@import会造成额外的请求
  4. 避免使用filters
  5. css文件合并与压缩

三、js代码优化

  1. 将脚本置底(将脚本内容在页面信息内容加载后再加载)
  2. 使用外部javascript和css文件
  3. 去除重复脚本,避免重复的资源请求
  4. 减少DOM访问(修改和访问DOM元素会造成页面的重绘和重排,循环对DOM操作更是减慢页面加载速度)
  5. js文件合并与压缩

四、图片优化

  1. 优化图片大小
  2. 尽量使用css sprite(精灵图也叫雪碧图)
  3. 不要在html中缩放图片
  4. 使用小且可缓存的favicon.ico
  5. 在代码中进行图片的延迟加载,也叫做赖加载。
  6. 避免img、iframe等标签的src属性为空:空src会重新加载当前页面,影响速度和效率。
  7. 图像尽量避免使用DataURL:DataURL图像没有使用图像压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长。

五、减少Cookie传输

  1. Cookie包含在每次请求和响应中,太大的Cookie会严重影响数据传输,因此哪些数据需要写入Cookie需要慎重考虑,尽量减少Cookie中传输的数据量

六、浏览器端使用缓存

  1. CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次HTTP请求都需要的,如果将这些文件缓存在浏览器中,可以极好地改善性能。
  2. 用法:通过设置HTTP头中的Cache-Control和Expires属性,可设定浏览器缓存,缓存时间可以是数天,甚至是数月。

七、服务器端使用压缩

  1. 在服务器端对文件进行压缩,在浏览器对文件解压缩,可有效减少通信传输的数据量。文本文件的压缩率可达80%以上,因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。

八、减少资源大小

html压缩
html代码压缩就是压缩在文本文件中有意义,但是在html中不显示的字符,包括空格,制表符

css压缩
css压缩包括无效代码删除与css语义合并

js压缩与混乱
js压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码的可读性、实现代码的保护

图片压缩

九、优化网络连接

1 使用CDN
CDN是内容分发网络,它能够实时地根据网络流量和各个节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上,其目的是使用户可以就近的取得所需内容,解决网络拥挤的状况,提高网站的响应速度

2 使用DNS预解析
当浏览器访问一个域名的时候,需要解析一次DNS,获得对应域名的ip地址,在解析过程中,按照浏览器缓存、系统缓存、路由器换算、DNS缓存、域名服务器的顺序,逐步读取缓存,直到拿到ip地址

3 持久连接
使用keep-alive或者persistent来建立持久连接,降低了延时和连接建立的开销

十、优化资源加载

1 资源加载位置
通过优化资源加载位置,更改资源加载时机,使尽可能快地展示出页面内容,尽可能快地使用功能可用

2 资源加载时机
3.异步script标签
defer:异步加载,在html解析完成后执行。defer的实际效果与将代码放在body底部类似
async:异步加载,加载完成后立即执行
4.模块按需加载

5.使用资源预加载preload和资源预读取prefetch
preload让浏览器提前加载指定资源,需要执行时候再执行,可以加快当前页面的加载速度
prefetch告诉浏览器加载下一个页面可能会用到的资源,可以加速下一个页面的加载速度

6.资源懒加载与资源预加载(错峰操作)
资源延迟加载也称为资源懒加载,延迟加载资源或符合某些条件的时候才加载某些资源
资源预加载是提前加载用户所需的资源,保证良好的用户体验
资源懒加载和资源预加载都是一种错峰操作,在浏览器忙碌的时候不能操作,浏览器空闲的时候再加载资源,优化了网络性能

十一**、**减少重绘回流

十二**、**用对选择器

id选择器选择元素是最快的

十三**、**不滥用WEB字体

WEB字体需要下载、解析、重绘当前页面,尽量减少使用。

十四**、**选用性能更好的api

十五、使用web worker

Web Worker是HTML5提供的一个javascript多线程解决方案,可以将一些大计算量的代码交由web Worker运行,从而避免阻塞用户界面,在执行复杂计算和数据处理时,这个API非常有用。但是,要注意其浏览器兼容性。

十六**、**减少重定向

尽量避免使用重定向,当页面发生了重定向,就会延迟整个HTML文档的传输。在HTML文档到达之前,页面中不会呈现任何东西,也没有任何组件会被下载,降低了用户体验

如果一定要使用重定向,如http重定向到https,要使用301永久重定向,而不是302临时重定向。因为,如果使用302,则每一次访问http,都会被重定向到https的页面。而永久重定向,在第一次从http重定向到https之后 ,每次访问http,会直接返回https的页面

十七开启Gzip(代码压缩)

Gzip即数据压缩,前端生产环境中将js、css、图片等文件进行压缩,通过减少数据传输量减小传输时间,节省服务器网络带宽,提高前端性能。

十八、事件代理(事件委托)

事件代理的原理是DOM元素的事件冒泡

  1. 可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
  2. 可以实现当新增子对象时无需再次对其绑定

十九、防抖和节流

使用函数节流(throttle)或函数去抖(debounce),限制某一个方法的频繁触发

二十、webpack优化

【打包公共代码】

使用CommonsChunkPlugin插件,将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用。这会带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件

webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk

通过设置 optimization.splitChunks.chunks: “all” 来启动默认的代码分割配置项

【动态导入和按需加载】

webpack提供了两种技术通过模块的内联函数调用来分离代码,优先选择的方式是,使用符合 ECMAScript 提案 的 import() 语法。第二种,则是使用 webpack 特定的 require.ensure

【剔除无用代码】

tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup

JS的tree shaking主要通过uglifyjs插件来完成,CSS的tree shaking主要通过purify CSS来实现的

【长缓存优化】

1、将hash替换为chunkhash,这样当chunk不变时,缓存依然有效

2、使用Name而不是id

每个 module.id 会基于默认的解析顺序(resolve order)进行增量。也就是说,当解析顺序发生变化,ID 也会随之改变

下面来使用两个插件解决这个问题。第一个插件是 NamedModulesPlugin,将使用模块的路径,而不是数字标识符。虽然此插件有助于在开发过程中输出结果的可读性,然而执行时间会长一些。第二个选择是使用 HashedModuleIdsPlugin,推荐用于生产环境构建

【公用代码内联】

使用html-webpack-inline-chunk-plugin插件将mainfest.js内联到html文件中

【缩小构建目标,排除 Webpack 不需要解析的模块】

排除 Webpack 不需要解析的模块。即使用 loader 的时候,在尽量少的模块中去使用。我们可以借助 include 和 exclude 这两个参数,规定 loader 只在那些模块应用和在哪些模块不应用。

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

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

相关文章

Linux云服务器,docker compose文件部署多个jar,docker部署多模块boot项目

前提条件 Linux服务器 服务器已经安装docker docker已经安装jdk镜像 docker已经安装mysql镜像 将要部署的项目的jar包打包好,项目是多模块springboot项目 部署过程 项目是3个模块的Spring boot项目,打出来3个jar,将这些jar包拷贝到…

Linux/Unix-gcc编译回顾

1、gcc编译为可执行程序四步骤:预处理->编译->汇编->链接 注意:-o 用于修改生产的文件名 2、gcc常用参数 指定头文件:-I 语法: gcc -I 头文件所在文件夹路径 源文件 -o 生成文件名 如果头文件和源文件中同一个文件夹…

华为OD真题-流水线-带答案

题目描述: 一个工厂有m条流水线,来并行完成n个独立的作业,该工厂设置了一个调度系统,在安排作业时,总是优先执行处理时间最短的作业。 现给定流水线个数m,需要完成的作业数n, 每个作业的处理时间分别为t1,t…

阿里云OSS迁移工具ossimport实战心得

前言 由于业务的增长,传统的基于磁盘的文件存储需要迁移到阿里云OSS对象存储中。我们的业务主要是涉及GPS轨迹小文件,大致有1TB,文件数量5千万。在使用阿里云ossimport工具的过程中有些基本概念不明确,导致了一些操作失误&#xf…

性能测试 Linux 环境下模拟延时和丢包实现

在性能测试过程中,我们还需要模拟网络异常的情况下,是否会出现一些异常数据。最常见的就是写库操作,比如说我们下单的场景,如果出现网络异常的时候是否会出现数据对不上这种情况。 如我们JMeter发送成功的请求数量和最终数据库表…

linux之Ubuntu系列(五)用户管理、查看用户信息 终端命令

创建用户 、删除用户、修改其他用户密码的终端命令都需要通过 sudo 执行 创建用户 设置密码 删除用户 sudo useradd -m -g 组名 新建用户名 添加新用户 -m:自动建立用户 家目录 -g:指定用户所在的组。否则会建立一个和用户同名的组 设置新增用户的密码&…

Git源代码管理方案

背景 现阶段的Git源代码管理上有一些漏洞,导致在每次上线发布的时间长、出问题,对整体产品的进度有一定的影响。 作用 新的Git源代码管理方案有以下作用: 多功能并行开发时,测试人员可以根据需求任务分配测试自己的功能&#…

Ceph 分布式存储之应用

一、创建 CephFS 文件系统 MDS 接口 1、服务端操作 1)在管理节点创建 mds 服务 [rootadmin ceph]# cd /etc/ceph [rootadmin ceph]# ceph-deploy mds create node01 node02 node03 [ceph_deploy.conf][DEBUG ] found configuration file at: /root/.cephdeploy.c…

.Net5 mvc项目UseBrowserLink插件功能失效的原因

前期基于.Net Framework创建的Web项目,使用了BrowserLink插件协助前端开发,功能一直都比较稳定,后来项目迁到.Net5 ,发现BrowserLink 已经失去了从浏览器定位到项目源代码的功能,希望在后面的版本还能继续支持此版本&a…

Velocity如何对变量中的引号特殊字符进行转义

简介 Velocity是一个基于Java的模板引擎,与Freemarker类似。相较于Freemarker更轻量,但带来的问题就是功能不如Freemarker强大,所以实际项目中可能会更倾向于用Freemarker,这里不作过多介绍了,本文主要记录一下在使用…

国内流行的数据可视化软件工具

在信息爆炸的时代,越来越多的数据堆积如山。但是,这些密集的数据没有重点且可读性较差。因此,我们需要数据可视化来帮助数据易于理解和接受。相比之下,可视化更直观、更有意义,使用适当的数据可视化工具来可视化数据非…

golang整合kafka

kafka 基本概念 消息队列 1、什么是消息队列 消息(Message)是指在应用之间传送的数据,消息可以非常简单,比如只包含文本字符串,也可以更复杂,可能包含嵌入对象。 消息队列(Message Queue&…

SDN系统方法 | 1. 概述

随着互联网和数据中心流量的爆炸式增长,SDN已经逐步取代静态路由交换设备成为构建网络的主流方式,本系列是免费电子书《Software-Defined Networks: A Systems Approach》的中文版,完整介绍了SDN的概念、原理、架构和实现方式。原文: Softwar…

基于FT232HL的USB2.0转ARINC429板卡

基于FT232HL的USB2.0转ARINC429板卡 1 概述 《USB2.0转ARINC429板卡》采用底板子板,层叠安装的结构;使用同样的底板,变换不同功能的子板实现不同的功能版本。 a) 降低硬件设计复杂度:新板卡设计只需要设计子板,子板的…

MySQL中这14个小玩意,让人眼前一亮!!!

前言 我最近几年用MYSQL数据库挺多的,发现了一些非常有用的小玩意,今天拿出来分享到大家,希望对你会有所帮助。 1.group_concat 在我们平常的工作中,使用group by进行分组的场景,是非常多的。 比如想统计出用户表中…

《动手学深度学习》(pytorch版本)中`d2lzh_pytorch`包问题

《动手学深度学习》(pytorch版本)中d2lzh_pytorch包问题

机器视觉检测系统不稳定因素分析

机器视觉的研究始于20世纪50年代二维图像的模式识别,它起初被设计用来代替人眼从事检测识别的工作,可以大大提高检测的工作效率以及降低人眼疲劳带来的检测结果的不一致性。机器视觉检测发展至今,在许多方面已经发展到可以完成人眼难以完成的工作,如高精度的测量以及对特定…

倍福TwinCAT运动控制学习资料

学习倍福控制器和EtherCAT协议的时候,TwinCAT3是非常有必须要学习的。TwinCAT软件其功能强大,可以写plc程序,可以写图形化界面,可以观察波形等等。初次学习时参考TwinCAT3 入门教程和TwinCAT 3运动控制教程,把TwinCAT …

【深度学习】张量的广播专题

一、说明 张量广播(tensor broadcasting)是一种将低维张量自动转化为高维张量的技术,使得张量之间可以进行基于元素的运算(如加、减、乘等)。在进行张量广播时,会将维度数较少的张量沿着长度为1的轴进行复制…