Interview Question（性能优化）

开发及性能优化

一、规避javascript多人开发函数重名

• 命名空间
• 封闭空间
• js模块化mvc
• seajs
• 变量转换成对象的属性
• 对象化

二、减小页面加载时间的方法

• 压缩css、js文件
• 合并js、css文件，减小http请求
• 外部js、css文件放在底部
• 减小dom操做，尽量用变量替代没必要要的dom操做
• 优化图片
• 标明高度和宽度

三、如何提升页面性能优化？

　　内容方面：

1. 减小HTTP请求
2. 减小DOM元素数量
3. 使得Ajax可缓存

　　针对CSS:

1. 把css放到代码页上端
2. 从页面中剥离javascript与css
3. 精简javascript与css
4. 避免css表达式

　　针对javascript：

1. 脚本放到HTML代码页底部
2. 从页面中剥离javascript
3. 精简javascript与css
4. 移除重复脚本

　　面向图片：

1. 优化图片
2. 不要在HTML中使用缩放图片
3. 使用恰当的图片格式
4. 使用Css Sprites技巧对图片优化

四、如何优化图像？图像格式区别？

优化图像：

1. 不用图片，尽可能用css3代替。好比要实现修饰效果，半透明、边框、圆角、阴影、渐变等
2. 使用矢量图svg替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图
3. 使用恰当的图片格式。（内容图片多为照片之类的，适用于jpeg。修饰图片一般更适合用无损压缩的png。gif基本上除了gif动画外不要使用。）
4. 按照HTTP协议设置合理的缓存。
5. 使用字体图标webfont、CSS Sprites等
6. 用css或javascript实现预加载
7. WebP图片格式能给前端带来优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，很是适合用于网格等图片传输。

图像格式区别：

　　 矢量图：图标字体，如font-awesome;svg

　　　 位图：gif,jpg,png

　　　 区别：

1. 1. gif:一种无损，8位图片格式。具备支持动画，索引透明，压缩等特性。适用于色彩简单的图片，如logo,各类小图标icons等
   2. jpeg格式是一种大小与质量相平衡的压缩图片格式。适用于容许轻微失真的色彩丰富照片，不适合作色彩简单的图片，如logo等。
   3. png:png能够细分红三种格式：png8,png24,png32.后面数字表明这种png格式最多能够索引和存储的颜色值。

　　　　关于透明：png8支持索引透明和alpha透明；png24不支持透明；而png32在24位的png基础上增长了8位的alpha的通道透明；

1. 1. 能在保证最不失真的状况下尽量压缩图像文件的大小。
   2. 对于须要高保真的较复杂的图像，png虽然能无损压缩，但图片文件较大，不适合应用在web页面上。

五、浏览器是如何渲染页面的？

1. 解析HTML文件，建立DOM树（自上而下，遇到任何样式与脚本都会阻塞）
2. 解析css。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式
3. 将CSS与DOM合并，构建渲染树
4. 布局和绘制，重绘和重排