现在的业务往往是B/S架构。 客户端页面通过http请求与服务器端通信，在这个循环里，前端能做的点有两个

1. 网络请求方面
   • CDN(Content Delivery NetWork)
     在各个地方搭建相关服务器，由中心服务器来对各服务器做数据同步。DNS会解析到最近的IP进行TCP/IP链接，发起http请求。
   • 浏览器缓存
     首先这方面是从服务器端进行设置，相关内容会放在response的头信息里。缓存分强缓存、协商缓存。强缓存则请求头里带有cache-control:max-age=时长、expires: 过期时间，浏览器一般只接受其中之一，接收到则一定缓存。协商缓存有请求头带有if-none-match:浏览器中该文件的标签，服务器端会拿取当前文件的etag与请求头中的标签对比，相同则返回304标识可用。请求头带有if-modified-since:最后一次更新时间，响应头信息中带有last-modified:最后一次更新时间，源头服务器认定的资源做出修改的日期及时间。 通过两个时间比较觉得是否需要更新文件。
   • http2
     http1每次请求都要进行一次http链接（三次握手四次挥手），同时浏览器最多发送6个并行的请求，http2则会复用原有链路进行通信。http1是用文本形式携带信息，http2数据压缩后以帧的形式发送信息。
   • webpack
     通过webpack配置可以有效减小生成的包的大小。
2. 高效加载渲染数据
   • 将CSS文件放在文件头部，js放在底部
     优先渲染出页面再执行优先级低的js。 tip:script标签上没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
   • 字体图标
   • giz压缩
   • 图片懒加载
   • 图片压缩
   • css动画替换拖
   • 按需加载
     现在的import可以做到当需要使用的时候import组件，而不是再文件顶部先import好。
   • 减少重绘重排
     不涉及尺寸方面的css样式修改引起重绘，设计尺寸的修改引起重排，重排一定引起重绘
   • SSR(服务端渲染)
     服务端渲染方案 VUE->nuxt、react->next
   • SSG(静态站点生成方案)
     Gridsome、Gatsby。 一次性将所有路由对应的html都生成。

web类型应用优化方式很多，大体分两类。