1.资源优化html,css,js压缩（去除无用代码，去除注释）可以使用在线网站压缩，node提供的html-minifiercss使用clean-css文件合并，压缩合并css和js可以减少网站http请求数2.异步加载async和defer，scrpit脚本是async异步的（加载顺序不是可能文档中的顺序）。如果脚本很小或来自缓存，它可能会在加载文档之前加载并执行。defer（合理的文档中的顺序）在文档加载解析之后执行，也就是DOMConetentLoaded之前。动态创建脚本标签functionaddScriptTag(src){varscript=document.createElement('script');script.setAttribute("类型","文本/javascript");脚本.src=src;document.body.appendChild(脚本);}window.onload=function(){addScriptTag("js/index.js");}3.Preloadingandlazyloading首屏加载优化，避免长空白页，减少等待时间，优化体验PreconnectPreconnect类似于DNS预分析。Preconnect不仅完成DNS预解析，还进行TCP握手，建立传输层协议。可以使用preload来提前加载，方法是向浏览器声明一个需要提交加载的资源（image,css,js），当资源实际使用的是立即执行，无需等待网络消耗当浏览器解析这行代码时，会加载href中相应的资源但不执行，实际使用时执行。另一种方法是在HTTP响应头中添加preload字段：Link:;rel=预加载；as=styleprefetchingPrefetchingandSubresourcesprefetching：如果我们确定某个资源将来会被使用，我们可以让浏览器预请求该资源，并放入浏览器缓存中，也就是如果我们猜测下一个用户具体会访问到哪些资源，那么就可以使用prefetching来预加载确定的资源。Priority(Subresources>Prefetching)预取资源的优先级最高，PrerenderPrerenderPrerender可以预加载文档的所有资源，类似于在隐藏的标签页中打开一个链接——它会下载所有资源、创建DOM结构、完成页面布局、应用CSS样式和执行JavaScript脚本等。当用户真正访问该链接时，隐藏页面会被切换为可见，使页面看起来是瞬间加载的。需要注意最重要的是不要滥用这个特性，预渲染只有在知道用户肯定会点击一个链接的情况下才能进行，否则浏览器会无条件下载预渲染需要的所有资源新特性:预加载不同于预取，预加载会让浏览器无论如何都会下载指定的资源，也就是说浏览器肯定会预加载资源。所有的预加载技术都存在一个潜在的风险：资源预测错误。预加载开销较大，如抢占CPU资源、耗电量、浪费带宽等，需谨慎操作。虽然很难确定用户接下来会访问哪些资源，但高置信度场景确实存在：如果A用户完成了搜索，结果很明显，那么结果页面很可能会被加载。如果用户转到登陆页面，则可能会加载登陆页面。如果用户阅读多页文章或访问分页结果集，则很可能会加载下一页。请注意，所有预加载技术都存在潜在风险：资源预测错误。预加载开销较大，如抢占CPU资源、耗电量、浪费带宽等，需谨慎操作。参考链接页面性能优化方法async和defer说明前端性能优化的preloading和lazyloading
