浏览器工作原理与前端性能优化
浏览器相关知识
luckybing~
一个积极向上、乐观开朗、遇到Bug想一晚上、没秃顶、会写段子的web前端工程师
展开
-
缓存(强缓存、协商缓存)
(1)缓存相关强缓存:不会向服务器发请求协商缓存:向服务器发请求,由服务器判断是否走缓存,标识是状态码是否是 304,如果是 304,则从本地缓存中取资源,如果不是,则从服务端从新请求资源强缓存和协商缓存的共同点就是:第一次请求的数据或者是资源都需要向浏览器缓存中存一下(2)做什么类型的缓存是由服务端说了算的,服务端把决定放在响应头里expires 相当于过期具体的年月日过期时间,是时间点,而 cache-control 相当于保质期,存活的时间,是事件段,它的优先级..原创 2020-09-13 13:36:39 · 256 阅读 · 0 评论 -
浏览器缓存
1. 监听 storage 变动 (跨页签通信)window.addEventListener('storage', (event) => { console.log(event.newValue) })必须是同源的两个页面,拿vue脚手架为例index.vue:<template> <div class="hello"> <input type="text" v-model="name"> <but原创 2020-09-13 11:03:24 · 2327 阅读 · 0 评论 -
重排与重绘
浏览器渲染过程的第(4)(5)步Layout:元素排列 ---- 排列 ----再次排列(重排)Paint:元素绘制 ----- 绘制 ---- 再次绘制(重绘)css 图层:如何看图层:Paint Count 绘制次数(2)重绘是以图层为单位,如果图层中某个元素需要重绘,则整个图层都需要重绘重绘不一定重排、重排一定会重绘重排重绘的常见操作:1. 增、删、改 DOM 节点的时候2. 移动 DOM 位置3. 更改 css 样式4. window.res.原创 2020-09-12 18:58:11 · 187 阅读 · 0 评论 -
关于 js 阻塞
1. 阻塞后续DOM的解析如果后续DOM节点加载完了,结果这个js执行一大堆把这个DOM节点删除了,js 就白解析了,做了无用功,所以 js 会阻塞后续DOM的解析2. 阻塞后续js的执行依赖关系,一个依赖一个3. 阻塞页面渲染js 也可以更改DOM的样式、值等等,所以避免做无用功,阻塞DOM渲染这个场合经常遇见,如果js报错了,页面白屏了...原创 2020-09-12 17:26:56 · 1356 阅读 · 0 评论 -
style 样式的渲染
(一)解析 style 内联样式1. style 标签里的样式是异步解析的,容易产生“闪屏”现象,浏览器加载资源是异步的,边加载边渲染下面就是加载 style 内联标签的纪录,内联标签必须足够大,6000多行差不多吧,可以看出是一边加载html,一边解析,加载一点,解析一点,html 中的 style 内联标签是用HTML 解析器解析的加载一点 解析一点就会产生 “闪屏” 现象,HTML 是异步解析的,不会阻塞浏览器渲染,不会阻塞DOM解析(二)link 标签外链css文件Par原创 2020-09-12 16:18:09 · 965 阅读 · 1 评论 -
浏览器的基本模块以及渲染
(1)浏览器内核(渲染引擎)在浏览器中有一个最重要的模块,它主要把一切请求回来的资源变为可视化的图像,这个模块就是浏览器内核,通常也被称为渲染引擎。这让我想起了在工作中做项目的时候,遇到视频自动播放问题,在 video 标签中设置了 autoplay 为 true,但是有的浏览器能够自动播放,有的浏览器就不能,这时候同事说是浏览器内核不同,这就是原因吧(2)浏览器渲染引擎一个渲染引擎主要包括:HTML解析器、CSS解析器、javascript 引擎、布局 Layout 模块、绘图模块还有原创 2020-09-12 11:18:20 · 437 阅读 · 0 评论 -
页面性能工具:Performance?
(一)打开Performance 标签,最终效果如下图所示:上图区域 2 和区域 3,有两个按钮,上面那个黑色按钮是用来记录交互阶段性能数据的,下面那个带箭头的圆圈形按钮用来记录加载阶段的性能数据。(二)报告页报告页面主要分为三个部分,概览面板、性能面板和详情面板。里面包括了很多指标。。。...原创 2020-05-23 00:02:40 · 191 阅读 · 0 评论 -
WEB性能分析
(一)什么是web性能?Web 性能描述了 Web 应用在浏览器上的加载和显示的速度。(二)web性能查看工具Chrome 为我们提供了非常完善的性能检测工具:Performance 和 Audits,它们能够准确统计页面在加载阶段和运行阶段的一些核心数据,诸如任务执行记录、首屏展示花费的时长等,(三)Audits 使用:利用 Audits 生成 Web 性能报告在Chrome无痕模式下,(Chrome开启无痕模式,右侧三个点,打开新的无痕窗口)我们需要先配置 Audits,配.原创 2020-05-22 23:52:58 · 1466 阅读 · 0 评论 -
Chrome开发者工具:利用网络面板做性能分析
(一)浏览器开发者工具面板功能1. 网络面板网络面板由控制器、过滤器、抓图信息、时间线、详细列表和下载信息概要这 6 个区域构成(如下图所示)。(1)控制器其中,控制器有 4 个比较重要的功能1. 红色圆点的按钮,表示“开始 / 暂停抓包”2.“全局搜索”按钮,可以在所有下载资源中搜索相关内容,还可以快速定位到某几个你想要的文件上。3. Disable cache,即“禁止从 Cache 中加载资源”的功能,它在调试 Web 应用的时候非常有用,因为开启了 Cache原创 2020-05-21 22:09:48 · 735 阅读 · 0 评论 -
async/await:使用同步的方式去写异步代码
(一)async/await 使用了 Generator 和 Promise 两种技术1.Generator 生成器函数原创 2020-05-22 23:15:04 · 849 阅读 · 0 评论 -
宏任务、微任务
1.页面中的大部分任务都是在主线程上执行的,这些任务包括了:渲染事件(如解析 DOM、计算布局、绘制);用户交互事件(如鼠标点击、滚动页面、放大缩小等);JavaScript 脚本执行事件;网络请求完成、文件读写完成事件。为了协调这些任务有条不紊地在主线程上执行,页面进程引入了消息队列和事件循环机制,渲染进程内部会维护多个消息队列,比如延迟执行队列和普通的消息队列。然后主线程采用一个 for 循环,不断地从这些任务队列中取出任务并执行任务。我们把这些消息队列中的任务称为宏任务。.原创 2020-05-18 23:36:27 · 337 阅读 · 0 评论 -
同步回调、异步回调
1. js为什么是单线程? 其实,JavaScript的单线程,与它的用途是有很大关系,JavaScript作为浏览器的脚本语言,主要用来实现与用户的交互,利用JavaScript,可以实现对DOM的各种各样的操作,如果JavaScript是多线程的话,一个线程在一个DOM节点中增加内容,另一个线程要删除这个DOM节点,那么这个DOM节点究竟是要增加内容还是删除呢?这会带来很复杂的同步问题,因此,JavaScript是单线程的2. 同步、异步同步任务是指在主线程上排队执行的任务,只有...原创 2020-05-18 23:00:57 · 179 阅读 · 0 评论 -
(四)setTimeout 是如何实现的
1. 为了支持定时器的实现,浏览器增加了延时队列2. 通过 JavaScript 创建一个定时器时,渲染进程会将该定时器的回调任务添加到延迟队列中3. 处理完消息队列中的一个任务之后,就开始执行延迟队列里面的任务。延迟队列会根据发起时间和延迟时间计算出到期的任务,然后依次执行这些到期的任务。等到期的任务执行完成之后,再继续下一个循环过程。通过这样的方式,一个完整的定时器就实现了4.使用 setTimeout 的一些注意事项(1)如果当前任务执行时间过久,会影响定时器任务的执行(2)...原创 2020-05-17 14:48:21 · 351 阅读 · 0 评论 -
(三)消息对列与事件循环
(一)事件循环要想在线程运行过程中,能接收并执行新的任务,就需要采用事件循环机制引入了事件循环机制,可以让其在执行过程中接受新的任务,监听是否有新任务生成事件循环系统就是在监听并执行消息队列中的任务(二)消息队列消息队列是一种数据结构,可以存放要执行的任务。它符合队列“先进先出”的特点,也就是说要添加任务的话,添加到队列的尾部;要取出任务的话,从队列头部去取。(三)队列 + 循环从上图可以看出,可以分为下面三个步骤:1. 添加一个消息队列2. IO 线程中产生原创 2020-05-17 14:31:19 · 212 阅读 · 0 评论 -
(二)TCP协议:如何保证页面文件能被完整送达浏览器?
1.在衡量 Web 页面性能的时候有一个重要的指标叫“FP(First Paint)”,是指从页面加载到首次开始绘制的时长。2. 互联网中的数据是通过数据包来传输的。如果发送的数据很大,那么该数据就会被拆分为很多小数据包来传输。(一)IP:把数据包送达目的主机计算机的地址就称为 IP 地址,访问任何网站实际上只是你的计算机向另外一台计算机请求信息。每一台计算机都有唯一的ip地址(二)UDP:把数据包送达应用程序“用户数据包协议(User Datagram Protocol)”,简称 ..原创 2020-05-17 14:12:52 · 274 阅读 · 0 评论 -
(一)Chrome架构:仅仅打开了1个页面,为什么有4个进程?
(1)什么是并行处理计算机中的并行处理就是同一时刻处理多个任务(2)进程和线程线程是不能单独存在的,它是由进程来启动和管理的一个进程就是一个程序的运行实例。详细解释就是,启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程。多线程可以并行处理任务线程是依附于进程的,而进程中使用多线程并行处理能提升运算效率。进程由多个线程构成(3)进程和线程之间的关系有以下 4 个特点1. 进程中的任意一线程执行出原创 2020-05-17 13:48:49 · 747 阅读 · 0 评论