随着近几年前端的迅猛发展, 人们越来越把目光放在了前端性能优化上. 下面我们来谈谈我所知道的前端性能优化方式:
请看大图
了解每个优化的点, 对我们的项目帮助是非常的巨大的, 我将挑上面几点谈谈优化的过程.
1. 页面常用优化
1-1. 减少 HTTP 请求数
图片合并 CSS Sprite, 常用工具 (webpack,gulp) 打包将 js,css 合并到一个文件, 行内图片 (Base64 编码) 图片转化等等
svg 转化网站 链接标题 https://github.com/xiaoyu2er/blog/issues/8
webpack 图片合并 链接标题 https://github.com/xiaoyu2er/blog/issues/8
1-2. 延迟加载 js
js 文件全部放 body 底部(常用)
另外一种是
- <script type="text/javascript">
- function downloadJSAtOnload() {
- var element = document.createElement("script");
- element.src = "defer.js";
- document.body.appendChild(element);
- }
- if (window.addEventListener)
- window.addEventListener("load", downloadJSAtOnload, false);
- else if (window.attachEvent)
- window.attachEvent("onload", downloadJSAtOnload);
- else window.onload = downloadJSAtOnload;
- </script>
setTimeout 延时加载(常用)
defer 和 async(详情: 链接标题 https://github.com/xiaoyu2er/blog/issues/8 )
1-3. 资源预加载
当你加载完当前页的资源的时候, 你可以考虑加载待会你要用到的资源. 比如 Chrome 首页会加载一个图片, 但它当前页用不到, 是为了搜索结果用的. 又或者我们常见的一些网页步骤, 在第一步交互的时候, 把后面的步骤用到的资源先加载完.
1-4. 按需加载
vue 异步组件技术(详细: 链接标题 https://github.com/xiaoyu2er/blog/issues/8 )
- {
- path: '/promisedemo',
- name: 'PromiseDemo',
- component: resolve => require(['../components/PromiseDemo'], resolve)
- }
- (原理: 链接标题 https://github.com/xiaoyu2er/blog/issues/8 )
2.CSS 优化
2-1. 尽量减少标签选择器的使用
如: div {font-size: 14px;}
2-2. 尽可能少用 ID 标签, 多使用样式类选择器(可复用性强)
如: #id {font-size: 14px;}
2-3. 尽量使用 CSS3 动画, CSS 动画都开启了硬件加速
链接标题 https://www.jianshu.com/p/f8b1d6e598db
3.JavaScript 优化
3-1. 加载资源优化
静态资源的压缩合并, 如 a.js,b.js,c.js 通过一些工具合并成一个 js 文件
3-2.CDN 加速
如:
总结:
前端性能优化是一个比较多且细的领域, 深入了解每一个点对我们来说都是非常重要的, 当前文章写的比较少, 后续会不断的补充深入各种优化的场景.(敬请期待~)
来源: http://www.qdfuns.com/article/16817/2d61e40f1506da17d10a83c2e8d2ef7b.html