更多课程 选择中心

Web培训
达内IT学院

400-111-8989

Web培训

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

  • 发布:Web前端培训
  • 来源:web前端面试
  • 时间:2020-11-24 17:31

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

2020年前端面试题汇总

常见性能优化

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弓长张 总在落幕后

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:2020年前端面试题汇总之Webpack
下一篇:2020年前端面试题汇总之算法和应用

Web前端面试前需要做的面试准备有哪些

2020年前端面试题汇总之概念

2020年前端面试题汇总之算法和应用

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

  • 关注微信公众号

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

  • 视频学习QQ群

    添加QQ群:1143617948

    免费领取达内课程视频学习资料

Copyright © 2018 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省