链接：
前端优化
前端优化
浏览器发送HTTP要求，服务器收到要求全文后，返回HTTP响应，在浏览器吸收以后完毕这个历程。浏览器和服务器只要一次互动的机遇，浏览器主动提议，而服务器被动地依据收到的要求内容返回结果。一个完全的要求都须要经由DNS寻址、与服务器竖立衔接、发送数据、守候服务器响应、吸收数据的历程。
前端优化的门路
- 页面级别的优化，比方HTTP要求数、剧本的无壅塞加载、内联剧本的位置优化等；
- 代码级别的优化，比方JavaScript中的DOM操纵优化、CSS挑选符优化、图片优化以及HTML组织优化等。
页面级优化
1. 削减HTTP要求数
削减HTTP要求数的主要门路
1、从设想完成层面简化页面
坚持页面简约、削减资本的运用是最直接的。能运用CSS替换结果就只管少运用图片。
2、合理设置HTTP缓存
恰本地缓存设置能够大大削减HTTP要求。被缓存资本的要求服务器是304响应，只要Header没有body，没有节约带宽。关于多个页面都能够运用到的代码，只管拆分到同一个文件中。如果是嵌入页面换来的是增大了页面的体积，而且没法应用浏览器缓存。
3、资本兼并和紧缩
如果能够，只管将外部的剧本、款式举行兼并，多个合为一个。别的，CSS、JavaScript、image都能够用响应的东西举行紧缩。
4、CSS Sprites
兼并CSS图片，削减要求数的有一个好办法。
5、lazy load image
这个战略实际上并不肯定能削减HTTP要求数，然则却能在某些条件下或许页面刚加载时削减HTTP要求数。关于图片而言，在页面刚加载时能够只加载第一屏，当用户继承今后滚屏时才加载后续的图片。之前的做法是在加载时把第一屏以后的图片地点缓存在textarea标签中，待用户往下滚屏时才惰性加载。百度图片和花瓣网也是用这类盛行的瀑布流加载图片。
2. 将外部剧本置底
外链剧本在加载时会壅塞其他资本，比方在剧本加载完成之前，它背面的图片、款式以及其他剧本都处于壅塞状况，直到剧本加载完成后才会最先加载。如果把剧本放在比较靠前的位置，则会影响全部页面的加载速率从而影响用户体验。最简朴可依靠的要领是将剧本只管今后挪，削减对并发下载的影响。如果时效性许可的话，能够斟酌在DOMLoaded事宜触发时加载，或许用setTimeout体式格局来天真掌握加载的机遇。
3. 异步实行inline剧本
inline剧本对机能的影响比外部剧本大许多。起首，与外部剧本一样，inline剧本在实行时也会壅塞并发要求，除此之外，由于浏览器在页面处置惩罚方面时单线程的，当inline剧本在页面衬着之前实行时，页面的衬着事情则会被推延。简而言之，inline剧本在实行时页面处于空缺状况。
鉴于以上两点，发起将实行时候较长的inline剧本异步实行。异步实行的体式格局有许多种，比方运用script元素的defer属性、运用setTimeout，另外，在HTML5中引入了web workers的机制，恰好能够处理此类题目。
4. lazy load JavaScript
如今的做法大概有两种，一种是为流量迥殊大的页面特地定制一个专用的mini版框架，另一种则是lazy load，最初只加载中心模块，其他模块能够比及须要运用的时刻才加载，类似于java的swing，引入须要的组件库文件。
5. 将CSS放在head中
6. 削减不必要的HTTP跳转
关于以目次情势接见的HTTP链接，许多人都邑疏忽链接末了是不是带/，如果服务器对此区别对待，那末个中极能够隐蔽了301跳转，增加了过剩要求。
代码级优化
1. JavaScript
1、DOM
DOM操纵应该是剧本中最耗机能的一类操纵，比方增、删、查、改DOM元素或许对DOM鸠合举行操纵。如果剧本中包含了大批的DOM操纵则须要注重html collection。
在剧本中document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection范例的鸠合，在日常平凡运用的时刻大多将它作为数组来运用，由于它有length属性，也能够运用索引接见每个元素。不过在接见机能上则比数组要差许多，缘由这个集兼并非一个静态的结果，它示意的仅仅是一个特定的查询，每次接见该鸠应时都邑从新实行这个查询从而更新查询结果。所谓的接见鸠合包含读取鸠合的length属性、接见鸠合中的元素。
因而，当你须要遍历HTML collection时，只管将它转为数组后再接见，以进步机能。纵然不转换为数组，也请只管少地接见它，比方在遍历的时刻能够将length属性、成员保存到局部变量后再运用局部变量。
2、慎用with
with(obj){p=1};代码块的行动实际上是修改了代码块中的实行环境，将obj放在了其作用于的最前端，在with代码块中接见非局部变量都是先从obj上最先查找，如果没有再顺次按作用域链向上查找，因而运用with相当于增加了作用域链长度。而每次查找作用域链都是要斲丧时候的，太长的作用域链会致使查找机能下落。
因而，除非你能肯定在with代码中只放obj中的属性，不然慎用with，替换的能够运用局部变量缓存须要接见的属性。
3、防止运用eval和Function
每次eval或Function组织函数作用于字符串示意的源代码时，剧本引擎都须要将源代码转换为可实行代码。这是很斲丧资本的操纵——一般比简朴的函数挪用慢100倍以上。
eval函数效力迥殊低，由于事前没法晓得传给eval的字符串中的内容，eval在其高低文中剖析要处置惩罚的代码，也就是说编译器没法优化高低文，因而只能有浏览器在运转时剖析代码，这对机能影响很大。
Function组织函数比eval略好，由于运用此代码不会影响四周代码，但其速率仍很慢。
另外，运用eval和Function不利于JavaScript紧缩东西实行紧缩。
4、削减作用域链查找
作用域链查找题目，这一点在循环中特别须要注重。如果在循环中须要接见非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历完毕后再反复谁人变量，这一点对全局变量特别主要，由于全局变量处于作用域链的最顶端，接见时的查找次数是最多的。
另外，要削减作用域链查找还应该削减闭包的运用。闭包的变量能够保存到内存中，内存斲丧很大，处理要领是在退出函数前，将不运用的局部变量删除。
5、数据接见
JavaScript中的数据接见包含直接量（字符串、正则表达式）、变量、对象属性以及数组，个中对直接量和局部变量的接见是最快的，对对象属性以及数组的接见须要更大的开支。当涌现以下状况时，发起将数据放入局部变量：
- 对任何对象属性的接见凌驾1次
- 对任何数组成员的接见次数凌驾1次
别的，还应该只管的削减对对象以及数组深度查找。
6、字符串拼接
在JavaScript中运用+号来拼接字符串效力是比较低的，由于每次运转都邑拓荒新的内存并天生新的字符串变量，然后拼接结果赋值给新变量。之前运用jQuery+Ajax交互页面，许多时刻都是将背景传输过来的数据和前端HTML组织拼接成字符串，然后呈如今页面HTML容器里。
与之比拟更加高效的做法是运用数组的join要领，行将须要拼接的字符串放在数组中末了挪用其join要领获得结果。不过由于运用数组也有肯定的开支，因而当须要拼接的字符串较多时能够斟酌运用此要领。
2. CSS挑选符
在大多数人的看法中，都以为浏览器对CSS挑选符的剖析是从左往右举行的。
如果是从右往左剖析则效力会很高，由于第一个ID挑选基本上就把查找的局限限制了，但实际上浏览器对挑选符的剖析是从右往左举行的。#tag A {color: "#ccc";}，浏览器必需遍历查找每个A标签的先人节点，效力并不像之前设想的那末高。依据浏览器的这一行动特性，在写挑选符的时刻须要注重许多事项。
