浏览器

2021-05-26 本文已影响0人 Chen_JF

浏览器

缓存

强缓存：也称为本地缓存，不向服务器发送请求，直接使用客户端本地缓存数据；

协商缓存：也称为304缓存，向服务器发送请求，由服务器判断请求文件是否发生改变。如果未发生改变，则返回304状态码，通知客户端直接使用本地缓存；如果发生改变，则直接返回请求文件。

协商缓存

强缓存

浏览器在加载资源时，会先根据本地缓存资源的 header 中的 expires 和 cahe-control 判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。

Expires：HTTP1.0，值为GMT格式的时间字符串，缓存过期时间，在这时间之前则命中缓存；是一个绝对时间，服务器时间和本地时间偏差大时候，缓存不能有效的命中；

Cache-Control：HTTP1.1，主要取值如下
- public：所有内容都将被缓存（客户端和代理服务器都可缓存）；
- private：所有内容只有客户端可以缓存，Cache-Control的默认取值；
- no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定；
- no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存；
- max-age=xxx（xxx is number）：缓存内容将在xxx秒后失效；
- must-revalidate：强制浏览器严格遵守你设置的cache规则；
- proxy-revalidate：强制proxy严格遵守你设置的cache规则；
协商缓存

Last-Modified与If-Modified-Since：HTTP1.0
- 首次请求；
- 服务器告知启用协商缓存规则,并在响应头带上 Last-Modified，告知缓存到期时间；
- 随后的每次请求，请求头都会携带 If-Modified-Since，该值等于上一次响应头中的 Last-Modified 的值；
- 服务器收到 If-Modified-Since 后，会将该属性的值与服务器上资源的最后修改时间进行匹配，从而判断资源是否发生了变化；
- 如果发生变化会返回一个完整的响应内容，在响应头中添加新的 Last-Modified 值，否则，只返回 header 部分，状态码为304，响应头不会再添加 Last-Modified；
  
  Last-Modified是感知文件修改时间，而且是秒级别；所以当文件内容未修改，但编辑时间修改了，则无法命中缓存；同样在毫秒内改变文件并请求，则会命中缓存，无法得到最新的文件；
  
  Etag与If-None-Match：HTTP1.1
  - 首次请求；
  - 服务器启用协商缓存情况下，会在响应头中带上 Etag；
  - 随后每次请求，请求头上都会带上 If-None-Match，该值等于上一次响应头中的 Etag 的值；
  - 服务器收到 If-None-Match 后，会进行比对，从而判断资源是否发生变化；
  - 如果变化返回一个完整响应内容，在响应头上添加新的 Etag 值，否则返回 304,响应头不会在添加 Etag
    
    Etag 的生成需要服务器付出额外的开销，会影响服务端性能
不能缓存的请求
- HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache（HTTP1.0），或Cache-Control:max-age=0等告诉浏览器不用缓存的请求；
- 需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的；
- 经过HTTPS安全加密的请求；
- POST请求无法被缓存；
- HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存；
重定向

301：永久移动，请求的资源已被永久的移动到新的URL，返回信息会包括新的URL，浏览器还会自动定向到新的URL，今后任何新的请求都应该使用新的URL来代替；

302：临时移动。与301类似，但是资源只是临时被移动，客户端应该继续使用原有的URI；

304：未修改，所请求的资源未修改，服务器返回此状态码时，不会返回任何资源；客户端通常会缓存所访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源；

输入URL到页面呈现过程
- DNS解析
  
  ①、浏览器缓存
  
  ②、系统DNS缓存
  
  ③、路由器缓存
  
  ④、ISP(运营商)DNS缓存
  
  ⑤、迭代递归查询DNS
- HTTP请求
  
  ①、生成请求报文
  
  ②、TCP三次握手建立连接
  
  ③、服务端响应发送内容
  
  ④、客户端接收响应内容
  
  ⑤、TCP四次挥手断开连接
- 浏览器解析渲染页面
  
  ①、解析HTML、CSS，构建DOM Tree和CSSOM Tree
  
  ②、根据DOM Tree和CSSOM Tree，构建Render Tree
  
  ③、根据Render Tree，构建生成RenderLayer树布局（计算每个节点信息、确认布局位置）
  
  ④、渲染：绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上；
跨域
- 域：由协议、域名、端口组成；
- 跨域：因为浏览器出于安全考虑，有同源策略，所以浏览器从一个域的网页去请求另一个域的资源时就是跨域；
- 跨域解决方案：
  
  ①、JSONP：利用script标签，只支持get请求，存在xss安全隐患，需要服务端配合改造；
  
  ②、CORS：利用请求header Access-Control-Allow-Origin 控制来源域实现跨域；
  
  ③、反向代理：nginx、node等；
同源策略

浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。从一个域上加载的脚本不允许访问另外一个域的文档属性；同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

要求同源：Ajax请求、cookie、LocalStorage、IndexDB、DOM操作
HTTP1、HTTP1.1、HTTP2、HTTP3
- HTTP1.0：TCP短连接，可以利用Connection: keep-alive保持
- HTTP1.1：持久链接，多数浏览器建立6个连接，然后将请求压队执行，可能造成队头阻塞
- HTTP2.0：二进制分帧协议、多路复用、头部压缩、服务器推送、流控，单个TCP连接、队头阻塞问题会影响整个连接
- HTTP3.0：QUIC，UDP+多路复用+安全加密+拥塞控制，不需要建联断连的开销
跨域如何处理cookie
- 前端的请求用jsonp的形式
- 前端加上配置：
  
  xhrFields: { withCredentials: true },
  
  服务端加上配置：
  
  header('Access-Control-Allow-Credentials: true');
cookie SameSite
- Strict：严格模式，cookie不能跨域使用
- Lax：允许部分第三方请求携带cookie（a标签链接、预加载link、get表单）
- None：无论是否跨站都会发送cookie
首屏加载优化
- 使用CDN资源，vue、vue-router、vuex、element-ui等从vendor.js中分离出来，使用CDN资源引入（国内推荐BootCDN）；
- 开启gzip压缩，nginx开启gzip压缩；
- vue-router使用懒加载，异步方式分模块加载文件，配置chunkFilename；
- 图片资源压缩，icon资源使用雪碧图/iconfont；
- webpack配置优化，用uglifyjs-webpack-plugin压缩js文件，清除log日志和注释，配置SplitChunks抽取公共代码；使用mini-xss-extract-plugin提取CSS 到单独的文件, 并使用optimize-css-assets-webpack-plugin来压缩CSS文件；
- 骨架屏
- SSR、node聚合
网页从请求到呈现花了很长时间，如何排查

可以用Chrome dev-tools中的performance工具，截取第一个白屏到渲染完成的过程；可以看到loading、scripting、rendering、painting、system、idle的时间花费分布；
Web Components

Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们

<body>
  <user-card></user-card>
  <template>...</template>

  <script>
    class UserCard extends HTMLElement {
      constructor() {
        super();
        var templateElem = document.getElementById('userCardTemplate');
        var content = templateElem.content.cloneNode(true);
        this.appendChild(content);
      }
    }
    window.customElements.define('user-card', UserCard);    
  </script>
</body>

Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突

class UserCard extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow( { mode: 'closed' } );

    var templateElem = document.getElementById('userCardTemplate');
    var content = templateElem.content.cloneNode(true);
    content.querySelector('img').setAttribute('src', this.getAttribute('image'));
    content.querySelector('.container>.name').innerText = this.getAttribute('name');
    content.querySelector('.container>.email').innerText = this.getAttribute('email');

    shadow.appendChild(content);
  }
}
window.customElements.define('user-card', UserCard);

HTML templates（HTML模板）： <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用

浏览器

浏览器

猜你喜欢

热点阅读