分享Web前端开发常见性能优化面试题_惠州前端培训学校

下面惠州北大青鸟老师给大家分享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组件

想学前端，联系在线客服，或者可以来惠州北大青鸟新方舟校区详细了解。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟