前端性能优化

1什么是内存泄漏，什么原因造成的

当程序中动态分布的堆内存没有释放或者无法释放时。

这和js的垃圾回收机制有关，当内存中引用次数为0时内存才会释放，

全局执行的上下文中的标记为不会引用才会被回收

（比如说，定时器未清理， $闭包$ 当函数内部引用了外部函数的变量，并且该函数在外部函数执行后仍然存在，就会导致引用的变量无法被垃圾回收，do / while 死循环， $未释放资源$ 例如，使用 XMLHttpRequest 发送请求时，如果没有正确处理和释放资源，可能会导致内存泄漏。确保在请求完成后正确关闭或释放资源，全局变量为未定义的或者胡乱定义引用了全局变量，监听事件没移除

）

2使用webpack进行优化

指的是优化webpack输出结果，让其打包的程序在浏览器上更高效的运行

①压缩代码：算除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件，利用cssnano（css-loader?minimize）来压缩css

②利用CDN加速: 在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径

③Tree Shaking: 将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现

④Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利用浏览器缓存

⑤提取公共第三方库: SplitChunksPlugin插件来进行公共模块抽取,利用浏览器缓存可以长期缓存这些无需频繁变动的公共代码

3常规的性能优化手段：

content方面

减少http请求：合并文件，css精灵，inline image

减少dns查询

避免重定向

使用ajax缓存

非必要组件延迟加载

未来所需的组件预加载

减少dom数量

资源放于不同域下

减少ifarme数量

等等...

4css优化

避免过度约束

避免后代选择符

避免链式选择符

使用紧凑的语法

避免不必要的命名空间

避免不必要的重复

最好使用表示语义的名字。

一个好的类名应该是描述他是什么而不是像什么

避免！important，可以选择其他选择器

尽可能的精简规则，你可以合并不同类里的重复规则

4.spa首屏加载速度

资源加载优化和页面渲染优化

减小入口文件积--路由懒加载使用动态加载路由的形式
静态资源本地缓存--后端使用http缓存和service worker前端合理利用localstorage
UI框架按需加载
图片资源的压缩--对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力
组件重复打包--使用webpack修改配置文件minChunks: 3抽离
开启GZip压缩

拆完包之后，我们再用`gzip`做一下压缩安装`compression-webpack-plugin`

`cnmp i compression-webpack-plugin -D`

在`vue.congig.js`中引入并修改`webpack`配置

javascript 复制代码

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 //是否删除原文件
                })]
            }
        }

在服务器我们也要做相应的配置如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件我的服务器是用express框架搭建的只要安装一下compression就能使用

javascript 复制代码

const compression = require('compression')
app.use(compression())  // 在其他中间件使用之前调用

使用SSR

SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器

从头搭建一个服务端渲染是很复杂的，`vue`应用建议使用`Nuxt.js`实现服务端渲染