wordpress网站做成小程序,wordpress微信风格主题,自学设计的网站有哪些,湖南专业建站按效果付贿结合lighthouse查看各项数据#xff0c;不断进行性能优化#xff0c;可以从代码、项目打包、项目部署这三个层面来优化
代码层面
1、v-if和v-show区分使用
v-if#xff08;惰性的#xff09;用的条件判断#xff0c;是惰性的#xff0c;false的话初始不会渲染#xf…结合lighthouse查看各项数据不断进行性能优化可以从代码、项目打包、项目部署这三个层面来优化
代码层面
1、v-if和v-show区分使用
v-if惰性的用的条件判断是惰性的false的话初始不会渲染适用于运行很少改变条件v-show不管是什么初始都会渲染用的display: none来控制隐藏适用于频繁切换条件的
2、computed、watch和methods区分使用 computed 一个数据受多个数据影响数据要经过开销很大的计算如遍历一个很大的数组并做大量计算可以用computed的缓存特性只有数据发生变化才会重新计算否则直接返回缓存 watch 一个数据影响多个数据的数据变化时需要执行异步或开销大的操作比如请求API methods 希望数据要实时更新不需要缓存
3、v-for避免同时使用v-if要知道优先级why
v-for优先级要比v-if高每次渲染都要先遍历进行条件判断增加了计算成本可以在computed提前把v-if的数据项给过滤掉
优先级whyvue在编译模板时会先检测模板中的指令将模板解析成AST再根据AST生成对应的render函数。它会先将v-for指令转换成一个生成Vnode的函数并生成对应的Vnode数组再会根据v-if的条件来决定是否渲染每个Vnode
4、v-for循环添加key会问 什么是diffwhy提高速度
设置唯一的key能精确找到该数据数据改变时能较快定位到diff
diff算法目的是找出差异最小化更新视图发生在视图更新阶段当数据发生变化的时候diff就对比新旧虚拟DOM只渲染有变化的部分。 1.对比是不是同类型标签不是同类型直接替换 2.是同类型标签就执行patchVnode方法判断新旧vnode是否相等 3.相等就直接返回不相等就要对比新旧节点对比原则以新节点为主主要分为以下几种 newVnode和oldeVnode都有文本节点就用新节点换旧节点new有子节点old没有就增new的子节点new没有子节点old有则删都有子节点则通过updateChildren对比子节点
why提高速度
添加唯一key让diff准确识别每个节点在列表更新时可以准确判断出哪些节点被添加、删除、移动有key就可以通过map直接获得值得对比的旧节点的下标如果没有key就要通过循环旧节点数组用sameVnode去判断新节点和旧节点是否值得比较值得才返回旧节点下标很显然map查找要比循环数组快
5、用Object.freeze()冻结不需要响应式变化的数据
vue初始化时会对数据进行劫持将数据都转换成响应式的但有的时候只是想单纯展示数据就可以跳过数据劫持大大提高初次渲染速度。
可以通过Object.freeze()将data某些数据冻结也就是configurable设置为false在defineReactive中会检测某个key对应的configurable是否为false是则直接返回不是就继续配置getter/setter。 export default {data: () ({users: {}}),async created() {const users await axios.get(/api/users);this.users Object.freeze(users);}};其他使用场景固定配置信息、常量数据枚举值或数据字典PS冻结后的对象是不可变的无法添加新的属性、删除属性也无法修改值。要想解除对象的冻结是不可能的因为Object.freeze是不可逆操作想要修改对象就只能重新创建一个新对象
6、防抖和节流
防抖和节流是针对用户操作的优化
防抖就是在一段时间内只执行最后一次主要用在搜索框实时搜索、输入验证、窗口大小调整。节流是在规定的时间内只执行一次主要用在页面滚动加载、高频点击提交、表单重复提交。
可以自己手写实现防抖节流一定要会 面试高频考点具体可以看这篇防抖与节流在vuecli脚手架中也可以引用Lodash库里的防抖节流函数
7、利用keep-alive缓存
缓存常见的组件tab页、导航栏避免在切换路由时重复渲染相同的组件提高性能和用户体验
8、图片懒加载、压缩、雪碧图
8.1 图片懒加载
未出现在可视区域内的图片先不加载等滚动到可视范围再加载实现方法主要有以下三种 IntersectionObserver专门来检测某个元素是否出现在可视窗口出现后就设置src再取消监听。可以将逻辑封装成可重用的指令在懒加载的图片元素上使用该指令即可 移动端可以直接在img标签添加loading“lazy”属性浏览器自动处理图片的懒加载 vue中可以安装插件vue-lazyload通过v-lazy写到对应的元素实现 插件是在main.js中引入的不会被webpack编译直接写相对地址是获取不到图片正确地址的 设置了翻页功能且每页都是请求的数据进行渲染的发现其他数据都会变但是图片不变解决办法就在后面加个key就行 img v-lazyimg.src :keyimg.src IntersectionObserver浏览器提供的API实现图片懒加载原理观察图片与视窗的交叉情况从而判断是否出现在视窗中。实现图片懒加载步骤大概
创建一个观察器对象指定要观察的图片 以及 触发交叉状态变化时的回调函数在函数中判断是否进入视窗内部进入的话就触发回调函数执行图片加载操作把真实地址赋给src再停止监听 !-- HTML --img classlazy-load data-srclazy-image.jpg altLazy-loaded imagescript// JavaScript// 创建 IntersectionObserver 对象const observer new IntersectionObserver((entries, observer) {entries.forEach(entry {if (entry.isIntersecting) { // 判断目标元素是否进入视窗内const lazyImage entry.target;lazyImage.src lazyImage.dataset.src; // 将真实图片地址赋给src属性observer.unobserve(lazyImage); // 停止观察该目标元素}});});// 获取所有带有 lazy-load 类的图片元素const lazyImages document.querySelectorAll(.lazy-load);// 遍历所有图片元素开始观察lazyImages.forEach(image {observer.observe(image);});/script8.2 图片压缩
可以在webpack.base.conf.js中url-loader设置limit大小来处理图片小于limit的图片转换成base64格式
将图片转成base64格式的原因
减少HTTP请求转成base64后可以直接包含在HTML、CSS或JS文件中而不用单独的HTTP请求也就减少了服务器的负载增加缓存利用率图片已经在文件中可以利用浏览器的缓存机制避免重复加载相同的图片资源
对于一些较大的图片可以用image-webpack-loader压缩具体配置如下 module.exports {module: {rules: [{test: /.(png|jpg|gif)$/,use: [{loader: url-loader,options: {limit: 8192, // 图片小于8KB时转换为base64name: [name].[ext],outputPath: images/ // 输出到指定目录}},{loader: image-webpack-loader,options: {mozjpeg: {progressive: true,quality: 65},optipng: {enabled: false,},pngquant: {quality: [0.65, 0.90],speed: 4},gifsicle: {interlaced: false,},webp: {quality: 75}}}]}]}};8.3 雪碧图
针对多个小图标可以利用雪碧图技术将其合并成一张大图减少HTTP请求次数
把小图标准备好放在同一个文件夹下用webpack插件webpack-spritesmith将其合并成一张雪碧图可以设置每个图标的样式通过background-position来显示需要的图标
9、路由懒加载
路由被访问才加载对应的组件提高首屏显示速度 const Foo () import(./Foo.vue)10、第三方插件按需引入
用babel-plugin-component只引入需要的组件减小项目体积。安装包导入依赖即可在main.js按需引入组件
项目打包层面
1、提取公共代码
安装分析工具webpack-bundle-analyzer会生成可视化的文件链路图根据需求做调整。
用CommonsChunkPluginwebpack内置插件去提取多个chunk的公共部分。
2、减少ES6转换成ES5的冗余代码
babel在每个输出文件中内嵌依赖的辅助函数代码不让这些代码重复出现可以用babel-plugin-transform-runtime插件减小babel编译出来的代码大小。 安装包 修改.babelrc配置文件 plugins: [transform-runtime]3、压缩和合并JS、CSS文件
使用OptimizeCssnanoPlugin插件来压缩和去重css样式文件开启optimization.minimize来压缩js代码。
4、tree shaking
tree shaking只能处理ES6模块消除未使用过的代码减少文件大小。
使用生产模式在config.js设置mode: ‘production’来启用生产模式用usedExports: true来启用tree shaking
项目部署层面
1、开启gzip压缩
前后端都可以压缩不管在nginx还是webpack压缩在nginx都要开启gzip压缩要不然浏览器加载的还是未压缩的资源。
识别gzip压缩是否开启只需要看响应头部有没有Content-Encodinggzip这个属性有就表明开启了。
1在vue-cli初始化项目中默认有这个配置 先安装插件再在config/index.js文件开启即可 build: {// 其他代码…………productionGzip: true, // false不开启gizptrue开启// 其他代码}2利用插件compression-webpack-plugin来实现
用webpack会使打包时间变长但用这个插件会有缓存可以相对减少打包时间。
先安装好后在vue.config.js配置支持gzip // vue.config.js 配置开启gzipconst CompressionPlugin require(compression-webpack-plugin)configureWebpack: (config) {const plugins[new CompressionPlugin({algorithm: gzip,// 压缩格式test: new RegExp(.(${[js, css, json, html].join(|)})$),// 正则匹配文件后缀threshold: 1024 * 5,// 压缩阀值超过5KB时才压缩minRatio: 0.5//压缩比例缩小50%才采用})]return {plugins}}3在nginx上开启gzip
nginx压缩会占用服务器的CPU浏览器每次请求资源nginx都是实时压缩资源资源很大再加上压缩级别很高数字越大压缩后的大小就越小的话返回资源的时间就会很长。
一般是nginx和webpack都开启压缩并且在nginx加上gzip_static on配置 gzip_static启用后浏览器请求资源时nginx会先检查是否有该资源名称且后缀是.gz的文件是就直接返回该gz文件内容这样就可以避免nginx对该资源再进行压缩浪费服务器的CPU。
在nginx/conf/nginx.conf中配置 http {gzip on;gzip_min_length 1k;gzip_comp_level 5;gzip_types application/javascript image/png image/gif image/jpeg text/css text/plain;gzip_buffers 4 4k;gzip_http_version 1.1;gzip_vary on;}2、将静态资源部署到CDN上
大概的操作
选择合适的CDN提供商将静态资源上传到CDN中配置CDN域名将域名和上传的静态资源关联起来在前端代码中要把原来的链接换成CDN域名下的链接
提高访问速度的原因
就近访问CDN会在用户最近的节点上返回资源减少网络传输的时间分担服务器负载缓存机制CDN可以缓存静态资源的副本并行加载支持并行加载多个资源提高并发性和效率
3、设置合适的缓存策略cache-control
通过设置HTTP响应头中cache-control字段来控制缓存策略设置HTTP响应头expires字段表示资源的过期时间一般结合cache-control中的max-age使用但expires是绝对的日期时间max-age是相对于请求时间的秒数
静态资源img、CSS、JSmax-age和expires设置较长的缓存时间减少服务器负载加快页面加载速度动态信息用户、订单信息设置较短的max-age来实现及时更新 或 no-cache禁用缓存
项目附件点此下载
