web页面性能优化系列（1）懒加载和预加载

优化前要了解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加载，影响功能


预加载:
方法：在使用之前，对静态资源如图片进行请求并缓存到用户终端中提升客户体验

原生写法

库写法 PreloadJS