首页 > 其他分享 >性能优化

性能优化

时间:2022-11-11 14:14:49浏览次数:32  
标签:浏览器 性能 重绘 webpack 加载 优化 代码 图片

一、webpack优化

1、如何用webpack优化前端性能:通过webpack优化前端的手段

1.1、代码压缩
a、JS代码压缩

利用webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS文件
b、CSS代码压缩
利用cssnano (css-loader?minimize)来压缩css
b、Html文件代码压缩
使用HtmlWebpackPlugin插件来生成HTML的模板时候,通过配置属性minify进行html优化
1.2、文件大小压缩
对文件的大小进行压缩,减少http传输过程中宽带的损耗
1.3、图片压缩
1.4、Tree Shaking
将代码中永远不会走到的片段删除掉(消除死代码)。可以通过在启动webpack时追加参数 --optimize-minimize 来实现;
1.5、代码分离
代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利浏览器缓存
1.6、提取公共第三方库
SplitChunksPlugin插件来进行公共模块抽取,利用浏览器缓存可以长期缓存这些无需频繁变动的公共代码

2、如何提高webpack构建速度?

优化webpack构建的方式有很多,主要可以从优化搜索时间、缩小文件搜索范围、减少不必要的编译等方面入手:
a、优化loader配置
在使用loader时,可以通过配置include、exclude、test属性来匹配文件,缩小文件的搜索范围,优化搜索时间
b、多入口情况下,使用CommonsChunkPlugin 来提取公共代码
c、通过 externals 配置来提取常⽤库,脱离webpack打包,不被打⼊bundle中,从⽽减少打包时间
d、利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但是绝对不会修改的npm包来进⾏预编译,再通过 DllReferencePlugin 将预编译的模块加载进来,让⼀些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间
e、使⽤ Happypack 实现多线程加速编译
f、使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度
g、使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码
h、利⽤缓存提⾼rebuild效率

3、如何减少webpack打包时间?

a、优化Loader

b、HappyPack

c、DllPlugin

d、代码压缩 使用 UglifyJS

e、resolve.extensions

 

4、如何减少webpack打包体积?

a、按需加载

b、Tree Shaking

Tree Shaking 可以实现删除项目中未被引用的代码(死代码)

c、

Scope Hoisting
Scope Hoisting 会分析出模块之间的依赖关系,尽可能的把打包出来的模块合并到一个函数中去。这样的打包方式生成的代码明显比之前的少多了。如果在 Webpack4 中你希望开启这个功能,只需要启用 optimization.concatenateModules 就可以了

 

 二、如何对项目中的图片进行优化?

1、不用图片
很多时候会使用到很多修饰类图片,其实这类修饰图片完全可以用 CSS 去代替。
2、对于移动端来说,屏幕宽度就那么点,完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载,可以计算出适配屏幕的宽度,然后去请求相应裁剪好的图片。
3、小图使用 base64 格式
4、将多个图标文件整合到一张图片中(雪碧图)
5、选择正确的图片格式:
○ 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量,缺点就是兼容性并不好
○ 小图使用 PNG,其实对于大部分图标这类图片,完全可以使用 SVG 代替
○ 照片使用 JPEG

三、减少回流与重绘

1、回流与重绘的概念及触发条件

1.1、回流/重排
概念:
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时,浏览器会重新渲染部分或者全部文档的过程就称为回流。
触发条件:
● 页面的首次渲染
● 浏览器的窗口大小发生变化
● 元素的内容发生变化
● 元素的尺寸或者位置发生变化
● 元素的字体大小发生变化
● 激活CSS伪类
● 查询某些属性或者调用某些方法
● 添加或者删除可见的DOM元素
1.2、重绘
概念:
当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器就会对元素进行重新绘制,这个过程就是重绘。
触发条件:
● color、background 相关属性:background-color、background-image 等
● outline 相关属性:outline-color、outline-width 、text-decoration
● border-radius、visibility、box-shadow

2、如何避免回流与重绘
2.1、CSS
避免设置多层内联样式。
如果需要设置动画效果,最好使用absolute或者fixed,使元素脱离文档流,这样他们发生变化就不会影响其他元素。
避免使用CSS表达式(例如:calc())。
2.2、JS
避免频繁操作样式,最好将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。
可以先为元素设置为不可见:display: none,操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
2.3、浏览器针对页面的回流与重绘,进行了自身的优化——渲染队列
浏览器会将所有的回流、重绘的操作放在一个队列中,当队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会对队列进行批量处理。这样就会让多次的回流、重绘变成一次回流重绘。

四、懒加载

1、懒加载的概念

懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。

在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。

如果使用图片的懒加载就可以解决以上问题。

在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。

这样使得网页的加载速度更快,减少了服务器的负载。懒加载适用于图片较多,页面列表较长(长列表)的场景中。

2、懒加载的特点

减少无用资源的加载:
  使用懒加载明显减少了服务器的压力和流量,同时也减小了浏览器的负担
提升用户体验:
  如果同时加载较多图片,可能需要等待的时间较长,这样影响了用户体验,而使用懒加载就能大大的提高用户体验。
防止加载过多图片而影响其他资源文件的加载:
  会影响网站应用的正常使用

3、原理

3.1、

图片的加载是由src引起的,当对src赋值时,浏览器就会请求图片资源。

根据这个原理,我们使用HTML5 的data-xxx属性来储存图片的路径,在需要加载图片的时候,将data-xxx中图片的路径赋值给src,这样就实现了图片的按需加载,即懒加载。

3.2、

懒加载的实现重点在于确定用户需要加载哪张图片,在浏览器中,可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时,获取图片的真实地址并赋值给图片即可。

3.3、使用原生JavaScript实现懒加载

a、描述

window.innerHeight 是浏览器可视区的高度

document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离

imgs.offsetTop 是元素顶部距离文档顶部的高度(包括滚动条的距离)

图片加载条件:img.offsetTop < window.innerHeight + document.body.scrollTop;

 

b、代码实现

 

 

 

 4、懒加载与预加载的区别

这两种方式都是提高网页性能的方式,两者主要区别是一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。
4.1、懒加载:
懒加载也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力。它适用于图片很多,页面很长的电商网站的场景。懒加载的实现原理是,将页面上的图片的 src 属性设置为空字符串,将图片的真实路径保存在一个自定义属性中,当页面滚动的时候,进行判断,如果图片进入页面可视区域内,则从自定义属性中取出真实路径赋值给图片的 src 属性,以此来实现图片的延迟加载。
4.2、预加载:
预加载指的是将所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间,提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象,通过为 image 对象来设置 src属性,来实现图片的预加载。

五、节流与防抖

1、对节流与防抖的理解

1.1、防抖
1.1.1、概念
函数防抖是指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。
1.1.2、应用场景
按钮提交场景:防⽌多次提交按钮,只执⾏最后提交的⼀次
服务端验证场景:表单验证需要服务端配合,只执⾏⼀段连续的输⼊事件的最后⼀次,还有搜索联想词功能类似⽣存环境请⽤lodash.debounce
1.2、节流
1.2.1、概念
函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。节流可以使用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。
1.2.2、应用场景
拖拽场景:固定时间内只执⾏⼀次,防⽌超⾼频次触发位置变动
缩放场景:监控浏览器resize
动画场景:避免短时间内多次触发动画引起性能问题

2、实现节流函数和防抖函数

2.1、防抖

 

 2.2、节流

 

标签:浏览器,性能,重绘,webpack,加载,优化,代码,图片
From: https://www.cnblogs.com/gs-top/p/16877742.html

相关文章

  • Nginx 优化与防盗链
    一、隐藏版本号1、隐藏版本号的操作步骤可以使用Fiddler工具抓取数据包,查看Nginx版本,也可以在CentOS中使用命令 curl-Ihttp://192.168.160.60显示响应报文首部......
  • 搜索精准度优化架构方案
    搜索精准度优化架构方案概述实现公司对内容精准化搜索和用户精准化推送的目标。采用方案 搜索技术+数据挖掘+机器学习(未来)+人工审核(现在)人员配......
  • 通过硬件计数器,将性能提升3倍之旅
    通过硬件计数器,将性能提升3倍之旅翻译自:Seeingthroughhardwarecounters:ajourneytothreefoldperformanceincrease本文通过对CPU层面的代码挖掘,发现JVM存在的问......
  • ulimit命令优化linux进程连接数等…
    在Linux下面部署应用的时候,有时候会遇上Socket/File:Can’topensomanyfiles的问题,比如还有Squid做代理,当文件打开数到900多时速能就非常快的下降,有可能打不开网页.其......
  • 单调队列优化DP
    [POI2015]WIL题目描述给定一个长度为\(n\)的序列,你有一次机会选中一段连续的长度不超过\(d\)的区间,将里面所有数字全部修改为\(0\)。请找到最长的一段连续区间,使得......
  • 内核优化常见参数
    001、大页内存管理建议:关闭TransparentHugePages:大页内存管理,不过他和标准的大页内存管理有区别。TransparentHugePages是在运行时动态分配内存的,而标准的HugePages是......
  • Android中使用ViewStub提高布局性能
    在Android开发中,View是我们必须要接触的用来展示的技术.通常情况下随着View视图的越来越复杂,整体布局的性能也会随之下降.这里介绍一个在某些场景下提升布局性能的View,它......
  • 堆排序优化版Dijkstra
    Dijkstra依旧基于贪心用堆排序动态维护剩余点中dist[]最小的点堆排序优化Dijkstra算法 稀疏图,用邻接表,稠密也可以 void add(int a,int b,int c){    e[i......
  • Android Study 之冷启动优化(解决启动短暂白屏or黑屏)
    LZ-Says:话说真正负责项目后才发现,想要软件越来越好,就要从细节抓问题,去解决问题,这样我们的软件才会越来越好~前言今天下班路上闲的无聊随便点了几个app,包括正在负责的几个项......
  • MySQL-数据库优化
     数据库优化: 数据库设计:1.字段选型:数字类型:tinyintsmalintmediumintintbigint字符类型:charvarchar事件类型:datedate......