今天小编要跟大家分享的文章是关于前端面试题汇总之常见性能优化。正在从事Web前端工作和想要换工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。

常见性能优化

2.1 构建工具带来的

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

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

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

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

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

2.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

2.3 js相关

使用 JavaScript Cache API，我们可以使用 service worker。

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

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

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

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

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

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

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

2.4 css相关

避免使用css表达式

使用css sprite 雪碧图，减少图片请求

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

2.5 Vue相关

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

异步加载路由，减少体积

通过使用*ntext。自动生成路由

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

let _req = *ntext('../components/test', true, /\.vue$/)let routes = []

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

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

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

export default routes

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

Vue.mixin({

beforeCreate: function() {

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

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

then(module =>

{ // or require.ensure t

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

})

}

}})

2.6 React相关

更合理的传递state和props:

在构造函数里使用bind;

尽量不使用内联的对象;

不传递不必要的属性

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

以上就是小编今天为大家分享的关于前端面试题汇总之常见性能优化的文章，希望本篇文章能够对想要换工作的Web前端工程师们有所帮助，想要了解更多Web前端知识记得关注Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。

文章来源：原创 const弓长张 总在落幕后

教学大纲紧跟企业需求，项目带动理论，渗透式教学，一线城市讲师直派授课，坚持100%全程面授的高成本人才培养模式，在企业与学员中有口皆碑，千锋积极响应习*总书记在党的十九大报告中提出的“完善职业教育和培训体系，深化产教融合、校企合作”的号召，并加入“2017年教育部产学合作协同育人项目”，坚持产、学、研、创相结合的方式，利用自身优势，联合企业与高校，加大IT职业人才培养力度。千锋教育在“未来新兴产业和新经济需要的是工程实践能力强、创新能力强、具备国际竞争力的新工科人才，新经济需要新工科，高校和职业教育急需提升人才的软件工程化实践能力，”的指导下，千锋加强校企合作力度，通过与高校共建实验室、提供师资培训、加大课程研发与企业需求结合力度等方式，积极参与“新工科”人才培养。