CSS和JS的加载与执行
HTML页面的加载
- 解析html请求
- html自上至下词法分析DOM树
- token
- 并发加载静态资源，JSV8引擎执行，CSS资源浏览器渲染CSS树
- 最后渲染
特点：
- 顺序执行，并发加载上限，多个cdn域名，防止并发资源太多
- 是否阻塞，CSS---JS
- 依赖关系，JS的执行顺序
- 引入方式：2个css，4个JS
CSS阻塞
- CSS head中阻塞页面渲染
- CSS 阻塞js执行
- CSS 不阻塞外部脚本的加载
JS渲染
- 直接引用JS阻塞页面的渲染
- JS不阻塞资源的加载
- JS顺序执行，阻塞后续js逻辑的执行
懒加载与预加载
懒加载
- 图片进入可视区域之后请求资源
- 页面长适用
- 减少无效资源的加载
- 并发加载的资源过多会阻塞JS的加载，影响网站的正常使用
预加载
- 图片等静态资源在使用之前的提前请求
- 资源使用奥是可以从缓存中加载，提升用户体验
- 页面展示的依赖关系维护
重绘与回流
- 一个线程js解析,一个线程UI渲染
- 频繁的触发重绘与回流,会导致UI频繁渲染,导致js变慢
- 重绘不一定回流,回流一定重绘
回流
- 页面布局变化,元素大小变化
- 当render tree中的一部分(或全部元素)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,就是回流
- 当页面布局和几何属性改变时就需要回流
重绘
- 当render tree中的一些元素需要更新属性,而这些属性只影响元素的外观,风格,而不会影响布局,比如:背景,则叫做重绘
- 外观属性变化
触发回流
- 盒模型,定位属性及浮动,节点内部文字结构
触发重绘
如何避免
- 避免使用触发重绘，回流的css属性
- 将重绘，回流的影响范围限制在单独的图层之内
浏览器存储
Cookie
- 初衷：cookie去维持客户端状态
- set-cookie提取cookie并存储
- 服务端通知客户端保存这个数据
- document.cookie可以读写cookie
- 作用：1.用于浏览器端和服务器端的交互 2.客户端自身存储数据
- 大小只有4kb，需设置过期时间expire
- httponly不支持js的读写，安全性的保证
- cookie中在相关域名下---cdn的流量损耗区文化课:解决方法———CDN的域名和主站的域名分开
LocalStorage
- html5设计的专门用于浏览器存储
- 5M
- 尽在客户端使用，不和服务器通信
- 借口封装好，读写操作
- 浏览器本地缓存方案
SessionStorage
- 会话级别的浏览器存储
- 5M
- 仅在客户端使用，不和服务端进行通信
- 接口封装好
- 用于表单信息的维护
indexedDB
- 存储大量结构化数据
- 创建应用离线版本
PWA
- 可靠：在没有网络环境中也能提供基本的页面访问，而不会出现‘没有连接到互联网’的页面
- 快速：针对网页渲染及网络数据访问有较好的优化
- 融入：应用可以被增加到手机桌面，并且和普通应用一样有全屏，推送等特性
缓存
- httpheader
Cache-Control
- max-age:缓存时间，在这段时间不用访问服务器
- s-maxage:从cdn中拿public数据，公共数据的过期时间，优先级高于max-age
- private：私人缓存
- public：公共数据
- no-cache：不会在浏览器直接读相关缓存，而是发请求到服务端进一步判断缓存是否过期
- no-store：不使用缓存
Expires
- 缓存的过期时间，用来指定资源的过期时间，服务端具体的时间点
- 告诉浏览器在过期时间前，浏览器可以直接从浏览器缓存取数据，而无需再次请求
- max-age 相对优先级更高
last-modified/if-modified-since
- 文件版本时间，未更改就是304，更改了返回200
- 协商缓存机制，可以去取到一个最新的更改，而不是直接读缓存
- 如果有max-age，则max-age优先级更高
- 缺点：1.某些服务端不能取得精确的修改时间 2.文件修改时间改了，可是内容没有修改，也会造成缓存失效
Etag/If-None-Match
- 有一个文件内容的hash值，文件内容改变hash才会改变
- 返回的ETag与之对比If-Node-Match
分级缓存策略
- 200状态(from cache) 由expires/cache-control控制
服务端性能优化
- 复杂运算可以用node.js代替
- vue-ssr
多层次的优化方案
- 构件层模板编译webpack构建
- 数据无关的prerender的方式
- 服务端渲染
