前端性能优化概述1.PC端的优化方法同样适用于移动端。2、在移动端，我们建议三秒渲染首屏索引。3.基于第二点，第一屏loads3Completeinseconds或者使用Loading4。以联通3G网络平均338KB/s（2.71Mb/s）计算，首屏资源不应超过1014KB5。由于手机的配置，渲染速度除了加载之外也是优化的重点。6.基于第五点7.基于第二点和第五点，所有影响首屏加载和渲染的代码都应该放在处理逻辑后面。8、加载完成后，用户交互使用时也要注意性能优化指南【加载优化】加载过程是最耗时的过程，可能占总时间的80%，所以它是优化的重点。减少HTTP请求，因为手机浏览器同时响应4个请求（Android支持4个请求，iOS5及以后可以支持6个），所以尽量减少页面的请求数，最大同时加载请求数不应该超过4a)合并CSS和JavaScriptb)合并小图片，使用sprite图片，使用缓存减少对服务器的请求次数，节省加载时间，所以所有的静态资源都要缓存在服务器端，并尝试使用长缓存（长缓存资源的更新可以使用时间戳）a）缓存所有可缓存的资源b）使用长缓存（使用时间戳更新缓存）c）使用对CSS和JavaScript的外联引用。压缩HTML、CSS和JavaScript以减少资源大小并加快网页显示速度。设置GZipa）压缩（例如额外空格、换行、缩进）b)启用GZip非阻塞JavaScript写在HTML头部（非异步），写在HTML标签中的Style会阻塞页面的渲染，所以CSS放在页首使用Link导入，避免在HTML标签中写Style，JavaScript放在页尾或异步加载。使用首屏快显来加载首屏，可以大大提高用户的页面速度，因此我们应该尽量优化首屏快显。按需加载不会影响首屏资源和当前屏资源没有使用到用户需要的资源，可以大大提高重要资源的显示速度，降低整体流量PS：按需加载loading会导致大量重绘，影响渲染性能a)LazyLoadb)滚动加载c)通过MediaQuery加载·预加载大型重资源页面（如游戏）可以使用增加Loading的方式，资源加载完成后显示页面但是，如果加载时间过长，则会造成用户流失。对于用户行为分析，可以在当前页面加载下一页资源，提高速度。下一页）压缩图片图片是最耗流量的资源，尽量避免使用，使用时选择最合适的格式（在实现需求的前提下以大小判断）和合适的大小，再使用知图压缩它们。同时在代码中使用Srcset按需显示PS：图片尺寸压缩过大影响图片显示效果a)使用智图(http://zhitu.tencent.com/)b)使用其他方式替换图片(1.使用CSS32.使用SVG3.使用IconFont)c)使用Srcsetd)选择正确的图像（1.webP比JPG好2.PNG8比GIF好）e)选择正确的尺寸（1.***loadisnotgreaterthan1014KB2.noWidethan640(以手机屏幕的一般宽度为准)·减少cookiesCookies会影响加载速度，所以静态资源域名不要使用cookies·避免重定向重定向会影响加载速度，所以在服务器上正确设置，避免重定向·异步加载第三方不可控的第三方资源会影响页面的加载和显示，所以异步加载第三方资源【脚本执行优化】脚本处理不当会阻塞页面加载和显示渲染，所以你需要注意当使用写在头部的CSS时，JavaScript写在最后或异步。避免图片和iFrame的空Src。EmptySrc会重新加载当前页面，影响速度和效率。尽量避免重置图像大小。重置图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重置图片大小会导致图片多次重绘，影响性能。尽量避免对DataURL图像使用DataURL。如果不使用图片的压缩算法，文件会变大，渲染前必须先解码，加载会很慢。Duration【CSS优化】尽量避免在HTML标签中写Style属性避免CSS表达式CSS表达式的执行需要跳出CSS树的渲染，所以请避免使用CSS表达式RemoveemptyCSSrulesEmptyCSSrules增加sizeCSS文件并影响CSS树的执行，因此需要删除空的CSS规则正确使用Display的Display属性会影响页面的渲染，所以请合理使用a)width,height,margin,padding,float不应该在display之后使用：inlinevertical-alignd)不应该在display之后使用：table-*marginorfloatshouldnotbeusedafterdisplay:table-*DonotabuseFloatFloat在渲染过程中是计算密集型的，尽量减少使用不要滥用WebfontsWebfonts需要下载，解析，重放绘制当前页面并尽可能少用。不要声明太多的字体大小。太多的Font-sizes会导致CSS树的效率下降。当值为0时，不需要单位。为了浏览器兼容性和性能，当值为0时，不带单位·规范各种浏览器前缀a)***不要放前缀b)只能使用两种CSS动画（-webkit-无前缀）c)其他的前缀有-webkit--moz--ms-四种没有前缀的，（-o-Opera浏览器改用了blink内核，所以被淘汰了）避免让选择器看起来像正则表达式高级选择器需要很长时间execute和不易读，避免使用[JavaScript执行优化]·减少重绘和回流a)避免不必要的Dom操作b)尝试改变Class而不是Style，使用classList而不是classNamec)避免使用document.written)减少drawImage缓存Dom的选择和计算HeCachelist.length每次计算.length，并用变量保存这个值尝试使用事件代理避免批量绑定事件尝试使用ID选择器ID选择器最快TOUCH事件优化使用touchstart,touchend而不是click,因为速度快但需要注意的是触摸响应过快，容易造成误操作【渲染优化】HTML使用ViewportViewport加速页面渲染，请使用如下代码
