前端面试总结之前端性能优化（ http css JavaScript images HTML）

总结自己前端面试经历，分为两部分笔试跟面试官交流。从自己的答题情况可以看出基础知识不牢靠，不够细致，没有彻底的理解某个知识点。跟面试官聊得时候一问一答模式，导致对公司的了解程度不高，对项目技术团队方面了解的更少，不知涉及到哪些技术和未来技术扩展空间。

前端性能优化  （自己答的不是很好，简单从前端页面的性能解答的，以下较全面的解答）

前端页面越来越复杂化，前端优化针对方方面面的资源的不同方式。包括：HTML、CSS、JavaScript、image、flash等等各种各样的资源。致使用户体验，服务商的资源浪费等问题越来越明显不合理化。作为前端开发者对前端性能优化的需求越来越高。接下来看一下前端性能优化都有哪些？

         一、减少http请求次数

每一个请求都有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过DNS寻址，与服务器建立连接、发送数据、等待服务器响应、接收数据是一个漫长而复杂的过程。时间成本是用户需要看到或者“感受”到这个资源是必须要等待这个过程结束的，资源上由于每个请求需要携带数据，因此每个请求都占用带宽。另外，由于浏览器进行并发送请求的请求数是有上限的，因此请求多了之后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成速度慢这样一个印象，即使可能用户能看到的首屏的资源都已经请求完了，但浏览器的进度条会一直存在。减少http请求次数的主要途径包括：

1、合理设置HTTP缓存，缓存的力量是强大的，恰当的缓存设置可以大大的减少HTTP请求。怎样算是合理的设置呢？很简单，能缓存数据越多越好，能缓存时间越久越好。关于 HTTP缓存的具体设置和原理此处就不再详述，有兴趣的可以参考下列文章：http://blog.csdn.net/hhy_9288/article/details/78477333

2、资源合并压缩，尽可能的将外部的JavaScript文件、css文件进行合并，多个文件合并为一个并且JavaScript文件、css文件、images用相应的工具进行压缩。删除注释和空格等不必要的字符等。

3、CSS精灵即CSS Sprite,将小图标和北京图像合并到一张图上，来减少http请求次数。

4、lazy load Images(延迟加载图片)，首先只加载第一屏的图片，当用户滚动访问后面的内容时在加载相应的图片。有选择性地请求图片，减少HTTP请求。(可以参考淘宝网图片加载)

5、CSS字体图标，一个字体图标比一系列的图像要小，一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线缓存。字体图标样式可以用css属性设置。

6、CSS文件放在head中、js文件最好置低（放在body最底部）有利于加载速度。减少阻塞加载

二、代码优化

1、减少DOM的操作，DOM操作应该脚本中最耗性能的一类操作，在脚本中document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection(html收集器、返回的是一个数组内容信息)类型的集合，在经常使用的时候大多将它作为数组使用，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询而更新查询结果。所谓的“访问集合”包括读取集合的length属性、访问集合中的元素。

因此当需要遍历HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。或者再遍历时将length属性、成员保存到局部变量后再使用局部变量。

2、减少重排和重绘 ，尽量不要在布局信息改变时查询、通过class改变样式，避免逐条改变、如果需要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会出发一次重排（fragment元素的应用）、将需要多次重排的元素，position属性设置为absolute或fixed，这样此元素脱离文档流，它的变化不会影响到其他元素。参考文章https://www.cnblogs.com/zichi/p/4720000.html

3、CSS表达式会进行大量重复计算，甚至鼠标在页面移动时也在不停的执行，大大影响性能，尽量使用一次性表达式，避免动态计算。如：

a {star:expression(this.onFocus=this.blur())}

4、慎用with，w使用with相当于增加了作用域链长度。而每次查询找作用域链都是消耗时间的，过长的作用域链会导致查找性能

下降。

5、避免使用eval和Function，每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作
—— 通常比简单的函数调用慢 100倍以上。eval函数由于事先无法知晓传给eval的字符串中的内容，eval在其上下文解释要处理的代码，也就是编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。Function代码不会影响周围代码，但其速度很慢。此外，使用eval和Function也不利于JavaScript压缩工具进行压缩。

6、减少作用域链查找，全局变量只能适当的使用因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。

7、css选择符，浏览器对css选择符的解析是从右往左进行的。参考https://www.cnblogs.com/subying/p/3661807.html

8、HTML优化 参考http://www.cnblogs.com/xiyangbaixue/p/4029372.html

9、图片images选择图片格式尽可能用jpg格式，少用png格式，png格式用8位，图片设置好宽高提高页面渲染速度。使用data:url时尽可能将图片嵌入到页面或css中。

总结：文章从两大类减少HTTP请求和代码优化进行性能优化。对用户而言，优化能够页面加载的更快，对用户操作响应更及时，能给用户带来很好的体验。对服务商而言，优化能够减少页面请求次数，或者减少请求所占的资源，能够节省可观的资源。恰当的优化不仅能够改善用户体验并且能够节省资源的有效利用。

参考文章有
https://www.zhihu.com/question/21658448 http://blog.csdn.net/Vivian_jay/article/details/58308434?locationNum=11&fps=1 https://www.cnblogs.com/zichi/p/4720000.html https://www.cnblogs.com/subying/p/3661807.html http://blog.csdn.net/hhy_9288/article/details/78477333 http://www.cnblogs.com/yingsmirk/archive/2012/04/09/2438506.html https://www.cnblogs.com/zzhui/p/5048130.html