前端性能优化:页面加载速度慢怎么办？ |
您所在的位置：网站首页 › justdance加载太慢 › 前端性能优化:页面加载速度慢怎么办？ |
前端性能优化:页面加载速度慢怎么办？
|
文章目录
前端性能优化如何识别页面加载速度慢的原因性能优化的方式提高资源的请求速度http缓存 --提升二次访问的响应速度CDN缓存静态资源缓存webpack的hash策略-文件资源缓存
减少资源请求量图片懒加载代码构建优化webpack资源压缩tree sharking -js代码的精简分包按需加载
浏览器渲染优化web workerGPU加速
前端性能优化
如何识别页面加载速度慢的原因
方式1:lighthouse 浏览器开发者工具lighthouse插件，该插件会对当前的页面进行性能分析，并提出详细的文档和建议，解释为什么是这个分数，最后指出页面存在的问题，为进一步改进给出方案
方式2：window的performance 对象 通过window.performance 对象可以获取到当前页面与性能相关的信息 方式3：在控制台中的load显示首屏加载的时间 从两个维度进行优化 提高资源的请求速度减少资源请求量浏览器渲染的优化 提高资源的请求速度 http缓存 --提升二次访问的响应速度笔记 CDN缓存静态资源缓存笔记 CDN内容分发网络缓存静态资源，在多个位置部署服务器。用户访问时，CDN根据网络情况、负载情况等将会用请求导向到最近的服务器，提升响应速度 webpack的hash策略-文件资源缓存文件名[hash]一般结合浏览器缓存使用的,相当于资源名称后面加版本名 hash :修改其中一个文件后，每一次重新构建webpack打包，都会生成一个新的hash值，所有资源都共用这个hash值，即使没有修改的文件hash值也会变chunkhash:根据chunk生成的hash值。如果打包来源与同一个chunk，那么哈希值一样。（chunk:从入口开始该入口的依赖，一个入口对应一个chunk） 使用场景: 我们把一些公共库和程序入口文件区分开来，单独打包构建，接着可以采用 chunkhash 方式来生成 hash 值，那么只要我们不改动公共库的代码，就可以保证其 hash 值不受影响，这样也起到缓存的作用。contenthash:根据文件内容生成hash值 减少资源请求量 图片懒加载笔记 代码构建优化 webpack资源压缩 js:去掉无效代码、去掉日志输出代码、缩短变量名等优化 uglifyjs-webpack-plugin插件，默认是集成在生产模式中，如果需要更多自定义也可以对该插件进行配置 const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); /* include要被处理的文件 exclude不被处理的文件 chunkFilter 判断哪些chunk可以被压缩，返回值为true的辉被压缩，false则不会被压缩 */ module.exports = { optimization: { minimizer: [ new UglifyJsPlugin({ chunkFilter: (chunk) => { // `vendor` 块不压缩 if (chunk.name === "vendor") { return false; } return true; }, }), ], }, }; css:删除无效代码，css语义合并 css-minimizer-webpack-plugin插件 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { // ... optimization: { minimizer: [ new CssMinimizerPlugin(), ], }, }; html html-webpack-plugin插件除了帮助我们简化HTML文件的创建，也可以压缩HTML文件 module.exports = { plugins: [new HtmlWebpackPlugin()], }; 图片压缩 loader url-loader:css内联图片小于尺寸图片转为base64编码 module: { rules: [{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10, // 小于10KB图片，转base64编码 } }]}file-loader + image-webpack-loader: import/require到.js或.html中require(图片路径)的图 rules: [{ test: /\.png$/i, // 以png为例 use: [ 'file-loader', { loader: 'image-webpack-loader', options: { pngquant: { quality: [0.65, 0.90] // 设置png的品质区间 }, } }, ], }] tree sharking -js代码的精简基于ES6的静态模块结构，删除无用代码 实现原理 1.收集模块导出变量记录到模块依赖关系图中 2.遍历关系图标记(启动标记:optimization:usedExports)模块导出变量中没有被使用的 3.生成产物时，如果没有被使用的就删除对应的导出语句。 4.进行tree sharking，删除不可能被执行的代码（DeadCode） 分包按需加载import()引入的路由，路由懒加载 浏览器渲染优化 web worker渲染线程和JS引擎是互斥的，所以对于一些计算密集型或高延迟的任务可能会阻塞页面的渲染 Web Worker 为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。 GPU加速当页面有一些复杂动画时，动画很卡的时候，可以将动画元素生成独立的图层，强制开启GPU加速，跳过布局和绘制阶段，新建图层交给GPU渲染。 GPU加速的本质是减少浏览器渲染页面每一帧过程中的回流和重绘。 开启GPU加速的方法 transformopacitywill-change |
总阻塞时间:阻塞主线程并影响页面可用性的时间，比如异步任务过长导致阻塞主线程渲染(JS线程和渲染线程冲突)
【本文地址】
今日新闻 |
推荐新闻 |