首先,我们先来了解前端出现性能问题可能有哪些层面的原因:
哪些层面:网络传输层面,前端渲染机制层面,js代码执行层面,部署层面,产品设计层面,前端缓存机制层面,功能实现方式层面。
解决方法:
1、减少http请求次数,资源压缩合并(小图标使用雪碧图,js、css源码压缩,网页Gzip).;
2.非核心代码异步加载(延伸:什么是异步加载?);
3.利用浏览器缓存(延伸:浏览器缓存分类,浏览器缓存机制与原理);
4.使用CDN(内容分发网络,延伸:什么是CDN)。
5.预解析DNS.
6.避免频繁操作dom节点,可用innerHTML代替dom操作。
7.设置样式的时候避免直接操作样式style,尽量操作calssName。
8.对图片采取预加载,将样式表放在顶部,将脚本放在底部,加上时间戳。