优化前要了解web基础知识：
web本质是一个基于B/S架构的GUI软件
当我们通过网络进行访问：是一个动态的，增量的加载静态资源的过程
浏览器的一个请求到返回都经历了什么？
整个过程有哪些可以优化的点？
1，dns是否可以通过缓存减少dns的查询时间
2，网络请求能否走最近的网络环境
3，相同的静态资源能否缓存能否减少http请求的大小
4，减少http请求次数
5，服务端渲染
html,css,js的渲染过程
一、静态资源
1，html,css,js压缩，js混淆，文件合合并
解答：具体操作参看webpake：https://mp.csdn.net/mdeditor/84071076#
2、关于图片
png,jpg,webp等压缩率，处理，此不赘述，如有特殊处理方式日后补充
二、html,css,js得渲染机制
html得渲染
1，顺序执行，并发加载
词法分析：从上大小解析tag
并发加载:发起资源请求时并发执行得
并发上限：但是并发请求资源有一个上限
2，加载阻塞
3，依赖关系
4，引入方式
css阻塞
1，css在head中需要全部加载完其中内容才会去进行页面渲染
2，同时阻塞之后引入得js执行
3，但是css不阻塞js得加载，比如：可能在页面渲染过程中js有脚本要操作原有css样式
js阻塞
js直接引入：会阻塞页面渲染，原因是js可能对文档结构进行修改
js不阻塞资源得加载：
js顺序执行，并且阻塞后续逻辑执行’
懒加载与预加载
懒加载:
方法：图片进入可视区域请求图片资源
场景：图片很多，且页面很长，
目的：减少在使用时，无效资源的加载
解决：并发加载资源过多，达到并发上限，阻塞js加载，影响功能
预加载:
方法：在使用之前，对静态资源如图片进行请求并缓存到用户终端中提升客户体验
原生写法
扫描二维码关注公众号，回复：
10182362 查看本文章
库写法 PreloadJS
