Web培训
400-996-5531
2020年前端面试题汇总之常见性能优化
今天小编要跟大家分享的文章是关于2020年前端面试题汇总之常见性能优化。正在从事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不用担心这个。
异步加载路由，减少体积
通过使用require.context。自动生成路由
// ../components/test目录下的vue文件
let _req = require.context('../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组件
以上就是小编今天为大家分享的关于2020年前端面试题汇总之常见性能优化的文章，希望本篇文章能够对想要换工作的Web前端工程师们有所帮助，想要了解更多Web前端知识记得关注达内Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。
文章来源：原创 const弓长张 总在落幕后
【免责声明：本文图片及文字信息均由小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】
预约申请免费试听课
填写下面表单即可预约申请免费试听！ 怕学不会？助教全程陪读，随时解惑！担心就业？一地学习，可全国推荐就业！
Copyright © Tedu.cn All Rights Reserved 京ICP备08000853号-56 
京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有