前端面试题汇总之常见性能优化

常见性能优化

1、构建工具带来的

前置css，后置js，防止js加载，运行阻塞页面渲染

将小图达成base64，减少资源请求。[file-loader,url-loader,...]

压缩精简html，css和js，减小打包体积。[uglifyjs,OptimizeCssAssetsPlugin,...]

Gzip压缩打包后的文件，该功能需要服务器支持才能正常显示页面

css预处理器，开启css编程之路

2、浏览器相关

使用CDN分发网络，请求资源更快

减少HTTP请求次数，减少DNS查询次数(尽量减少主机名)，避免重定向

DNS预获取link标签ref='dns-prefetch'herf=''

使AJAX可缓存：get请求可在客户端缓存;post请求不能再客户端缓存，但是服务端可以缓存数据(redis，memorycache等)，提高请求速度。

减少DOM数量

避免重排和重绘:减少DOM操作，动画优先使用opacity，transform属性;

合并DOM的读写操作，如使用document.createDocumentFragment();

使用特殊的函数，优化条件渲染：window.requestAnimationFrame()，window.requestIdleCallback()

时间分片函数，使用requestAnimationFrame和createDocumentFragment

3、js相关

使用 JavaScript CacheAPI，我们可以使用serviceworker。

延迟不必要的JS首屏加载defer,aysc,动态添加script节点

删除未使用的 JavaScript和合并重复的代码减少编译时间(JIT)

避免内存泄漏意外的全局变量;没有销毁的计时器;已经删除的DOM还是被引用，(删除DOM后将变量设值为null可以避免这个问题)

避免使用全局变量&优先使用局部变量，作用域链查找更快

使用Webworkers处理需要大量执行时间的代码(子线程)

合理使用事件代理。合并类似的操作，节约内存空间，减少DOM操作

使用高级函数等，例如addEvent的兼容惰性加载函数;map的性能高于forEach

4、css相关

避免使用css表达式

使用csssprite雪碧图，减少图片请求

在不影响画质的情况下，使用合理的图片格式和压缩图片，优先使用JPG格式，如果能用css3实现动画，则尽量不使用GIF。如果能使用canvas或SVG实现，则尽量不使用图片

5、Vue相关

在vue2.0中不在data上使用嵌套多层的对象，或使用Object.freeze冻结对象。vue3中使用了lazyreactive不用担心这个。

异步加载路由，减少体积

通过使用require.context。自动生成路由

//../components/test目录下的vue文件

let_req=require.context('../components/test',true,/\.vue$/)letroutes=[]

_req.keys().map(name=>{

constnameArr=name.split('.')//模块的export.defalut

constcomp=_req(name).defaultroutes.push({path:`/test${nameArr[1]}`,component:comp,title:comp.name})});

exportdefaultroutes

通过$store.registerModule动态注册状态树，减小打包体积。(混入beforeCreate，异步加载store的模块)

Vue.mixin({

beforeCreate:function(){

if(this.$options[config.dynamicVuex]){

letname=config.moduleName||this.$options.nameconsole.log('name=',ame)import(`./store/module/${name}.store.js`).

then(module=>

{//orrequire.ensuret

his.$store.registerModule(name,module.default)

})

}

}})

6、React相关

更合理的传递state和props:

在构造函数里使用bind;

尽量不使用内联的对象;

不传递不必要的属性

合理使用shouldComponentUpdate生命钩子和继承PureComponent组件