前端面试问题之性能优化问题
首先要明白我们性能优化的目的是什么?
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深度