美文网首页前端性能
从浏览器结构和原理说优化

从浏览器结构和原理说优化

作者: 9吧和9说9话 | 来源:发表于2020-01-11 20:20 被阅读0次

浏览器组成

浏览器组成 来自网络
具体参考:https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about

从进程、线程角度来看

浏览器中进程、线程

Browser主进程

  • 负责浏览器界面显示,与用户交互。如前进,后退等

  • 负责各个页面的管理,创建和销毁其他进程

  • 将Renderer进程得到的内存中的Bitmap,绘制到用户界面上

  • 网络资源的管理,下载等

Renderer进程

  • 一般而言,浏览器每新建一个tab,就是一个独立的renderer进程。
  • 内部是多线程实现的
  • 负责 DOM,CSS,解析构建,JS 解析执行,事件处理等
  • 主要包含:GUI 渲染线程、js引擎线程、定时器线程、异步http线程、事件触发线程等
  • GUI线程和JS引擎线程互斥:当解析执行JS的时候,GUI渲染线程将被挂起阻塞
  • CSS的加载和解析不会阻塞DOM树的构建, 但是render树的构建依赖css tree,所以会阻塞最终的页面渲染

关于css,js加载和渲染显示过程 实例代码

参考

  1. 浏览器的工作原理

相关文章

  • 从浏览器结构和原理说优化

    浏览器组成 从进程、线程角度来看 Browser主进程 负责浏览器界面显示,与用户交互。如前进,后退等 负责各个页...

  • CSS动画

    Get Started • 动画的原理• 浏览器渲染原理• CSS动画优化• transform全解• trans...

  • 公开课一、浏览器渲染原理 ------ 2020-03-07

    1、知识铺垫: 2、框架性叙述浏览器渲染原理: 3、根据浏览器的渲染原理我们能做的性能优化:

  • 9.淘宝SEO优化原理结构浅析之二

    淘宝SEO优化原理结构浅析之二 淘宝SEO优化原理结构浅析图1-1 搜索降权行为:淘宝反作弊系统根据商家作弊数据的...

  • 前端知识结构

    前端不止:Web性能优化 – 关键渲染路径以及优化策略前端必会!四步带你吃透浏览器渲染基本原理 浏览器备注浏览器事...

  • 从输入URL到页面渲染完成

    从输入URL到页面渲染完成 涉及网络、浏览器工作原理等知识。 前序知识 浏览器进程结构 一、URL 包含:协议名、...

  • JavaScript是如何工作的: CSS 和 JS 动画底层原

    摘要: 理解浏览器渲染。 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的...

  • 05.存储篇 2:本地存储——从 Cookie 到 Web St

    内容出自前端性能优化原理与实践,我作为笔记简单记录下。 从 Cookie 说起 Cookie 就是一个存储在浏览器...

  • 前端-浏览器如何运作的

    前端为什么要了解浏览器工作原理? 写出更好的代码和提供更好的用户体验 浏览器结构 用户界面浏览器引擎渲染引擎(可以...

  • 后端技术栈

    Nginx 工作原理和优化、漏洞(下) Nginx 工作原理和优化、漏洞(下)Mysql查询性能优化的心得 前言:...

网友评论

    本文标题:从浏览器结构和原理说优化

    本文链接:https://www.haomeiwen.com/subject/dmwmactx.html