这么建立com的网站,最新logo设计大赛,成都做营销型网站,seo推广知识大白话前端性能优化方法的分类与具体实现
一、资源加载优化
1. 压缩与合并文件
大白话解释#xff1a; 咱们的网页代码里#xff0c;就像一个房间堆满了东西#xff0c;有很多没用的“杂物”#xff0c;比如代码里的空格、注释啥的。压缩文件就是把这些“杂物”清理掉 咱们的网页代码里就像一个房间堆满了东西有很多没用的“杂物”比如代码里的空格、注释啥的。压缩文件就是把这些“杂物”清理掉让文件变得更“瘦”下载起来就快多啦。合并文件呢就好比把好几个小包裹合成一个大包裹这样浏览器下载的时候就不用一次又一次地去请求节省时间。 具体实现使用 Webpack 压缩合并 JavaScript 和 CSS 文件 首先确保你已经安装了 Webpack 和相关的加载器、插件。安装依赖
npm install webpack webpack-cli css - loader style - loader terser - webpack - plugin mini - css - extract - plugin --save - dev- 创建 webpack.config.js 文件const path require(path);
const TerserPlugin require(terser - webpack - plugin);
const MiniCssExtractPlugin require(mini - css - extract - plugin);module.exports {mode: production,entry: ./src/index.js,output: {path: path.resolve(__dirname, dist),filename: bundle.js},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, css - loader]}]},optimization: {minimizer: [new TerserPlugin()]},plugins: [new MiniCssExtractPlugin({filename: styles.css})]
};- 在 package.json 里添加脚本{scripts: {build: webpack}
}- 运行 npm run build 就可以压缩合并代码了。2. 图片优化
大白话解释 图片就像一个个大胖子特别占地方下载起来可费劲了。选对图片格式就像给胖子减肥选个合适的方法让它变瘦。压缩图片呢就是把胖子身上多余的“肥肉”去掉让它更轻巧。 具体实现使用 TinyPNG 在线压缩图片 打开 TinyPNG 官网。点击上传图片按钮选择你要压缩的图片。TinyPNG 会自动帮你压缩图片压缩完成后下载压缩后的图片替换原来的图片就行。
3. 按需加载
大白话解释 有些东西不是一开始就需要的就像你去超市买东西有些东西等你要用的时候再去拿没必要一开始就把所有东西都买回家。按需加载就是等用户需要用到某个功能或者资源的时候再去加载它这样能加快页面的初始加载速度。 具体实现Vue 路由懒加载
// 原来的路由配置
// import Home from ./views/Home.vue
// import About from ./views/About.vue// 改为懒加载
const Home () import(./views/Home.vue);
const About () import(./views/About.vue);const routes [{path: /,name: Home,component: Home},{path: /about,name: About,component: About}
];二、代码优化
1. 防抖和节流
大白话解释 防抖就像坐电梯你一直按开门按钮电梯不会每次都开门而是等你停了一会儿确定你不按了才会开门。节流呢就像水龙头不管你怎么拧在一段时间内水的流量是固定的不会一直变大。 具体实现JavaScript 防抖和节流函数
// 防抖函数
function debounce(func, delay) {let timer;return function () {const context this;const args arguments;clearTimeout(timer);timer setTimeout(() {func.apply(context, args);}, delay);};
}// 节流函数
function throttle(func, limit) {let inThrottle;return function () {const context this;const args arguments;if (!inThrottle) {func.apply(context, args);inThrottle true;setTimeout(() inThrottle false, limit);}};
}// 使用示例
const input document.getElementById(searchInput);
const searchFunction () {console.log(执行搜索);
};// 防抖
input.addEventListener(input, debounce(searchFunction, 300));// 节流
window.addEventListener(scroll, throttle(() {console.log(滚动触发);
}, 200));2. 减少重排和重绘
大白话解释 重排就像你重新布置房间里的家具得把家具挪来挪去很费时间。重绘就像给家具重新刷漆也得花点时间。减少重排和重绘就是尽量少折腾房间里的家具让页面加载和渲染更快。 具体实现批量修改样式减少重排
!DOCTYPE html
html langenheadmeta charsetUTF - 8
/headbodydiv idmyDiv这是一个 div/divscriptconst div document.getElementById(myDiv);// 先获取样式对象const style div.style;// 批量修改样式style.width 200px;style.height 200px;style.backgroundColor red;/script
/body/html三、缓存优化
1. 浏览器缓存
大白话解释 浏览器缓存就像你的小仓库把一些常用的东西放进去。下次要用的时候直接从仓库里拿不用再去外面买这样就节省时间啦。 具体实现设置 HTTP 缓存头 如果你使用 Node.js 和 Express 框架可以这样设置
const express require(express);
const app express();app.get(/static/js/main.js, (req, res) {res.set(Cache - Control, public, max - age3600);res.sendFile(__dirname /public/js/main.js);
});const port 3000;
app.listen(port, () {console.log(Server running on port ${port});
});2. CDN 缓存
大白话解释 CDN 就像在全国各地都有小仓库你要的东西离你近的仓库就有不用从很远的大仓库运过来速度就快了。 具体实现使用阿里云 CDN 登录阿里云 CDN 控制台。添加域名配置源站信息就是你原来存放资源的服务器地址。把网页里的资源链接替换成 CDN 分配的链接比如把 script srchttp://your - server.com/js/main.js/script 换成 script srchttp://your - cdn - domain.com/js/main.js/script。
四、服务器优化
1. 选择合适的服务器
大白话解释 服务器就像你的厨师好的厨师做菜又快又好吃。选性能好、稳定的服务器网页响应速度就快用户体验就好。 具体实现 如果你是个人小网站可以选择阿里云轻量应用服务器配置简单价格实惠。如果是大型网站就选择性能更高的云服务器 ECS根据网站的访问量和需求选择合适的配置。
2. 优化服务器配置
大白话解释 服务器配置就像厨师的厨房工具工具好用做菜效率就高。优化服务器配置能让服务器处理请求更快就像给厨师换上更锋利的刀和更顺手的锅。 具体实现Nginx 调整并发连接数 打开 Nginx 配置文件一般在 /etc/nginx/nginx.conf。找到 worker_connections 配置项把它的值调大比如
worker_processes 1;events {worker_connections 1024; // 可根据服务器性能调整
}保存配置文件重启 Nginx 服务
sudo systemctl restart nginx
