前端面试问题之性能优化问题(必行)

前端面试问题之性能优化问题

首先要明白我们性能优化的目的是什么？

1. 从用户角度而言:优化能够让页面加载更快、对用户的操作响应的更及时，能够给用户提供更为良好体验。
2. 从服务商角度而言:优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

性能优化可以从以下几个方面入手：

1.在页面内容方面，可以减少http请求次数。

正确的嵌套DOM元素，减少DOM的元素数量。
正确的使用浮动样式，因为浮动在渲染师计算量比较大，尽量减少使用。

采用合并文件的方法：

    将js文件和css文件分别合并到一个文件中，可以减少http请求的数量并缩短最终用户响应时间。
当js或者css在不同页面中使用时需要做不同的修改，这样可能会麻烦一点，但这个方法却是作
为改善页面性能的重要一步。

CSS Sprites:

      这是减少图片请求的有效方法，把所有的背景图像都放到一个图片文件中，然后通过css的
background-image和background-position属性来显示图片的不同部分；合并后的图片会比
分离的图片总和要小，因为降低了图片自身的开销。	

js方面：

最简单的就是:
     将css放在页面的最上面，在文档head内加载你的样式表，这样做的好处是提高网页的渲染性能，
避免网页出现白屏或者是没有样式的内容。
    与此对应的就是将script放在页面的最下面，因为浏览器加载和解释网页的顺序是从左到右从上到下的，
如果JavaScript代码有死循环的问题，网页可能是空白一片的，如果放在页面的最下面即使如此，页面
也能正常展现出来，用户体验更好。

js逻辑判断优化

用switch语句来优化多个if...else语句
用|| &&运算符来优化多个if语句

数组优化

使用数组的时候，可食用能够JSON格式的语法。
如果要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。

总的来说那就是：

1. 尽可能使用雪碧图

2. 使用字体图标代替图片

3. 对HTML，css，js 文件进行压缩

4. 模块按需加载

5. 资源懒加载与资源预加载

6. 避免使用层级较深的选择器及减少DOM深度