Vue项目中的性能优化

Vue项目中的性能优化
Vue项目中的性能优化
前端优化
实现vue首屏加载优化的
DNS解析优化的方法？

Vue项目中的性能优化

1. 编码阶段

尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-if 和v-for区分使用场景，v-if和v-for不要连用；
v-for遍历必须为item添加key，key保证唯一性，且避免同时使用vif
computed和method区分使用场景
路由懒加载、图片懒加载、长列表动态加载
第三方模块按需导入
对于短时间的大量操作（缩放、滚动）使用防抖、节流函数
事件的销毁
SPA 页面采用keep-alive缓存组件
组件的延迟加载，可以把页面资源划分为多份，用到的时候才会按需加载，这样减少第一次加载的消耗。
代码精简，去除 console ，可复用的方法、组件提取出来
不要写行内样式，避免dom重绘

2. SEO优化

服务端渲染SSR
预渲染

3. 打包优化

压缩代码
Tree Shaking/Scope Hoisting
使用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化

Vue项目中的性能优化

1、代码层面的优化

v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
长列表性能优化，如果列表纯粹是数据展示，不会有任何改变，Object.freeze()、虚拟滚动vue-virtual-sroller
减少重绘重排
事件销毁
图片懒加载vue-lazyload
路由懒加载
第三方插件的按需引入
适当采用 keep-alive 缓存
防抖、节流运用
html、css、js优化

2、Webpack 层面的优化

小图转base64
压缩图片（image-webpack-loader）
减少 ES6 转为 ES5 的冗余代码
splitChunks 抽离公共文件
模板预编译
优化 SourceMap
构建结果输出分析： webpack-bundle-analyzer
Vue 项目的编译优化

3、基础的 Web 技术的优化

开启 gzip 压缩： Web 客户端可以通过 HTTP 请求中的 Accept-Encoding 头来标识对压缩的支持
浏览器缓存（强缓存、协商缓存）
静态资源使用 CDN （CDN主要功能是在不同的地点缓存内容，通过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容）
减少 HTTP 请求数
压缩 JavaScript 和 CSS
后台分布式部署，负载均衡
服务端渲染 SSR
预渲染 prerender-spa-plugin

4、非框架代码优化

减少重绘、重排
将 CSS 放在页面顶部，将 JavaScript 放在页面底部
减少 DNS 查询

HTML性能优化

1. HTML标签有始终。减少浏览器的判断时间
1. 把script标签移到HTML文件末尾，因为JS会阻塞后面的页面的显示。
1. 减少iframe的使用，因为iframe会增加一条http请求，阻止页面加载，即使内容为空，加载也需要时间
1. id和class，简化命名，在含有关键字的连接词中连接符号用’-‘，不要用’_’
1. 保持统一大小写，统一大小写有利于浏览器缓存，虽然浏览器不区分大小写，但是w3c标准为小写
1. 清除空格，虽然空格有助于我们查看代码，但是每个空格相当于一个字符，空格越多，页面体积越大，像google、baidu等搜索引擎的首页去掉了所有可以去掉的空格、回车等字符，这样可以加快web页面的传输。可以借助于DW软件进行批量删除 html内标签之间空格，sublime text中ctrl+a，然后长按shift+tab全部左对齐，清除行开头的空格
1. 减少不必要的嵌套，尽量扁平化，因为当浏览器编译器遇到一个标签时就开始寻找它的结束标签，直到它匹配上才能显示它的内容，所以当嵌套很多时打开页面就会特别慢。
1. 减少注释，因为过多注释不光占用空间，如果里面有大量关键词会影响搜索引擎的搜索
1. 使用css+div代替table布局，去掉格式化控制标签如：strong，b，i等，使用css控制
10.代码要结构化、语义化
11.css和javascript尽量全部分离到单独的文件中

css性能优化

1. 多利用继承，多个子元素公用的样式，如果该样式能继承的话就写在父元素身上
1. 尽量减少重绘重排的次数
1. 选择器命名规范，通过id寻找更快
1. 动画区域开启独立的图层
- 1）定位： position: absolute/relative
- 2） Will-change: xxx;
1. 合并、压缩你的css文件，减少http请求，可以借助工具或者自动化构建。
1. 使用CSS sprite来处理你的图片

JS性能优化

\1. 合并压缩js
\2. 减少对DOM的操作，避免重绘重排
\3. 减少请求的个数，节省网络资源
\4. 封装功能函数实现复用
\5. 循环语句中避免定义变量
\6. 慎用闭包
\7. 函数节流，函数防抖

HTML性能优化

\1. HTML标签有始终。减少浏览器的判断时间
\2. 把script标签移到HTML文件末尾，因为JS会阻塞后面的页面的显示。
\3. 减少iframe的使用，因为iframe会增加一条http请求，阻止页面加载，即使内容为空，加载也需要时间
\4. id和class，在能看明白的基础上，简化命名，在含有关键字的连接词中连接符号用’-‘，不要用’_’
\5. 保持统一大小写，统一大小写有利于浏览器缓存，虽然浏览器不区分大小写，但是w3c标准为小写
\6. 清除空格，虽然空格有助于我们查看代码，但是每个空格相当于一个字符，空格越多，页面体积越大，像google、baidu等搜索引擎的首页去掉了所有可以去掉的空格、回车等字符，这样可以加快web页面的传输。可以借助于DW软件进行批量删除 html内标签之间空格，sublime text中ctrl+a，然后长按shift+tab全部左对齐，清除行开头的空格
\7. 减少不必要的嵌套，尽量扁平化，因为当浏览器编译器遇到一个标签时就开始寻找它的结束标签，直到它匹配上才能显示它的内容，所以当嵌套很多时打开页面就会特别慢。
\8. 减少注释，因为过多注释不光占用空间，如果里面有大量关键词会影响搜索引擎的搜索
\9. 使用css+div代替table布局，去掉格式化控制标签如：strong，b，i等，使用css控制
\10. 代码要结构化、语义化
\11. css和javascript尽量全部分离到单独的文件中

css性能优化

\1. 多利用继承，多个子元素公用的样式，如果该样式能继承的话就写在父元素身上
\2. 尽量减少重绘重排的次数
\3. 选择器命名规范，通过id寻找更快
\4. 动画区域开启独立的图层
- 1）定位： position: absolute/relative
- 2） Will-change: xxx;
\5. 合并、压缩你的css文件，减少http请求，可以借助工具或者自动化构建。
\6. 使用CSS sprite来处理你的图片

JS性能优化

1. 合并压缩js
1. 减少对DOM的操作，避免重绘重排
1. 减少请求的个数，节省网络资源
1. 封装功能函数实现复用
1. 循环语句中避免定义变量
1. 慎用闭包
1. 函数节流，函数防抖

前端优化

一、加载优化（减少http请求数）

合并图片：当图片较多时，像精灵图，雪碧图可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。
合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。
UI库按需加载
路由组件懒加载
去掉不必要的请求，开发写代码或者系统升级之后残留的无效请求连接。
首屏加载：首屏快速显示可大大的提升用户对页面速度的感知，应尽量针对首屏的快速显示做出相应的优化。
充分利用缓存：来减少向服务器发送的请求数，节省网络资源，所有静态资源都要放在服务器端并设置缓存，并且要尽量使用长缓存。
预加载：大型资源页面可使用Loading，资源加载完成后再显示页面，但是加载时间过长，会造成负体验。
异步加载第三方资源：第三方资源不可控，会影响页面加载，所以要异步加载第三方资源。

二、图片优化

尽可能的使用PNG格式的图片，它相对来说体积较小，可以使用工具压缩，在上线之前最好进行一定的优化。
图片懒加载图片的延迟加载
避免img、iframe等标签的src属性为空：空src会重新加载当前页面，影响速度和效率。
图像尽量避免使用DataURL：DataURL图像没有使用图像压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长。

三、使用CDN

CDN：实现把内容从中心媒体服务器分发到边缘服务器的网络体系即内容分发网络，CDN具有更低的网络延迟和丢包率，能够分配负载，节省带宽提高网站的性能，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

如果安全性对你的网站很重要，就不要使用公共的CDN，因为当你远程从CDN请求文件时，你的访问来源信息也被发送过去，一些远程的js文件可能被修改用来搜集你的用户或者系统信息，而当你使用https协议时，能选择的CDN就更加有限。

四、开启Gzip（代码压缩）

Gzip即数据压缩，前端生产环境中将js、css、图片等文件进行压缩，通过减少数据传输量减小传输时间，节省服务器网络带宽，提高前端性能。

压缩时间、流程、说明

五、样式表和JS文件的优化

头部内联的样式和脚本会阻塞页面的渲染，一般我们会把css样式表文件放到文件的头部使用link引入，这样可以让CSS样式表尽早地完成下载。
对应js脚本文件，一般我们把脚本放在尾部并使用异步方式加载，这样可以尽最大限度的减少样式和脚本对页面的阻塞。

六、减少不必要的Cookie

Cookie存储在客户端，伴随着HTTP请求在浏览器和服务器之间传递，由于cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器，从而会影响加载速度，所以尽量减少不必要的Cookie。

七、脚本优化

复杂动画效果，使用绝对定位让其脱离文档流，避免循环DOM元素，用transform:translate 代替 position left、right…以此来尽量减少回流和重绘。
将脚本往后挪，减少对并发下载的影响。
缓存.length的值：每次.length计算使用一个变量保存值。
尽量使用事件委托：不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点，避免批量绑定事件以此来减少内存消耗和DOM操作。
尽量使用id选择器：id选择器选择元素是最快的，具有唯一性，灵活性和优先性的优点。

八、前端代码结构的优化

设置Viewport设：HTML的viewport可加快页面的渲染。
减设少DOM结点设：DOM结点太多会影响页面的渲染。
设尽量使用css3动画设：合理使用requestAnimationFrame动画代替setTimeout。
设优化高频事件设：scroll、touchmove等事件尽量使用函数防抖节流等进行限制。
设不滥用WEB字体设：WEB字体需要下载、解析、重绘当前页面，尽量减少使用。
设文件命名规则须统一且要有意义设，同类型文件归类到相同的文件夹中。

九、SEO优化

标题：标题字数不要太长，一般写核心的关键词和网站主题相关的内容。
描述：描述是整个页面的综合说明，作用和重要性仅次于标题，描述最好能得吸引人一点，带上自己公司的品牌词和电话，并包括目标关键词。
关键词：对关键词进行优化，能够让用户在搜索关键词的时候，能够准确的定位到自己要搜索的内容和网站，能够让网站被更多有需要的人看到。
网站代码：网站代码尽量精简，节约百度蜘蛛的时候，这一点针对大型网站特别重要。

实现vue首屏加载优化的

把不常改变的库放到index.html中，通过cdn引入
减小入口文件体积：路由懒加载
静态资源本地缓存：前端合理利用localStorage
UI框架按需加载
图片资源的压缩：在线字体图标、雪碧图
使用轻量级的工具库

组件重复打包: 配置CommonsChunkPlugin

// 假设moment.js文件是一个常用的库，现在很多文件都使用了该文件，这就造成了重复加载
// 解决方案： 在webpack的config文件中，修改CommonsChunkPlugin的配置。
minChunks: 3 //把使用3次及以上的包抽离出来 放进公告依赖文件,避免了重复加载

开启GZip压缩：compression-webpack-plugin插件

nmp i compression-webpack-plugin -D //安装 compression-webpack-plugin 

// 并在vue.config.js 中引入并修改webpack配置 在服务器上我们也要做相应的配置。
const CompressionPlugin = require('compression-webpack-plugin') 
configureWebpack: (config) => {
      
      
        if (process.env.NODE_ENV === 'production') {
      
      
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
      
      
                plugins: [new CompressionPlugin({
      
      
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
      }
}

使用SSR( 服务端渲染)：组件或页面通过服务器生成html字符串，再发送到浏览器(Vue建议使用nuxt.js)实现服务端渲染。

DNS解析优化的方法？

DNS全称为Domain Name System，即域名系统，是域名和IP地址相互映射的一个分布式数据库。

浏览器对网站第一次的域名DNS解析查找流程依次为：

浏览器缓存 - 系统缓存 - 路由器缓存 - ISP DNS缓存 - 递归搜索

1.减少DNS的请求查询次数（前端）

DNS查询也消耗响应时间，若网页内容来自各个不同的domain，则客户端首次解析这些domain需要消耗一定的时间，但由于DNS查询结果会缓存在本地系统和浏览器中一段时间，所以DNS查询一般只是对首次访问时的速度有影响

2.进行DNS预获取：DNS Prefetch（前端）

DNS-prefetch（DNS预获取）是尝试在请求资源之前解析域名，这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。域名解析和内容载入时串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。
DNS-prefetch可以帮助开发人员掩盖DNS解析延迟。HTML的link元素通过dns-prefetch的rel属性值提供此功能，然后再href属性中指要跨域的域名。

如何设置dns-prefetch？

设置X-DNS_prefetch-Control: on|off

on：启用DNS预解析。在浏览器支持DNS预解析的特性时及时不适用该标签浏览器依然会进行预解析。
off：关闭DNS预解析。这个属性在页面上的链接并不是由你控制的或是你根本不想向这些域名引导数据时非常有用

3.延长DNS缓存时间（运维）

DNS查询过程大约消耗20毫秒，在DNS查询过程中，浏览器什么都不会做，保持空白。如果DNS查询很多，网页性能会受到很大影响，因此需要用到DNS缓存。

不同浏览器的缓存机制不同： IE对DNS记录默认的缓存时间为30分钟，Firefox对DNS记录默认的缓存时间为1分钟，Chrome对DNS记录默认的缓存时间为1分钟。

缓存时间长：减少DNS的重复查找，节省时间。

缓存时间短：及时检测服务器的IP变化，保证访问的正确性。