本文原为公司内部分享，现发表。我们欢迎您提出宝贵建议。后台的目的是为了让官网首页加载速度更快，对用户操作的响应更及时，为用户提供更友好的体验。减少页面请求次数，减少请求占用的带宽，节约资源。优化方法按照粒度分为两类：页面级优化（HTTP请求数、资源合并压缩、资源加载时机等）代码级优化（DOM操作优化、CSS选择器优化、HTML结构优化）具体措施page-leveloptimizationpage-level优化的目标基本上是如何减少HTTP请求的数量，减少请求的资源量。每个请求都是有成本的，既包括时间成本又包括资源成本（一个完整的请求需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程流程）1.静态资源的合并压缩根据静态文件的类型，可以借助gulp工具对js文件和css文件进行合并压缩。比如官网项目中有七个css文件，十几二十个js文件。合并压缩静态资源后，可以减少http的开销。我们将不经常改动的资源（如jquery、各种lib库、插件等）合并压缩成一个文件，命名为vender.css、vender.js。将经常在线更改的文件合??并压缩成一个文件，命名为index.css、index.js，并加上hashstamp。index等文件每次上线内容基本都会变化，所以gulp自动构建后添加的hashstamp也不一样，vendor类型不变，这样我们就可以合理利用浏览器的缓存机制.2.图片处理使用jq的lazyload插件实现图片的懒加载。等待滚动条滚动到相应的地方，再加载需要的图片资源。不直接使用设计提供的双图，而是使用css的devicePixelRatio来检查设备的像素比，以帮助区分视网膜设备和非视网膜设备来决定是加载双图还是原始图像尺寸。图片上传到CDN前，使用gulp-imagemin工具压缩尺寸，不失真。将下图这样的小图全部做成sprite图片，单色使用icon-font。或者直接在页面上写svg代码，转成base64写入页面。总之，就是要减少http请求的次数。3.首屏加载会在第一时间将首屏呈现给用户。具体做法是将除首屏dom元素外的所有dom元素都用一个template元素包裹起来，在window监听load事件后，将剩余的dom部分全部插入到页面中。（tips：为了防止用户在windowload事件之前滚动页面，可以扩大首屏的范围。）4.DNS预读DNS预读是一种让浏览器主动执行域的方法名称解析函数。DNS请求需要很少的带宽，但延迟有点高。这是来自MDN的引述：在某些浏览器中，这种预取将与页面的实际内容并行（而不是连续）发生。正因为如此，一些高延迟域名的解析过程不会阻塞资源的加载。这可以大大加快页面加载速度（尤其是在移动网络环境中）。在一些图片较多的页面，在发起图片加载请求前预解析域名，至少可以提升5%的图片加载速度。具体方法：在head标签中添加data.dadaabc.com作为静态资源的域名。如果还有其他链接的域名，请将它们一起添加。5.静态资源的多域名分发同一域下浏览器请求的并发数是有限制的。为了增加并发，特别是一些静态资源，可以使用多个域名。不过由于域名DNS解析本身就比较耗时，越多越好，Chrome最多支持6路并发，所以一般设置2-4个域名比较合适。具体方法是：添加cdn域名下载静态资源。比如img.dadaabc.com/域名用于所有图片，css.dadaabc.com/域名用于所有css资源，这些域名最终都指向同一个CDN服务器。给静态资源域名添加前缀可以用gulp-rev-replace实现。6.统计代码所有统计代码都在窗口加载事件后执行。为了方便统计代码的管理，比如在页面中添加一些埋点，统计产品的增删改查，我们可以使用GoogleTagManager工具进行统一管理。具体做法是：页面只拉取GoogleTagManager提供的gtm代码。js代码包含了所有的统计产品，比如百度、Inspect等，这些统计产品也是通过创建script标签动态插入到页面中的。另外需要注意的是，google提供的gtm代码是在google服务器上的。为了更快的获取代码，我们可以在自己的服务器上执行crontab定时任务，每分钟获取一次，然后在自己的服务器上直接获取gtm代码即可。代码层面的优化1.所有dom结构合理的css文件放在head，所有script文件放在body底部。原因：将样式表移动到头部允许页面逐步呈现。浏览器负责渲染的GUI渲染线程和JS引擎线程是互斥的。当JS引擎执行时，GUI线程会被挂起（相当于被冻结），GUI更新会保存在一个队列中，直到JS引擎空闲。立即执行。参考资料：从浏览器多进程到JS单线程，JS运行机制最全梳理2.最小化重排和重绘多个属性变化一次写：例如：varele=document.getElementById('myDiv');ele.style.borderLeft='1px';ele.style.borderRight='2px';ele.style.padding='5px';更改了三个样式属性，每个都影响元素的几何形状，虽然大多数现代浏览器都优化为只导致一次重排，但如上??，如果请求及时属性，将强制刷新队列，这段代码访问DOM四次，一个很明显的优化策略就是把它们的操作组合一次，这样DOM只修改一次：varele=document.getElementById('myDiv');ele.style.cssText='border-left:1px;右边框：2px；padding:5px;';总结：同一个DOM的多个属性变化可以写在一起（减少DOM访问，同时降低强制渲染队列刷新为0的风险）Fragment元素应用：fragment是一个轻量级的文档对象，旨在执行更新和移动节点等任务。片段的一个方便的语法特征是，当您将片段附加到节点时，实际添加的是片段的子节点，而不是片段本身。仅触发一次回流，并且仅访问一个实时DOM。例如：varfragment=document.createDocumentFragment();varli=document.createElement('li');li.innerHTML='apple';fragment.appendChild(li);varli=document.createElement('li');li.innerHTML='西瓜';fragment.appendChild(li);document.getElementById('水果').appendChild(片段);3.大量回调函数的函数防抖和函数节流触发事件，例如拖拽mousemove事件，window对象的resize和scroll事件，文本输入，自动完成keyup事件等，需要使用合理发挥防抖和节流机制。具体可以参考我的另一篇文章功能防抖与功能节流四、CSS选择器CSS选择器的解析公式其实是从右往左的，比如：#div1a{color:red}作为上面的选择器，浏览器必须遍历找到所有的a元素，然后找到ID为div1的元素，显然效率很低。博客链接参考：web前端应该从哪些方面对网站进行优化？重新排列和重绘
