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`实现服务端渲染