Interview Question（性能优化）
开发及性能优化
1、规避javascript多人开发函数重名
- 命名空间
- 封闭空间
- js模块化mvc
- seajs
- 变量转换成对象的属性
- 对象化
2、减少页面加载时间的方法
- 压缩css、js文件
- 合并js、css文件，减少http请求
- 外部js、css文件放在底部
- 减少dom操作，尽可能用变量替代不必要的dom操作
- 优化图片
- 标明高度和宽度
3、如何提高页面性能优化？
内容方面：
- 减少HTTP请求
- 减少DOM元素数量
- 使得Ajax可缓存
针对CSS:
- 把css放到代码页上端
- 从页面中剥离javascript与css
- 精简javascript与css
- 避免css表达式
针对javascript：
- 脚本放到HTML代码页底部
- 从页面中剥离javascript
- 精简javascript与css
- 移除重复脚本
面向图片：
- 优化图片
- 不要在HTML中使用缩放图片
- 使用恰当的图片格式
- 使用Css Sprites技巧对图片优化
4、如何优化图像？图像格式区别？
优化图像：
- 不用图片，尽量用css3代替。比如要实现修饰效果，半透明、边框、圆角、阴影、渐变等
- 使用矢量图svg替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图
- 使用恰当的图片格式。（内容图片多为照片之类的，适用于jpeg。修饰图片通常更适合用无损压缩的png。gif基本上除了gif动画外不要使用。）
- 按照HTTP协议设置合理的缓存。
- 使用字体图标webfont、CSS Sprites等
- 用css或javascript实现预加载
- WebP图片格式能给前端带来优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网格等图片传输。
图像格式区别：
矢量图：图标字体，如font-awesome;svg
位图：gif,jpg,png
区别：
- gif:一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于色彩简单的图片，如logo,各种小图标icons等
- jpeg格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富照片，不适合做色彩简单的图片，如logo等。
- png:png可以细分成三种格式：png8,png24,png32.后面数字代表这种png格式最多可以索引和存储的颜色值。
关于透明：png8支持索引透明和alpha透明；png24不支持透明；而png32在24位的png基础上增加了8位的alpha的通道透明；
- 能在保证最不失真的情况下尽可能压缩图像文件的大小。
- 对于需要高保真的较复杂的图像，png虽然能无损压缩，但图片文件较大，不适合应用在web页面上。
5、浏览器是如何渲染页面的？
- 解析HTML文件，创建DOM树（自上而下，遇到任何样式与脚本都会阻塞）
- 解析css。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式
- 将CSS与DOM合并，构建渲染树
- 布局和绘制，重绘和重排
