JavaScript 性能优化（1）

当访问一个网页时，网页作了什么

1. DNS 寻址、IP 解析 - 具体可看： 开发者工具下 - Network - Status Code（200OK，301跳转等等）。

域名是从右向左解析的。好比www.baidu.com 这个地址。先解析最右边的点 . ,在解析com、baidu、若是没有news，就自动添加www缩写到主页。

2. webserver

（F12）开发者工具 - Perfomance：访问一个网站时，当前网页每一个处理阶段的精确时间（timestamp）。

3. 前端页面渲染流程

3.1  HTML 页面请求：

3.1.1  HTML文档下载，如html、js、css、video、audio、img等）

3.1.2  HTML文档解析 -> dom树（页面结构） ->  render树（颜色、距离、位置） -> 逐级解析dom树 - > html标签，link（css），JavaScript，img 等外部引用标签

link标签，尽可能减小页面的reflow（回流），来提高性能。

JavaScript，用js绘制节点会阻塞其余标签解析、甚至下载，如尽可能避免使用document.write()

img src，图片加载可先使用分辨率较低的图片。

3.2 浏览器的js引擎

3.2.1 V8(c++) Google发布的开源JavaScript引擎。chrome://about/  （chrome的经常使用功能列表）

3.2.2 SpiderMonkey - Mozilla项目的一部分，C语言实现的JavaScript引擎。

 

4. 分析网站性能的工具：www.webpagetest.org

技术优化出发点：

 

 

性能优化技术类的一些概念

• 首屏时间（加载到第一屏的功能点，所消耗的时间点）
• 白屏时间（从进入页面到head解析的时间）
• 可操时间（与模块相关，主要是测试核心模块的使用率，以及用户感知）
• 连通率（多为视频站点。时间为纵轴，主要是对应时间用户看到视屏或者听到声音的比例）

 

腾讯推荐的前端性能优化利器 - Passive Event Listeners 和 Timeline