链接：前端优化前端优化浏览器发送HTTP请求，服务器收到请求全文后返回HTTP响应，浏览器收到后结束流程.浏览器和服务器只有一次交互的机会。浏览器主动发起交互，服务器根据收到的请求内容被动返回结果。一个完整的请求需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据的过程。前端优化的方式是页面级优化，比如HTTP请求数、非阻塞脚本加载、内联脚本位置优化等；代码级优化，如JavaScript中的DOM操作优化、CSS选择器优化、图片优化和HTML结构优化等页面级优化1.减少HTTP请求数减少HTTP请求数的主要途径1.从设计和实现层面简化页面保持页面简洁，减少资源的使用是最直接的。如果可以使用CSS替换效果，请尽可能少地使用图像。2、HTTP缓存的合理设置适当的缓存设置可以大大减少HTTP请求。缓存资源的请求服务器是304响应，只有Header没有body，不节省带宽。对于可能被多个页面使用的代码，尽量拆分到同一个文件中。如果嵌入到页面中，会增加页面大小，无法使用浏览器缓存。3.资源合并压缩如果可能，尽量合并外部脚本和样式，合二为一。另外，CSS、JavaScript、图片都可以用相应的工具进行压缩。4.有一个很好的办法，就是把CSS图片和CSSSprites结合起来，减少请求次数。5.懒加载图片的策略不一定能减少HTTP请求的次数，但是可以在一定条件下或者页面刚加载的时候减少HTTP请求的次数。对于图片，可以在页面刚刚加载时只加载第一屏，等用户继续向后滚动时加载后续图片。之前的做法是在加载时将首屏后图片的地址缓存在textarea标签中，当用户向下滚动屏幕时懒加载。百度图片和花瓣网也使用这个流行的瀑布加载图片。2.将外部脚本放在底部。外部脚本加载时会阻塞其他资源。比如在脚本加载前，后面的图片、样式等脚本会被屏蔽，直到脚本加载完毕才会开始加载。如果脚本放在比较高的位置，会影响整个页面的加载速度，影响用户体验。最简单和最可靠的方法是将脚本尽可能向后移动，以减少对并发下载的影响。如果时效性允许，可以考虑在DOMLoaded事件触发时加载，或者使用setTimeout灵活控制加载时机。3.异步执行内联脚本。内联脚本对性能的影响比外部脚本大得多。首先，和外部脚本一样，内联脚本在执行过程中也会阻塞并发请求。另外，由于浏览器在页面处理方面是单线程的，当在页面渲染之前执行内联脚本时，页面渲染工作会被延迟。简而言之，内联脚本执行时会出现空白页。鉴于以上两点，建议异步执行执行时间较长的内联脚本。异步执行的方式有很多种，比如使用script元素的defer属性，使用setTimeout。另外HTML5中引入了webworkers的机制，正好可以解决这类问题。4.延迟加载JavaScript目前大致有两种方法。一种是为流量特别大的页面定制一个专用的迷你版框架，一种是懒加载。最初，只加载核心模块，其他模块可以等到需要时才加载。只在使用的时候加载，类似于Java的swing，导入需要的组件库文件。5、把CSS放在头部6、减少不必要的HTTP跳转对于以目录形式访问的HTTP链接，很多人会忽略链接末尾是否有/。如果服务器对此不同对待，那么很可能301是隐藏跳转，增加了冗余请求。代码级优化1.JavaScript1、DOMDOM操作应该是脚本中性能最密集的操作，例如添加、删除、检查、更改DOM元素或对DOM集合进行操作。如果脚本中包含大量的DOM操作，需要注意html的收集。在脚本中，document.images、document.forms、getElementsByTagName()返回的是一个HTMLCollection类型的集合，平时使用中多作为数组使用，因为它有length属性，每个元素也可以使用一个指数。但是访问性能比数组差很多，因为这个集合不是一个静态的结果，它只代表一个特定的查询，每次访问集合都会重新执行查询来更新查询结果。所谓访问集合包括读取集合的length属性和访问集合中的元素。因此，当需要遍历HTML集合时，尽量将其转化为数组再访问，以提高性能。即使没有转换成数组，也请尽量少访问。比如可以将length属性和成员保存到一个局部变量中，然后在遍历的时候使用这个局部变量。2.谨慎使用withwith(obj){p=1}；代码块的行为实际上修改了代码块中的执行环境，将obj放在其作用的最前面，with代码块中访问非局部变量首先从obj开始查找，如果没有则向上查找根据作用域链，所以使用with相当于增加了作用域链的长度。每次查找作用域链都需要时间，过长的作用域链会导致查找性能下降。因此，除非你确定只有obj中的属性放在with代码中，否则请谨慎使用with。相反，您可以使用局部变量来缓存需要访问的属性。3、避免使用eval和Function每次eval或Function构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是一项资源密集型操作——通常比简单的函数调用慢100倍以上。eval函数的效率特别低。由于传递给eval的字符串内容事先无法获知，eval是在其上下文中解析要处理的代码，也就是说编译器无法对上下文进行优化，只能在运行时由浏览器解析。代码，这对性能有很大的影响。Function构造函数比eval稍微好一些，因为使用它不会影响周围的代码，但它仍然很慢。此外，使用eval和Function并不能帮助JavaScriptminifiers执行压缩。4.减少作用域链搜索作用域链搜索问题，在循环中需要特别注意。如果在循环中需要访问不在这个作用域内的变量，请在遍历前使用局部变量缓存该变量，遍历后重复该变量。这一点对于全局变量尤为重要，因为全局变量在作用域链的最顶端，访问时的查找次数最多。此外，减少范围链查找也应该减少闭包的使用。闭包变量可能存储在内存中，这会消耗大量内存。解决方法是在退出函数之前删除不用的局部变量。5、数据访问JavaScript中的数据访问包括字面量（字符串、正则表达式）、变量、对象属性和数组，其中对字面量和局部变量的访问速度最快，而对对象属性和数组的访问则需要更大的开销。出现以下情况时，建议将数据放入局部变量：对任何对象属性的访问次数超过1次，对数组成员的访问次数超过1次；此外，还应尽可能减少对对象和数组的深度搜索.6.字符串拼接JavaScript中使用+号拼接字符串效率相对较低，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新的变量。在使用jQuery+Ajax交互页面之前，很多时候后台传来的数据和前端HTML结构拼接成字符串，然后呈现在页面HTML容器中。相比之下，使用数组的join方法效率更高，即将要拼接的字符串放在数组中，最后调用它的join方法得到结果。但是由于使用数组也有一定的开销，所以当需要拼接的字符串比较多的时候可以考虑使用这种方式。2.CSS选择器在大多数人的印象中，浏览器是从左到右解析CSS选择器的。如果是从右向左解析，效率会很高，因为第一个ID选择基本上限制了搜索的范围，但实际上浏览器是从右向左解析选择器的。#tagA{color:"#ccc";}，浏览器要遍历找到每个A标签的祖先节点，效率没有之前想象的那么高。根据浏览器的这种行为，写选择器需要注意的地方有很多。
