总结前端性能优化的方法

前端里面包含的内容是丰富的，它包括HTML，CSS以及JS和图片等各类各样的资源。所以前端优化是复杂的和必要的，接下来在文章中为你们介绍前端性能优化的方法。本文在github会进行更新。

优化的目的

优化的目的在于让页面加载的更快，对用户操做响应更及时，为用户带来更好的用户体验，对于开发者来讲优化可以减小页面请求数，可以节省资源。

网络优化

1. 减小 http 请求数，css，js, image 等文件压缩合并，合理设置 http 请求缓存。
2. 样式放头部，脚本放底部。
3. 使用 CDN。
4. 按需加载，显示进度条或者 loading

css优化

1. 避免使用 CSS 表达式
2. 尽量减小CSS选择器的层级
3. 减小 TABLE 布局
4. 移除空的样式
5. 图片在加载前提早指定宽高或者脱离文档流，可避免加载后的从新计算致使的页面回流；

JS优化

1. 减小闭包的使用。过多使用闭包会产生不少不销毁的内存，内存过多会致使内存溢出。
2. 避免使用iframe, iframe 会嵌入其它页面，父页面渲染的时候，同时渲染子页面，渲染进度会变慢。
3. 减小 dom 操做，减小页面重绘和重排。使用 css3 动画
4. 尽量使用事件委托。事件委托能够给动态元素绑定事件，并且基于事件委托实现，总体性能会比一个一个绑定事件高50%。
5. 注意防抖和节流

图片优化：

1. 不用图片，尽可能用 css3 代替。 好比说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中均可以用 CSS 达成。
2. 使用矢量图 SVG 替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。如今主流浏览器都支持 SVG 了，因此可放心使用！
3. 使用恰当的图片格式。咱们常见的图片格式有 JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于 JPEG。而修饰图片一般更适合用无损压缩的 PNG。GIF 基本上除了 GIF 动画外不要使用。且动画的话，也更建议用 video 元素和视频格式，或用 SVG 动画取代。
4. 按照 HTTP 协议设置合理的缓存。
5. 使用字体图标 webfont、CSS Sprites 等。
6. 用 CSS 或 JavaScript 实现预加载。WebP 图片格式能给前端带来的优化。
7. WebP 支持无损、有损压缩，动态、静态图片，压缩比率优于 GIF、JPEG、JPEG2000、PG 等格式，很是适合用于网络等图片传输。

图片懒加载与预加载

图片懒加载的原理就是暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，好比先写在 data-src 里面，等某些事件触发的时候(好比滚动到底部，点击加载图片)再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载

图片预加载，是指在一些须要展现大量图片的网站，实现图片的提早加载。从而提高用户体验。经常使用的方式有两种，一种是隐藏在 css 的 background 的 url 属性里面，一种是经过 javascript 的 Image 对象设置实例对象的 src 属性实现图片的预加载。相关代码以下：

为何要将图片转为base64格式

图片的 base64 编码就是能够将一副图片数据编码成一串字符串，使用该字符串代替图像地址;

1. 提高性能: 网页上的每个图片，都是须要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64能够随着 HTML 的下载同时下载到本地.减小https请求。

2. 加密: 让用户一眼看不出图片内容 , 只能看到编码。

3. 方便引用: 在多个文件同时使用某些图片时, 能够把图片转为base64格式的文件, 把样式放在全局中, 好比common.css, 之后在用的时候就能够直接加类名, 二不须要多层找文件路径, 会提高效率

相关文章

搭建一个vue-cli的移动端H5开发模板

封装一个toast和dialog组件并发布到npm

从零开始构建一个webpack项目

总结几个webpack打包优化的方法

一文读尽前端路由、后端路由、单页面应用、多页面应用

从一道面试题中总结JS做用域，this 指向和箭头函数

关于几个移动端软键盘的坑及其解决方案

浅谈JavaScript的防抖与节流

浅谈JavaScript的 深拷贝和浅拷贝