首页  思维导图  详情

浏览器如何工作&浏览器工作链路环节性能优化（写代码时就能做）

2021-12-31 11:24:41   0  举报





AI智能生成

浏览器如何工作&浏览器工作链路环节性能优化

前端

浏览器原理

性能优化

作者其他创作

大纲/内容

网络延迟

浏览器的单线程

性能面临的两个问题

少加载文件

少执行代码

性能优化两大方向

概述

淘宝网的例子

DNS 预获取

优化策略

1.1 DNS 查询

1.2 TCP 三次握手建立连接/双向通道

1.3 TLS 协商

After thefont color=\"#0076b3\

图示总结

长连接

webpack-spritesmith 插件

雪碧图

js、css 打包

The Access-Control-Max-Age 这个响应头表示 preflight request （预检请求）的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息）可以被缓存多久。但只针对完全一样的 url，如果是 get 请求，url 后面参数变化则 url 也变化了不生效。

Access-Control-max-age

由协商缓存改为强制缓存

浏览器缓存控制

一开始只请求首屏必要的，其他的按需加载。

代码拆分

JavaScript

CSS

<img>元素上的加载属性（或<iframe>上的加载属性）可用于指示浏览器延迟加载屏幕外的图像/iframe，直到用户在其附近滚动。加载事件在急切加载的内容已全部加载时激发；在那个时候，可能在视觉视口（en-US）中存在尚未加载的延迟加载图像。通过检查给定图像的complete属性的值，可以确定该图像是否已完成加载。

loading 属性

js 实现

图片与 iframe

懒加载

本地存储

减少文件请求次数

1. 与Web 服务器建立连接（这个流程里没有讲关闭连接，关闭连接与性能没啥关系）

font color=\"#0076b3\

TCP Slow Start / 14kb rule

Congestion control

可以根据生成的图来找出并优化大的包。可以将常用的稳定的包如 vue vue-router 单独打包？打包到 runtime 里？？，这样可以有效利用缓存。

webpack-bundle-analyzer 插件

分析文件大小

一般减少包体积的方法是按需加载

js、css 打包压缩

图片压缩

1. 有损压缩2. 体积小 3. 不支持透明

适用于背景图、轮播图

jpg

1. 无损压缩，质量高2. 支持透明

适用于小图，比如logo，商品icon

png

1. 无损压缩2. 矢量模式3. 体积小4. SVG文件是用XML编写的，其展示的效果可以在运行时改变。

适用于小logo和图标。因为无论是Retina屏幕或在其他低清晰度的屏幕上它的形状都是一样的。SVG文件的大小通常是极小的，即使它们看起来的样子真的很大。

svg

https://www.jianshu.com/p/c66f52d875d9

参考

图片类型选择

图片优化

Gzip 是一种用于文件压缩与解压缩的文件格式。它基于 Deflate 算法，可将文件压缩地更小，从而实现更快的网络传输。 Web服务器与现代浏览器普遍地支持 Gzip，这意味着服务器可以在发送文件之前自动使用 Gzip 压缩文件，而浏览器可以在接收文件时自行解压缩文件。

gzip 原理

Compression is enabled via webserver configurationDifferent web servers have different instructions (explained below)

webpack devServer

服务端

accept-encoding:gzip

客户端请求头

开启 gzip

gzip

减少文件体积

cdn

减少用户和服务器的距离

2. 请求与响应

解析是浏览器将通过网络接收的数据转换为DOM和CSSOM的步骤，渲染器使用DOM和CSSOM在屏幕上绘制页面。即使请求页面的HTML大于最初的14KB数据包，浏览器也将开始解析并尝试根据其拥有的数据呈现体验。这就是为什么web性能优化需要在最初的14千字节中包含浏览器开始呈现页面所需的一切，或者至少包含页面模板（第一次呈现所需的CSS和HTML）。但是在将任何内容呈现到屏幕之前，必须对HTML、CSS和JavaScript进行解析。

处理 HTML 标记并构建 DOM 树

an imagea CSS file

不会导致暂停HTML解析的资源

之所以对 <script> 标签应用阻塞式的解析策略，是因为 JS 拥有改变 HTML 文档结构的权限。

非异步的 <script> 标签

导致暂停HTML解析的资源

HTML 解释器将 HTML 文档解析为 DOM 树

当浏览器构建DOM树时，这个过程会占用主线程。这时，预加载扫描程序将解析可用的内容，并请求诸如CSS、JavaScript和web字体等高优先级资源。由于有了预加载扫描程序，我们不必等到解析器找到对外部资源的引用后再请求它。它将在后台检索资源，以便在主HTML解析器到达请求的资产时，它们可能已经在运行中，或者已经被下载。预加载扫描仪的优化可减少堵塞。

为确保脚本不会阻止进程，如果JavaScript解析和执行顺序不重要，请添加 async 或者 defer属性。

script 元素的 async 与 defer attribute

字体

预加载扫描仪（Preload scanner）

the total time to create the CSSOM is generally less than the time it takes for one DNS lookup.

CSS 解释器将 CSS解析为 CSSOM

服务端渲染

JavaScript Compilation

Building the Accessibility Tree

Other Processes

3. 解析

渲染步骤包括样式、布局、绘制，在某些情况下还包括合成。在解析步骤中创建的CSSOM和DOM树被组合成一个渲染树，用于计算每个可见元素的布局，然后绘制到屏幕上。在某些情况下，可以将内容提升到自己的层并进行合成，通过在GPU而不是CPU上绘制部分屏幕来提高性能，因为这样能释放主线程。