Web前端性能优化主要分为以下几个部分：加载优化DNS预解析合并img、css、javascript文件，减少http请求缓存所有可缓存的资源使用longCache使用outlink引用css和javascript文件压缩HTML、css和javascript文件启用GZip使用首屏加载（例如同构）使用按需加载资源文件使用滚动记录资源文件延迟加载资源加载css文件通过MediaQuery增加Loading进度条，减少cookies避免强调图片优化在保证图片质量的情况下压缩图片以减小图片大小使用Css3、svg、iconfont代替图片首次加载不大于1024KB图片宽度不大于640px（移动端）脚本优化减少返回和回流操作和缓存DOM元素、DOM列表长度和属性值。使用事件委托来避免批量绑定事件。尝试使用ID选择器。使用触摸事件而不是点击事件。使用节流功能降低性能消耗。HTML优化css文件写在header，javascript放在最后避免深度嵌套避免img、iframe、a等元素的空src避免内联样式和事件绑定大图避免使用base64css优化去除空css规则正确使用显示属性不要滥用float不要声明太多当font-size值为0时，不要使用单位标准化。呈现各种浏览器前缀。优化HTML。使用viewport（移动端）减少DOM节点。尝试使用CSS33d动画触发GPU渲染。使用requestAnimationFrame而不是setTimeInter和setTimeout。resize适当使用canvas动画，mousemove事件使用throttling处理，减少DOM回流和重绘的次数重点提示：首屏快速显示可以大大提高用户对页面速度的感知，所以应该针对首屏快速显示，比如使用Loading等待动画，服务端渲染首屏（同构）...DNS预解析DNS是互联网的基本协议，其解析速度似乎很容易被网站优化人员忽视。现在大多数新浏览器都针对DNS解析进行了优化。典型的DNS解析需要20-120毫秒。减少DNS解析的时间和频率是一个很好的优化方法。DNSPrefetching是在后台解析具有该属性的域名，无需用户点击链接，域名解析和内容加载是串行网络操作，因此这种方式可以减少用户等待时间，提升用户体验。浏览器对网站的第一次域名DNS解析搜索流程如下：浏览器缓存-系统缓存-路由器缓存-ISPDNS缓存-递归搜索DNS预解析实现：利用元信息告知浏览器当前页面应该是doneDNSpre-resolution:
