另一方面，由于前端HTTP请求浏览器的同时线程数有限，关于资源文件的最优化，如下所示
1、合并脚本文件和CSS文件
2、CSS Sprites利用CSS background相关要素进行背景图的绝对定位，将多个图像合成为一个图像。
二、浏览器缓存在用户浏览网站不同页面时，有很多内容是重复的。 例如，相同的JS、CSS、图像等。 如果可以建议或强制浏览器在本地缓存这些文件，将大大减少页面产生的流量，从而缩短页面加载时间。
添加Expires标头和Cache-Control
Expires标头，浏览器端根据过期时间选择是否加载最新版本。 缺点是需要严格同步服务器和客户端时间，
HTTP1.1引入了Cache-Control头以克服Expires头的限制。 Cache-Control使用max-age指定组件的缓存时间(以秒为单位)。 例如，Cache-Control:max-age=3600； 表示组件将缓存60分钟。 如果同时显示max-age和Expires，max-age将具有较高的优先级，浏览器将根据max-age的时间检查缓存过期时间。 最后修改
在上次传输中，服务器向浏览器发送了最后修改或Etag数据。 再次浏览时，浏览器会将这些数据发送到服务器，验证本地版本是否为最新版本，如果为最新版本，则返回304代码，告诉浏览器直接使用本地版本。 否则，下载新版本。 一般来说，只有存在静态文件时，服务器端才会提供这些数据。 三.页面压缩GZIP
IE和Firefox浏览器都支持GZIP解码。 后端服务器容器对数据进行GZIP压缩，然后传输到客户端。 浏览器获得数据后，按照Content-Encoding:gzip进行解压缩。 这样会占用一些服务器和客户端CPU，但会增加带宽利用率。 在纯文本的情况下，压缩率相当大。 HTML压缩JS压缩混淆CSS压缩图像压缩，显示大小和图像大小一致的四. HTML代码结构的优化，正确配置内嵌脚本
尽可能使用外部脚本和样式文件，尽可能将脚本移动到底部并将脚本放置在顶部所引起的问题。
1 )使用脚本时，对于脚本下面的内容，阶段性的简报会被屏蔽
2 )在脚本下载中阻止并行下载
如果放置在底部，则可能会出现JS错误问题，如果未加载脚本，则用户将触发脚本事件。 所以必须综合考虑情况。 Script延迟加载默认属性(IE FF3.1 )，setTimeout
风险：内联脚本位于样式表的后面。
所有主要浏览器都将保留CSS和JavaScript的顺序。 在完全下载、分析和应用样式表之前，无法运行内联脚本。 此外，还必须运行内联脚本，然后下载剩余的资源。
CSS下载解析可以与其他资源同时执行。
不使用iframe
优点：可以与主页并行加载
缺点： iframe阻止onload事件的解析。 在onload事件后设置iframe的src，或由JS创建iframe节点
使用与主页相同的连接池
防止src为空-空的默认主页地址
减少DOM结构的层次
DOM级别越深，CSS规则树和DOM树匹配结构的性能越高
减少Cookie的大小
尽量用div替换table，或者将table破坏为嵌套层次结构的深层结构
table会影响页面的显示速度，只有在加载了table的所有内容后才能显示。
五、将组件划分为多个域的主要目的是提高页面组件的并行下载能力。 但是，建议采用两个子域名，不要跨越太多域名。
六、图片懒加载七、图片、脚本、数据预加载八、图片base64九、根据业务实际情况优化，确保第一屏加载时间。 前端优化可以避免不必要的服务器和带宽资源浪费，但随着网站访问量的增加，前端优化已经不能解决所有问题。 后端程序处理并发请求的能力、程序执行效率、硬件性能和系统可扩展性是影响网站性能和稳定性的重要瓶颈。