浏览器性能

浏览器是怎么渲染的?

DOM树+CSS规则树—>渲染树—调用系统GUI的API来绘制页面
1)浏览器下载html文件之后,会根据html文件构建DOM树,其中css会构建css规则树,js会修改dom树和css规则树;
2)通过计算css样式,形成渲染树,然后进行布局和绘制页面;
3)CSS文件要放在顶部,JS文件要放在底部。因为当CSS文件放在顶部时,页面会逐步呈现,有较好的用户体验,如果将CSS文件放在底部,浏览器为了避免回流,会阻塞内容的呈现。可能导致白屏和内容闪烁的情况。JS文件要放在底部是因为JS文件可能对DOM树进行修改,所以浏览器在加载JS文件时是阻塞的。而其他文件都可以并行下载。JS文件如果放在顶部会阻塞内容的逐步呈现,并且阻塞后面组件的下载。
4)回流reflow和重绘repaint
由于html默认采用的是流式布局,所以当元素的几何尺寸发生变化时,会产生回流。回流会从当前元素递归往下重新计算元素的位置。比如说对DOM进行增、删、改、移动或者动画、还有resize时都会触发回流reflow。
而当元素几何尺寸没有发生变化,仅仅是颜色和背景色发生变化时,会产生重绘。
浏览器会对某些操作进行异步回流
避免回流:不要一条一条修改样式,可以预先定义好class的css然后修改类名;对DOM进行离线修改;尽量修改层级较低的DOM;为动画的组件采用非流式布局;不使用table布局;

浏览器的组件

  • 用户界面 用户界面包含了地址栏,前进后退按钮,书签菜单等等,除了请求页面之外所有你看到的内容都是用户界面的一部分
  • 浏览器引擎 浏览器引擎负责让 UI 和渲染引擎协调工作
  • 渲染引擎 渲染引擎负责展示请求内容。如果请求的内容是 HTML,渲染引擎会解析 HTML 和 CSS,然后将内容展示在屏幕上
  • 网络组件 网络组件负责网络调用,例如 HTTP 请求等,使用一个平台无关接口,下层是针对不同平台的具体实现
  • UI后端 UI 后端用于绘制基本 UI 组件,例如下拉列表框和窗口。UI 后端暴露一个统一的平台无关的接口,下层使用操作系统的 UI 方法实现
  • Javascript 引擎 Javascript 引擎用于解析和执行 Javascript 代码
  • 数据存储 数据存储组件是一个持久层。浏览器可能需要在本地存储各种各样的数据,例如 Cookie 等。浏览器也需要支持诸如 localStorage,IndexedDB,WebSQL 和 FileSystem 之类的存储机制

垃圾回收

原理:找出不再使用的变量,然后释放其占用的内存(垃圾收集器周期性地执行)
垃圾回收
方法:

  1. 标记清除:目前主流的垃圾收集算法,将当前不使用的值加上标记,然后进行内存回收。(通过变量在执行环境中的生存周期)
  2. 引用计数:记录所有值被引用的次数,当引用次数为0时,进行内存回收。存在的问题:循环引用会导致内存泄露。所以最好手动解除引用。

说明:

  1. 在标记清除时,如何确定变量不再被使用?

JS中分为全局执行环境和函数的执行环境,代码运行时,会先将全局执行环境压入栈中,然后当执行流进入函数时,会创建函数的执行环境和相应的作用域链。
每个函数都有自己的执行环境,对应着相应的作用域链。对变量的查找和赋值都沿着自己的作用域链向上查找。
创建函数时,会创建一个预先包含全局变量对象的作用域链;当执行函数时,会创建本地活动对象(包括arguments和局部变量),并将其推入作用域链前端。当执行函数时,对变量的查找会沿着作用域链向上搜索,直到作用域链的最顶端—全局变量对象。当函数执行完毕后,本地活动对象会在内存中销毁。而闭包中,当外层函数执行完毕后,外层函数的作用域链被销毁,但被闭包函数引用的活动对象还存在内存中。
不确定:任何函数(包括闭包函数)在执行完毕后,只能销毁本地活动对象,所以为了销毁闭包引用的活动对象,需要销毁闭包函数,即解除引用null。

  1. 如何引用计数?

将引用类型值赋给已声明的变量,引用计数加1,若该变量的值变为了其他,则引用计数值减1。当引用计数为0时,进行内存回收。

自我理解代码执行过程:将全局执行环境推入执行栈中,将所有var 变量和函数声明提升到其作用域的顶部,创建函数时,会创建一个预先包含全局变量对象的作用域链;然后从第一行代码开始顺序执行,所有函数都会当函数执行时,则将函数的执行环境推入栈中,并形成其作用域链,函数在声明时会形成一个包含全局对象的作用域链,当函数执行时,会将当前活动对象加入到作用域链中,对变量的查找都是沿着作用链进行查找的。

性能问题:垃圾收集器的执行间隔:IE6根据内存分配量运行,当内存量大时,一般整个程序所需要的内存量就很大,这样会造成垃圾收集器的频繁执行。IE7重写了之后采用的规则:触发垃圾收集的临界值动态变化。初始触发垃圾收集的临界值与IE6相同,若回收的内存分配量低于15%,则临界值加倍;若回收的内存分配量大于85%,则临界值保持不变。

google V8引擎

V8内存回收
V8优化技术及注意事项

浏览器内核有哪些

IE(Trident);firefox(Gecko);Safari和chrome(WebKit);Opera(Presto)

gbk与utf-8

GBK、Unicode、ASCII码 都为字符集,UTF-8为编码方式;
ASCII码一共规定了128个字符的编码;
GBK包含全部中文字符;2个字节表示中文;
unicode 中所有符号都全球唯一;
UTF-8作为Unicode的实现方式之一,包含全世界所有国家需要用到的字符。一个字节表示英文,3个字节表示中文。UTF8占用的数据库比GBK大。

更多博客:https://github.com/Lmagic16/blog

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章