jsp预加载转圈_页面性能（异步加载、缓存，首屏加载，操作dom慢）

* [ ] 题目：提供页面性能的方法有哪些？

* 资源优化

1. 资源**压缩合并**，减少http请求(js合并)(gzip)(css合并，图片处理css：cssSprite，打包成base64格式)

2. 非核心代码**异步加载**==》异步加载方式==》异步加载的区别

3. 非核心代码也可按需加载(需要的时候才会加载，和异步加载不同)

4. 利用**浏览器缓存**(减少请求)(最重要的一步)==》缓存的分类==》缓存的原理

4. 使用CDN(网络优化，最快的下载资源)(为什么？CDN是不同区域的网络优化，北京访问地址，会就近找到CND进行加载)(距离远走的路由器比较多)

5. 使用webpack的tree Shaking，删除无用代码

5. 预解析DNS(DNS解析)

~~~

~~~

页面中a标签默认预解析，https开头的协议，很多浏览器默认关闭预解析，meta是用来打开预解析。

6. 使用SSR后端渲染，数据直接输出到HTML中(以前ssr：server site render，jsp，php，asp)

* 构建工具优化(webpack为例)

1)js，css代码压缩(optimize-css-assets-webpack-plugin)，css提取？

2)Tree Shaking：把一个模块里没用到的东西都摇晃掉。

3)Code Splitting：(代码分割，异步加载)

4)懒加载：通过import异步的加载模块

5)Preloading，Prefething：Prefething(利用空闲时偷偷下载代码。(首屏快，打开模态框快))

6)Webpack与浏览器缓存(Caching)：打包后的文件会放在服务器上，如果重新打包，会生成相同的js文件名，此时用户会走浏览器中的缓存，页面逻辑不会更新

7)打包文件过大：公共代码拆分

* [ ] 首屏加载优化(渲染优化)

1)尽可能提高CSS加载速度

使用CDN；对CSS压缩(webpack压缩)；减少http请求(多个css合并，css精灵)；放入head中；合理使用缓存(cache-control，expires，E-tag，可在后面加版本号)。

2)JS优化

js文本放入body底部(或者defer，async)；

按需加载；

* [ ] 渲染优化