前端网站性能优化-前端优化网站性能的办法-天涯论坛

wloe2gf 发表于 2024-8-31 13:09:16

前端网站性能优化-前端优化网站性能的办法

联接成功以后就能够起始传输数据了，传输数据须要将用户输入的URL封装成HTTPRequest哀告报文，发送到服务器，服务器收到哀告后会发出应答，即响应数据。
断掉TCP联接（4次挥手）
顾客端—>服务器端好了，咱们断掉联接吧？
服务端—>顾客端好的，我在检测一哈有无须要在发给你的信息？
服务端—>顾客端好了，咱们能够断掉联接了
顾客端—>服务端好的
浏览器解析
浏览器经过解析HTML，生成DOM树，解析CSS，生成CSS规则树，之后经过DOM树和CSS规则树生成渲染树。
根据渲染树布局，估算CSS款式，即每位节点在页面中的体积和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这些布局，改变DOM的外形款式以及体积和位置。此时就要提及两个重要概念：repaint(重画)和reflow(回流)。
repaint：屏幕的一部份重写，不影响整体布局，例如某个CSS的背景色变了，但元素的几何规格和位置不变。
reflow：寓意着器件的几何规格变了，咱们须要重新验证并估算渲染树。是渲染树的一部份或所有出现了变化。这便是Reflow，或是Layout。
性能优化工具LightHouse
LightHouse是Google开源的一个手动化工具，用于改进网路应用的质量。你能够将其做为一个Chrome扩充程序运行，或从命令行运行。当为Lighthouse供给一个要审查的网址，它将针对此页面运行一连串的测试，之后生成一个相关页面性能的报告。能够参考失败的测试，瞧瞧能够采取什么措施来改进应用。
——谷歌应用商店介绍
<img src="https://p26-sign.toutiaoimg.com/tos-cn-i-axegupay5k/c2d7eddd0b9047379ae93560d151c48e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1725645175&x-signature=ki4j2lpJrCYjUzT3NZqEfQ3XPZ4%3D" style="width: 50%; margin-bottom: 20px;">
点击runaudits都会手动帮咱们生成性能优化报告。
这儿举荐咱们运用下一代照片低格的技术，缘由是JPEG2000、JPEGXR和WebP等图象格式通常比PNG或JPEG供给更好的压缩，这寓意着更快的下载速率和更少的数据消耗。
网路部份DNSPrefetch优化
原理
当咱们拜访的时侯，首要就须要把域名转化为对应的IP位置，DNS本身的解析是一个非常历时的过程，打开DNSPrefetch以后，浏览器会在空闲时间提早将这种域名转化为对应的IP位置，这儿为了避免DNSPrefetch阻塞页面渲染影响用户体验，Chrome浏览器的引擎并无运用它的网路堆栈去进行预解析，而是单独开了8个完全异步的Worker线程专门负责DNSPrefetch。
怎么样运用
DNSPrefetch经过提早解析咱们用到的有些平常域名，大大降低了实质拜访时所耗费的时间，是一个非常好的处理方法，然则假如你所在的机构有国际化的业务，合理地运用DNSPrefetch相信能够带来不错的疗效。最后这儿要说明一点，DNSPrefetch的数目不是越多越好，大都数状况下咱们设置3-5个常用的就可，多了反倒会适得其反，虽然DNSPrefetch亦是会占用设备宽带。
Webpack性能优化完善速率优化
如今一个普通的后端项目中就有几百个包，加上每位包都有关联的依赖，可想而知工作量有多大。优化的办法亦很简单，便是降低版本描述文件。
举荐运用天猫供给的npm库房npm config set registry https://registry.npm.taobao.org
Webpack的打包流程
能够将其理解为一个函数，配置文件则是其参数，传入恰当的参数后，运行函数能够得到咱们想要的结果。
降低毋须要的编译，咱们在运用loader处理文件的时侯，应当尽可能把文件范围缩小，针对有些不须要处理的文件直接忽略。module: {
rules: [
{
//处理后缀名为js的文件
test: /\.js$/,
//exclude去掉不需要转译的第三方包 && 或这儿运用include去声明那些文件需要被处理
exclude: /(node_modules|bower_components)/,
//babel的常用配置项
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
//缓存设置为开启cacheDirectory: true,
},
},
},
];
}
这儿咱们针对不须要处理的第三方包直接运用exclude属性排除在外，或则须要处理的文件运用include属性去包括，再者里面咱们在options配置其中降低了cacheDirectory:true，这般针对转译结果就能够直接缓存到文件系统其中，在咱们上次须要的时侯直接到缓存其中读取就可。
运用模块热替换(HMR)，传统的假如咱们无配置模块热替换，则须要每次刷新全部页面，效率很低。而运用模块热替换以后，咱们只须要重新编译出现变化的模块，不须要编译所有模块，速率里面大大加强。详细配置方式如下：module.exports = {
......plugins: [
new webpack.HotModuleReplacementPlugin(), // 引入模块热替换插件
],
devServer: {
hot: true // 开启模块热替换模式
}
}
由于现今的项目就会引用海量的第三方包，这种包基本都是不会变的，咱们完全把她们打包到单独的文件其中，这就触及到了公共代码的提取,optimization.splitChunks插件optimization: {
splitChunks: {
//设置哪些代码用于分割
chunks: "all",
// 指定最小共享模块数(与CommonsChunkPlugin的minChunks类似)
minChunks: 1,
// 形成一个新代码块最小的体积
minSize: 0,
cacheGroups: {
framework: {
test: /lodash/,
name: "vendor",
enforce: true
}
}
}
}
打包文件质量优化
怎么样使打包出的文件尽可能的小，这般咱们在加载文件的时侯才会更快。
1.压缩JavaScript代码，在压缩JavaScript代码的时侯咱们须要先将代码解析成AST句型树，这个过程估算量非常大，咱们常用的插件是webpack-uglify-parallel。经过webpack-uglify-parallel咱们能够将每位资源的压缩过程交给单独的进程，借此来加强整体的压缩效率。这个插件并不在Webpack内部，须要咱们单独安装。配置方式亦比较简单，如下：const os = require("os");
const UglifyJsParallelPlugin = require("webpack-uglify-parallel");
new UglifyJsParallelPlugin({
//开启多进程
workers: os.cpus().length,
mangle: true,
compressor: {
//忽略警告
warnings: false,
//打开console
drop_console: true,
//打开debugger
drop_debugger: true,
},
});
2.压缩CSS代码，前面咱们介绍了压缩JavaScript代码的方式，一样CSS代码一样亦能够被压缩。WebPack4.x咱们用MiniCssExtractPlugin和OptimizeCSSAssetsPlugin，详细配置如下：const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // 分离css代码
"css-loader",
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "static/css/..css", //提取css存放目录
}),
new OptimizeCssAssetsPlugin(), // 运用OptimizeCssAssetsPlugin对CSS进行压缩
],
};
3.压缩照片，照片在一般项目其中都是最大的静态资源，因此照片的压缩就变得非常重要。照片压缩插件咱们常用的是imagemin-webpack-plugin。配置较为简单，如下：constImageminPlugin= require("imagemin-webpack-plugin").default;
module.exports = {
plugins: [
new ImageminPlugin({
pngquant: {
//指定压缩后的照片质量
quality: "95-100",
},
}),
],
};
即时升级你的Webpack版本来得到更优的打包速率照片优化照片格式介绍
<img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/e67eb1b5163f45e3b7b95d3844704866~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1725645175&x-signature=DJzXwskLXgMGoyNolpK6jCvhkKg%3D" style="width: 50%; margin-bottom: 20px;">
优化方式：
照片懒加载
照片懒加载是现今最常用的性能优化手段之一，针对首屏用不到的照片，咱们完全能够运用懒加载在用户下拉到对应位置的时侯再进行加载，防止网页打开时一下子加载太多资源。
照片渐进表示
JPEG还能够细分为BaselineJPEG（标准型）、ProgressiveJPEG（渐进式）。
BaselineJPEG格式：
<img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/e400e24d078846009651414f549a40bd~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1725645175&x-signature=Gcrkpbs9RF1JkAoNQF46tmXcI1A%3D" style="width: 50%; margin-bottom: 20px;">
ProgressiveJPEG（渐进式）：运用了渐进表示
<img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/14d78ba6d5364ca5a93ae77ae4543c45~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1725645175&x-signature=rpPQcgqglSDN886%2FiIyJ0QpVCPk%3D" style="width: 50%; margin-bottom: 20px;">
运用ProgressiveJPEG格式照片，直接运用Photoshop，之后在保留为JPEG格式的时侯，将连续这个选项勾选就可。
缓存优化CDN缓存
CDN的全叫作是ContentDeliveryNetwork，即内容分发网路，基本原理是避免互联网上有可能影响数据传输速率和稳定性的困局和环节，使内容才可传输的更快，愈发稳定。
**原理：**经过在各个地区布署相应的服务器，产生CDN集群，从而提高拜访速率。
<img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/9613973341954789b96d3e725b43ad24~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1725645175&x-signature=VCgnRATLnpFMIEfGtwD%2BobpviLM%3D" style="width: 50%; margin-bottom: 20px;">
顾客端在得到IP位置以后，拜访近来的边沿节点。边沿节点是最小的，规模亦是最小的，不会缓存所有东西。若果无找到对应资源都会去它的上一层区域节点去找寻，若果仍然无则去中心节点找寻，假如中心节点亦无，最后再去原网站去拜访。这一层一层向下找的过程咱们叫作为回源。
优化方法：
本地缓存LocalStorage
优良
劣势
SessionStorage
SessionStorage仅在当前会话下才可起功效，一旦咱们关掉当前的Tab，SessionStorage亦就失效了。因而，SessionStorage是一个有时效性的储存方法。
运用场景：由于SessionStorage拥有时效性，常用的业务场景例如网站平常的旅客登陆，就能够储存在SessionStorage其中，还有网站的有些临时浏览记录都能够运用SessionStorage来进行记录。
Cookie
Cookie的体积最大仅有4KB，并且它是纯文本的文件，咱们每次发起HTTP哀告就会携带Cookie。
特点
IndexedDB
IndexedDB是非关系型数据库(类NOSQL)，虽然它和咱们当下非常流行的MongoDB非常相像，咱们直接运用JavaScript语言就能够直接进行关联的操作，不须要别的语言，大大增多了学习成本。
恰当借助缓存是后端工程师的选修课

qzmjef 发表于 2024-10-20 03:30:36

期待更新、坐等、迫不及待等。

b1gc8v 发表于 2024-11-1 23:43:53

外链发布论坛学习网络优化SEO。

nykek5i 发表于 2024-11-7 08:21:39

谷歌外贸网站优化技术。

页: [1]

天涯论坛's Archiver

前端网站性能优化-前端优化网站性能的办法