分享几个资源
原理
渐进加载
关键渲染路径（Critical Rendering Path）
the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites.
几个概念
其他
- console.time的使用 的使用
基本思路
- 减少请求数
- 减少资源体积
- 提升网络传输速率
- 浏览器缓存 浏览器默认的缓存是放在内存内的，但我们知道，内存里的缓存会因为进程的结束或者说浏览器的关闭而被清除，而存在硬盘里的缓存才能够被长期保留下去。很多时候，我们在network面板中各请求的size项里，会看到两种不同的状态：from memory cache 和 from disk cache，前者指缓存来自内存，后者指缓存来自硬盘。而控制缓存存放位置的，不是别人，就是我们在服务器上设置的Etag字段。在浏览器接收到服务器响应后，会检测响应头部（Header），如果有Etag字段，那么浏览器就会将本次缓存写入硬盘中。
之所以拉取缓存会出现200、304两种不同的状态码，取决于浏览器是否有向服务器发起验证请求。 只有向服务器发起验证请求并确认缓存未被更新，才会返回304状态码。
webpack打包
- js压缩
- html压缩
- css压缩
- gzip
etag on; //开启etag验证expires 7d; //设置缓存过期时间为7天复制代码
【！！！特别注意！！！】在我们配置缓存时一定要切记，浏览器在处理用户请求时，如果命中强缓存，浏览器会直接拉取本地缓存，不会与服务器发生任何通信，也就是说，如果我们在服务器端更新了文件，并不会被浏览器得知，就无法替换失效的缓存。所以我们在构建阶段，需要为我们的静态资源添加md5 hash后缀，避免资源更新而引起的前后端文件无法同步的问题。 2. 压缩 PS：这里有一个技巧，在我们书写HTML元素的src 或 href 属性时，可以省略协议部分，这样也能简单起到节省资源的目的。
gzip on;gzip_types text/plain application/javascriptapplication/x-javascripttext/css application/xml text/javascriptapplication/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;复制代码
图片处理
- 不要缩放图片
- sprite
- iconfont
- webp
书籍推荐
- 大型网站性能监测、分析与优化