async和defer
defer 是异步加载资源，但是会在文档渲染完毕，DOMContentLoaded事件执行前执行。等待所有的脚本加载完后按照顺序执行。如果页面有两个defer标记的script，他们会按他们在页面的顺序执行。
浏览器会重新开一个线程来进行网络下载。
defer只适用于外联脚本，如果script标签没有指定src属性，只是内联脚本，不要使用defer- 如果有多个声明了
defer的脚本，则会按顺序下载和执行 defer脚本会在DOMContentLoaded和load事件之前执行
async 也是异步加载资源，如果页面存在多个async标记的script标签。async 是在谁加载完了，谁就执行，并不保证顺序。且不一定在dom渲染完成前执行或者加载完成。
- 只适用于外联脚本，这一点和
defer一致 - 如果有多个声明了
async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序 async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序
js延迟加载的方式
- defer和async
- 动态创建dom
- 使用setTimeout
- 让js最后加载
gzip
请求头中有个Accept-Encoding来标识对压缩的支持。
客户端http请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到服务端的时候，服务器解析请求头，如果客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照自己的方式解析，在http响应头，我们可以看到content-encoding:gzip，这是指服务端使用了gzip的压缩方式。
阻塞问题
CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。
JS 阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源。
浏览器遇到 <script>且没有defer或async属性的 标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。
因此，<script>最好放底部，<link>最好放头部，如果头部同时有<script>与<link>的情况下，最好将<script>放在<link>上面。
性能优化
content方面
- 减少HTTP请求:合并文件、CSS精灵、inline lmage
- 减少DNS查询: DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法: DNS缓存、将资
源分布到恰当数量的主机名，平衡并行下载和DNS查询 - 避免重定向:多余的中间访问
- 使Ajax可缓存
- 非必须组件延迟加载、未来所需组件预载
- 减少DOM元素数量
- 将资源放到不同的域下:浏览器同时从一个域下载，资源的数目有限，增加域可以提高并行下载量
- 减少iframe数量
- 不要404
server方面
- 使用CDN
- 添加Expires或者Cache-Contro响应头
- 对组件使用Gzip压缩
- 配置ETag
- Flush Buffer Early
- Ajax使用GET进行请求
- 避免空src的img标签
- 浏览器渲染页面原理，服务端渲染
cookie方面
- 减小cookie大小
- 引入资源的域名不要包含cookie
css方面
- 内联首屏关键CSS
- 将样式表放到页面顶部
- 不使用CSS表达式
- 不使用IE的Filter
js
- 将脚本放到页面底部
- 将javascript和css从外部引|入
- 压缩javascript和css
- 删除不需要的脚本，精简js脚本内存的管理，堆栈的释放
- 减少DOM访问
- 合理设计事件监听器
图片
- 优化图片:根据实际颜色需要选择色深、压缩
- 优化css精灵
- 不要在HTML中拉伸图片
- 保证favicon.ico小并且可缓存
项目白屏
产生原因
1、css文件加载需要一些时间，在加载的过程中页面是空白的。 解决：可以考虑将css代码前置和内联。
2、首屏无实际的数据内容，等待异步加载数据再渲染页面导致白屏。 解决：在首屏直接同步渲染html，后续的滚屏等再采用异步请求数据和渲染html。
3、首屏内联js的执行会阻塞页面的渲染。 解决：尽量不在首屏html代码中放置内联脚本。
解决
根本原因是客户端渲染的无力，因此最简单的方法是在服务器端，使用模板引擎渲染所有页面。同时
- 减少文件加载体积，如html压缩，js压缩，css压缩
- 加快js执行速度 比如常见的无限滚动的页面，可以使用js先渲染一个屏幕范围内的东西，js文件放底部，放置阻塞
- 提供一些友好的交互，比如提供一些假的滚动条
- 使用本地存储处理静态文件。
- Vue-Router路由懒加载
- 图片懒加载、雪碧图，采用webp格式图片
处理后端的1w数据
增强用户体验感：设置一个loading
- 分页渲染，把数据根据limit分成
Math.ceil(total/limit)页，使用requestAnimationFrame，利用文档碎片，添加元素。 - 懒加载
ie和chrome
谷歌的 chrome 浏览器和 IE 浏览器的区别是什么？哪个好用
区别对比：
内存占用：IE较少，chrome较多，IE更加轻巧。
功能：chrome支持全部HTML5和CSS3功能，能够展现所有网页特效和高级功能。IE对这些功能支持不好。
兼容：IE能够安全地进入各个网银进行支付操作，chrome不被某些网银支持。
硬件：chrome支持硬件加速，IE不支持。
扩展：chrome能安装扩展软件如屏蔽广告等等，IE没有此功能。
启动速度：IE由于更加轻盈，启动较快。
建议两个浏览器同时保留，平时上网的时候用chrome，需要进行网银支付的时候用IE。
