首先，减少HTTP请求次数，比如说合并CSS和JS文件，但是也不要完全的合并在同一个文件里面，一个域名分散三四个资源，这样方便浏览器去并行下载，当然浏览器对每个域名的并行下载个数有限制，一个域名分配三四个资源虽然增加了HTTP请求数量，但是对比并行下载来说，性价比更高。
可以使用webpack使用进行减少js文件的体积，可以使用babel-plugin-import、babel-plugin-component、webpack.ContextReplacementPlugin、webpack.IgnorePlugin…
提升Web性能的8个技巧总结
- 管理“页面膨胀”
页面大小与性能有着密切的关系。Radware 最新电商性能“行业现状”报告显示，100 强电商页面大小中位数达到了 1492KB，比一年半之前增大了 48%。
在研究报告里加载最快的 10 个页面中，页面包含的资源请求中位数为 50 个，页面大小中位数为 556KB。而加载最慢的 10 个页面中，页面包含的资源请求中位数为 141 个，页面大小中位数为 3289KB。换句话说，加载最慢的页面的资源中位数几乎是加载最快的页面的三倍，页面大小则是六倍。
仔细研究页面尺寸大小，我们可以得到更多的信息。加载最快的 10 个页面所包含的资源总数范围比较密集：在 15 个72 个之间;页面尺寸最小的仅为 251KB，最大的 2003KB。而加载最慢的 10 个页面所包含的资源总数范围则比较广泛：在 89 个373 个之间;页面尺寸最小为 2073KB，最大的则超过了 10MB。
- 进行图像优化
进行图像优化是提升性能最简单的一种方法，它可以使页面加载更快。为了更有效的完成图像渲染，图像必须经过压缩和整合、图像的尺寸和格式必须经过仔细调整，图像质量也必须经过优化，这样才可以依据图像的重要性进行区别化的加载处理。
- 控制第三方脚本
在典型的页面服务器请求中，来自于第三方脚本的请求占了其中的 50% 或更多。这些第三方脚本不仅会增加页面的字节数，带来延迟，而且也会成为 Web 页面中最大的潜在故障点。无响应、未经优化的第三方脚本会降低整个网络的加载速度。
解决办法是延迟第三方脚本的加载，将其放在关键页面内容之后进行加载，更为理想的情况是放在页面 onLoad 事件之后加载，这样才不会影响企业的搜索排名(谷歌将 onLoad 事件作为加载时间指标)。对于一些分析工具和第三方广告商而言，如果延迟第三方脚本加载的方法不可行，可以利用脚本的异步版本，与关键内容的加载同步进行。用户必须了解网站中有哪些脚本，删除那些无用的脚本，并对第三方脚本的性能进行持续监控。
- 真正做到移动设备优先
“移动设备优先”并不是一个全新的概念。早在 2013 年，移动设备的使用量就已经超过了台式机，然而与众多口头承诺的移动性能相比，真正专注于移动设备的开发还是存在一定的差距。例如，2011 年 11 月，移动设备上的平均页面大小为 475KB，现在则增长至 897 KB。也就是说，在短短三年之间，平均页面大小几乎翻了一番。
尽管移动设备和网络取得了一些进展，但就性能而言，还是无法与大小已接近 1MB 的服务页面需求保持同步。我们知道，页面大小与加载时间息息相关，移动用户对缓慢的加载速度尤其敏感。如果企业希望网站可以真正做到“移动设备优先”，就必须正确处理这些问题。
- 在进行响应式 Web 设计时兼顾性能
响应式设计让设计人员和开发人员可以更好地控制 Web 页面的外观和感觉。它可以使跨多平台和设备上的页面变得更漂亮。但同时也会带来巨大的性能损失，这些性能损失并不能通过更快速的浏览器、网络和小工具得到缓解。而且随着时间的推移，这样影响还将持续恶化。
响应式设计建立在样式表和 JavaScript 之上。然而，低效的 CSS 和 JS 所带来的性能问题远远大于其设计优势给我们带来的好处。样式表应当放在 HEAD 文档中，用以实现页面的逐步渲染。JavaScript 文件应当放在页面底部或在关键内容加载完成之后再被加载才是合理的处理方式。
- 实时监控性能
大家都知道要解决一个问题就必须先对问题有充分的了解。要解决页面性能问题，企业就必须知道用户在什么时候可以看到主要页面内容并与之进行交互;同时，企业还需了解性能和可用性问题是如何影响业务指标的。企业需要有方法获取实际的性能指标并对其进行分析。实时用户监控(RUM)工具可以从真实用户的角度实时获取、分析并记录网站的性能和可用性。
- 切勿过分依赖 CDN 解决所有性能问题
Radware 季度电商性能“行业现状”报告中存在一项最具争议性的调查结果，即：使用内容分发网络(CDN)的网站完成主要内容渲染所需的时间比未曾使用 CDN 的网站要长的多。这是一个相关性问题，而非因果关系：通常情况下，相较于未使用 CDN 的网站，使用 CDN 的网站页面更大，也更复杂。页面的大小和复杂程度才是造成性能问题的元凶，而非 CDN。但这一结果也表明，仅依靠 CDN 并不能解决所有的性能难题。
如果部署得当，CDN 会是解决延迟问题非常有效的工具：缩短托管服务器接收、处理并响应图像、CSS 文件等页面资源请求所需的时间。但是，延迟仅仅只是现代电商网站的关键问题之一。为了实现最佳的加速效果，网站运营人员可以采用组合解决方案：CDN+ 前端优化(如 Radware FastView 解决方案)+应用交付控制器(ADC)和内部管理。
- 在企业内部加强 Web 性能观念的宣传
大量研究证明，提高页面速度可以对所有的关键性能指标产生积极影响：页面访问量、用户粘连度、业务转化率、用户满意度、客户保持、购物车的内容多少和收入。
然而，正如上述 7 个建议中所表明的那样，许多企业都犯了同样的错误，最终损害了 Web 性能。目前，企业应该重点解决 Web 开发目标和在线业务目标之间的差距问题，而且，每个企业都应该至少拥有一个内部性能专家，以便更好的解决 Web 性能问题。
一、html方面
1.缩小favicon.ico并缓存；
2.样式放在页头，JS放在页尾；
3.减少DOM节点：加速页面渲染；
4.用LINK而不用@import方式导入样式；
5.给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；
6.链接为目录或首页的地址后面加”/”，如http://www.kokojia.com/；
7.正确的闭合标签：如避免使用，浏览器会多一个将它解析成<div\>的过程；
8.语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发；
9.防止src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载。
二、css方面
1.删除重复的CSS；
2.使用CSS缩写，减少代码量；
3.避免使用CSS Filter（CSS滤镜）；
4.减少查询范围：如.header>li要好过.headerli；
5.通过CSS Sprites把同类图片合成一张，减少图片请求；
6.减少查询层级：如.header.logo要好过.header.top.logo；
7.避免TAG标签与CLASS或ID并存：如a.top、button#submit；
8.避免使用CSS Expressions(CSS表达式)：如background-color:expression((newDate()).getHours()%2?“#B8D4FF”:“#F08A00″)。
三、Javscript方面
1.不使用EVAL；
2.删除重复的JS；
3.尽量少用全局变量；
4.避免频繁操作DOM节点；
5.使用事件代理绑定事件，如将事件绑定在body上进行代理；
6.对字符串进行循环操作，譬如替换、查找，应使用正则表达式；
7.减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；
8.类型转换：把数字转换成字符串使用“+1”，浮点数转换成整型使用Math.floor()或者Math.round()。
四、服务器方面
1.使用gzip压缩内容；
2.压缩CSS、JS文件，缩短文件传输时间；
3.为文件头指定Expires，使内容具有缓存性。
4.使用CDN加速，使用户从离自己最近的服务器下载文件；
5.尽量合并CSS、JS文件，或将其直接写在页面上，减少HTTP请求；
6.避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；
7.减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少Cookie的反复传输对主域名的影响；
8.一般要求减少DNS查询次数，如同一个页面的请求资源要尽量少的使用不同的主机名，可以减少网站并行下载的数量。但很多网站为了加速下载资源其实是特意用了多个主机名，这里要做一个权衡。
最后更新： 2019年10月13日 22:30
