前端自动化的构造实现压缩与合并
fis3是一款百度内的构建工具，start->getSource()->所有文件是否编译完成，（单文件的编译，另个走向为打包的过程）。
fis3的配置文件，fis-conf.js
压缩后，优化前后性能对比，还是要性能优化得好，大的资源效果很明显
加载优化，合并CSS，JavaScript，合并小图片，缓存一切可以缓存的资源，使用外联样式引用CSS和JavaScript，压缩HTML，css，JavaScript，启用GZIP，使用首屏加载，按需加载，滚屏加载，增加加载进度条，减少cookie，避免重定向，异步加载第三方资源。
css优化，css写在头部，JavaScript写在尾部，避免图片和Frame等的空Src，尽量避免重设置图片大小，图片尽量避免使用DataURL，尽量避免写在HTML标签中写style属性，避免css的表达式，移除空的css规则，正确使用display的属性，不滥用float，不滥用web字体，不滥用过多的Font-size，值为0时不需要任何单位，标准化各种浏览器前缀，避免让选择符看起来像正则表达式。
渲染优化，HTML使用viewport，减少dom节点，尽量使用css3动画，合理使用requestAnimationFrame动画代替setTimeout，适当使用Canvas动画，Touchmove，Scroll事件会导致多次渲染，使用CSS3 transitions，CSS3 3d，transforms，Opacity，Canvas等来触发GPU渲染。
脚本优化，减少重绘和回流，缓存dom选择与计算，缓存列表length，尽量使用事件代理，避免批量绑定事件，尽量使用id选择器，使用touchstart，touchend代替click。
图片优化，使用css3，svg，iconfont代替图片，使用srcset，web优与jpg，png8优于gif，首次加载不大于1014kb，图片不宽于640。
注意，在我们修改后端响应时间缩短一半时，整体响应事件只能减少5-10%，而优化前端性能，缩短一半时，整体响应可以减少40-45%。
前端优化的意义 HTTP请求的过程是进行优化的核心 压缩和合并的原理
图片优化的过程
图片加载处理，图片预加载，图片懒加载，首屏加载时进度条的显示。异步请求的优化，使用正常的json数据格式进行交互，部分常用数据的缓存。
图像映射将多个图像合并为一个图像，整体大小大致相同，但是减少HTTP请求的数量可以加快页面的速度。
png8、png24、png32区别
png8为256颜色，支持透明，png24为2的24次幂，不支持透明，png32为2的24次幂，支持透明。
jpg有损压缩，压缩率高，不支持透明，png支持透明，浏览器兼容好，webp压缩程度更好，在ios webview有兼容性问题，svg矢量图，代码内嵌，相对较小。
jpg使用场景，用在不需要透明图片，png使用场景，用在需要透明图片的场景，webp用在安卓，svg矢量图用在图片样式相对简单的业务。
css雪碧图，把一些图片整合到一张单独的图片中，用来减少请求数量，问题出在图片大，如果没有加载成功的话，慢，也是有问题的。image inline，把图片的内容内嵌到HTML上，与HTML存在，作为base64的格式，可以减少你的网站的HTTP请求数量。使用矢量图svg，绘制功能，使用iconfont解决icon问题。
webp使用在安卓下，它具更好的图像数据压缩算法，和无损和有损的压缩模式，alpha透明，动画的特性。
HTML渲染过程：顺序执行（词法分析），并发加载，是否阻塞，依赖关系，引入方式。
css阻塞，css head中阻塞页面的渲染，css阻塞js的执行，css不阻塞外部脚本的加载。
js阻塞，引入js阻塞页面的渲染，js不阻塞资源的加载，js顺序执行，阻塞后续js逻辑的执行。