摘要：因为当文件放在顶部时，页面会逐步呈现，有较好的用户体验，如果将文件放在底部，浏览器为了避免回流，会阻塞内容的呈现。浏览器可能需要在本地存储各种各样的数据，例如等。
浏览器是怎么渲染的？
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。
2) 如何引用计数？
将引用类型值赋给已声明的变量，引用计数加1，若该变量的值变为了其他，则引用计数值减1。当引用计数为0时，进行内存回收。
自我理解代码执行过程：将全局执行环境推入执行栈中，将所有var 变量和函数声明提升到其作用域的顶部，创建函数时，会创建一个预先包含全局变量对象的作用域链；然后从第一行代码开始顺序执行，所有函数都会当函数执行时，则将函数的执行环境推入栈中，并形成其作用域链，函数在声明时会形成一个包含全局对象的作用域链，当函数执行时，会将当前活动对象加入到作用域链中，对变量的查找都是沿着作用链进行查找的。
性能问题：垃圾收集器的执行间隔：IE6根据内存分配量运行，当内存量大时，一般整个程序所需要的内存量就很大，这样会造成垃圾收集器的频繁执行。IE7重写了之后采用的规则：触发垃圾收集的临界值动态变化。初始触发垃圾收集的临界值与IE6相同，若回收的内存分配量低于15%，则临界值加倍；若回收的内存分配量大于85%，则临界值保持不变。
google V8引擎V8内存回收
V8优化技术及注意事项
IE（Trident）；firefox（Gecko）；Safari和chrome（WebKit）；Opera（Presto）
gbk与utf-8GBK、Unicode、ASCII码 都为字符集，UTF-8为编码方式；
ASCII码一共规定了128个字符的编码；
GBK包含全部中文字符；2个字节表示中文；
unicode 中所有符号都全球唯一；
UTF-8作为Unicode的实现方式之一，包含全世界所有国家需要用到的字符。一个字节表示英文，3个字节表示中文。UTF8占用的数据库比GBK大。
更多博客：https://github.com/Lmagic16/blog
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98361.html
摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。 最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...
摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。 最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...
摘要：除此以外，让元素脱离文档流也是一个很好的方法。因为元素一旦脱离文档流，它对其他元素的影响几乎为零，性能的损耗就能够有效局限于一个较小的范围。讲完重排与重绘，往元素上绑定事件也是引起性能问题的元凶。高性能这本书非常精致，内容也非常丰富。 showImg(https://segmentfault.com/img/bVJgbt?w=600&h=784); 入手《高性能JavaScript》一...
摘要：性能时间线以一个统一的接口获取由和所收集的性能数据。浏览器支持下表列举了当前主流浏览器对性能的支持，其中标注星号的内容并非来自于性能工作小组。 页面的性能问题一直是产品开发过程中的重要一环，很多公司也一直在使用各种方式监控产品的页面性能。从控制台工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange这种侵入式java...
摘要：本文是图说系列文章的第五篇。这样的话，使用的开发者也不需要做任何适配，但是它们却能获得更高性能。该图并不是用来准确的衡量其性能的。运行编写出高性能的代码是可能的。这种清理工作由引擎自动进行，称为垃圾回收。 本文是图说 WebAssembly 系列文章的第五篇。如果您还未阅读之前的文章，建议您从第一篇入手。 在上一篇文章中，我们说到了使用 WebAssembly 和 JavaScript...
阅读 1868·2021-09-23 11:21
阅读 1661·2019-08-29 17:27
阅读 1006·2019-08-29 17:03
阅读 695·2019-08-29 15:07
阅读 1886·2019-08-29 11:13
阅读 2353·2019-08-26 12:14
阅读 870·2019-08-26 11:52
阅读 1700·2019-08-23 17:09
