这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战
一个优秀的前端开发工程师，优化是必不可少的工作，今天就总结一下关于性能优化的一些问题。
影响前端性能的有图像，样式表，脚本，flash等，减少组件的数量，减少所需的HTTP请求的数量，即可加快页面的速度。
Web前端优化的本质
一、减少过多的HTTP外部请求
二、在恰当的位置使用CSS
三、优化代码
性能优化必知的点
HTML渲染过程：
顺序执行（词法分析），并发加载，是否阻塞，依赖关系，引入方式。
css阻塞：
css head中阻塞页面的渲染，css阻塞js的执行，css不阻塞外部脚本的加载。
js阻塞：
引入js阻塞页面的渲染，js不阻塞资源的加载，js顺序执行，阻塞后续js逻辑的执行。
图片格式：
-
PNG格式适合对透明度有要求的情形，PNG-8处理不了复杂色域下的渐变，PNG-24可以几乎不失真地保留渐变
-
jpg有损压缩，压缩率高，不支持透明，png支持透明，浏览器兼容好，webp压缩程度更好，在ios webview有兼容性问题，svg矢量图，代码内嵌，相对较小。
jpg使用场景，用在不需要透明图片，png使用场景，用在需要透明图片的场景，webp用在安卓，svg矢量图用在图片样式相对简单的业务。
-
webp使用在安卓下，它具更好的图像数据压缩算法，和无损和有损的压缩模式，alpha透明，动画的特性。
HTML/CSS优化
-
css写在头部，JavaScript写在尾部；
-
避免图片和Frame等的空Src，尽量避免重设置图片大小，图片尽量避免使用DataURL
-
尽量避免写在HTML标签中写style属性，避免css的表达式，移除空的css规则
-
正确使用display的属性，不滥用float，不滥用web字体
-
不滥用过多的Font-size，值为0时不需要任何单位
-
标准化各种浏览器前缀，避免让选择符看起来像正则表达式。
-
使用css3，svg，iconfont代替图片，使用srcset，web优与jpg，png8优于gif，首次加载不大于1014kb，图片不宽于640。
JS 优化
-
减少dom节点，尽量使用css3动画，合理使用requestAnimationFrame动画代替setTimeout
-
适当使用Canvas动画
-
Touchmove，Scroll事件会导致多次渲染，使用CSS3 transitions，CSS3 3d，transforms，Opacity，Canvas等来触发GPU渲染。
-
减少重绘和回流，缓存dom选择与计算，缓存列表length，尽量使用事件代理，避免批量绑定事件，尽量使用id选择器，使用touchstart，touchend代替click。
资源的合并与压缩
合并文件是一种通过将所有脚本合并为一个脚本，类似将所有css合并为一个样式表来减少HTTP请求数量的方法。
原理：减少我们的HTTP请求的数量，以及减少请求的资源大小
（1）减少资源体积，gzip压缩，js混淆，css压缩，图片压缩。
减少HTTP请求的数量即为合并，减少HTTP请求的大小即为压缩。可以对HTML进行压缩，css进行压缩，js进行压缩和混乱，文件合并，开启gzip等。
HTML 压缩：
-
在线压缩，使用html-minifier工具进行压缩，后端模板引擎渲染压缩。
-
无效代码的删除
CSS 压缩：
-
css sprite是减少图像请求数量的首选方法，将背景图像合并为单个图像。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
-
使用clean-css对css进行压缩。
-
css语义合并
JS 压缩：
第一删除无效字符，剔除注解，代码语义的缩减和优化，代码的保护，可以使用在线网站进行压缩，html-minifier对html中的js进行压缩，使用uglifyjs2对js进行压缩
js阻塞：引入js阻塞页面的渲染，js不阻塞资源的加载，js顺序执行，阻塞后续js逻辑的执行。
-
将table改为div布局
-
缩减精简div、span、ul、li等系列标签
-
删除多余空格
-
表格类型布局时候适当使用table替代div布局
-
网页GZIP压缩
图片压缩
使用Photoshop自带图片压缩，文件—存储为Web所用格式，一般情况下，JPEG选择输出质量为70~80%可以保证视觉上几乎没有差异。
优化前后文件体积压缩率 = 优化后的体积÷优化前的体积：
文件合并
建议可以将公共库单独打包成一个文件，业务单独打包成一个文件，不同页面的合并，将不同页面的js不同打包，
如何进行文件合并：在线网站进行文件合并，使用nodejs实现文件合并
缓存
使用首屏加载，按需加载，滚屏加载，增加加载进度条，减少cookie，避免重定向，异步加载第三方资源
DNS 缓存：
浏览器在DNS解析中会消耗一定的时间，对一些访问量高的来说，需要做好DNS的缓存工作，CDN缓存，CDN作为静态资源文件的分发，做好静态资源的缓存工作，就能加快网站的加载速度
CDN部署与缓存
浏览器缓存
localstorage：
用于浏览器存储，大小5M左右，接口封装好，本地缓存的方案，可提高首屏的加载速度。长期储存，需手动清除
sessionstorage：
会话级别的浏览器存储，大小5M左右，在客户端使用，不和服务端进行通信，接口封装较好，关闭浏览器自动删除。
cookie：
给服务器传递消息，记录客户端的状态。
用于浏览器端和服务端的交互，客户端自身数据的存储。
cookie有限制，作为浏览器存储大小有4kb左右，需要设置过期时间。
cookie的生成方式，http response header的set-cookie，通过document.cookie可以读写cookie，cookie中的相关域名下面-cdn的流量损耗，httponly。
indexdb
pwa和service worker
PWA：
它是一种web app 新模型，并不是指某一种前沿的技术，是一种渐进式的web app，是通过一系列新的web特性。pwa在没有网咯的环境中也能提供基本的页面访问，web app没有网是接收不到基本页面的展示，但是pwa不会出现未连接到网络就导致显示不了页面。它很快速，对网页渲染以及网络数据访问很快速，融入特性，可以被添加到手机桌面等。
service worker
它是一个脚本，浏览器独立于当前网页，将其在后台运行，实现一些不依赖的页面。具有拦截和处理网络请求的特性。
移动端优化
使用cache，减少重定向，首屏优化，保证首屏加载数据小于14kb，不滥用web字体。
懒加载
懒加载的定义是对于图片而言，图片资源，比如商城项目图片是很多的，或者页面很长的业务场景，减少无效资源的加载，并发加载的资源过多会阻塞js的加载。
当图片进入到我们可视区域，再去请求加载资源
懒加载的效果就是延迟加载
预加载
图片等静态资源使用前提前请求，资源在使用时从缓存中加载，提高用户体验。
回流与重绘
频繁重绘与回流会导致ui频繁渲染，导致JavaScript变慢。
回流，当render tree中的一部分因为元素的规模尺寸，布局等改变需要重新构建，会触发回流
重绘，当render tree中的一些元素需要修改属性，这些属性不影响元素的外观，风格，布局，就叫做重绘，如修改颜色等。
所以回流一定会引起重绘，但是重绘不一定会引起回流。
