分享几个资源
原理
渐进加载
PerformanceNavigationTiming interface
浏览器进程
关键渲染路径（Critical Rendering Path）
the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites.
几个概念
对象模型（Object Model）
渲染树构建，布局和绘制
渲染阻塞（Rendering Blocking）
解析阻塞（Parser Blocking）
分析关键渲染路径性能
优化关键渲染路径
其他
- prefetch 和 preload
- async 和 defer
- console.time的使用 performance.mark 的使用
基本思路
- 减少请求数
- 减少资源体积
- 提升网络传输速率
- 浏览器缓存 浏览器默认的缓存是放在内存内的，但我们知道，内存里的缓存会因为进程的结束或者说浏览器的关闭而被清除，而存在硬盘里的缓存才能够被长期保留下去。很多时候，我们在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
书籍推荐
- 大型网站性能监测、分析与优化