本文将会介绍浏览器`devtool`的一些常用工具方法，这些工具能够以可视化的方式展现当前网页情况。平常我们在做性能优化的时候，第一步是分析性能瓶颈，第二步借助工具找到问题，第三步解决瓶颈问题。

好多同学想要的chrome的调试技巧，它今天来了，它来了，它来了，重要的事情说三遍！！欢迎大家多提意见，一起进步！

使用Performance 面板来分析页面运行时性能，用来对页面的响应、动画和空闲阶段进行优化。Performance Panel 应该是每个前端开发者都应该了解并会使用

我们通过 html、css 描述页面，浏览器会解析然后一帧帧渲染，通过 js 改变 dom 后，浏览器会重新计算布局信息然后渲染。 dom 改变有高频低频之分，比如动画就要高频改变样式，而且现代浏览器

本文主要介绍DevTools 中的Memory Panel，可以查看当前网页的内存分配情况，用来排查内存泄漏问题

DOM 树：JavaScript 是如何影响 DOM 树的构建的？ 渲染流水线：CSS 如何影响首次加载的白屏时间？ 页面性能：如何系统地优化页面？

大家好，我是云牧，此文介绍浏览器运行环境相知识，包含加载渲染页面、性能优化、Web安全，垃圾回收、内存泄漏等角度阐述

一、介绍 一个网站的体验，决定了用户是否愿意去了解网站的功能；而网站的功能，决定了用户是否会一票否决网站的体验。可见网站体验的重要性，而性能优化能大大提升网站的体验。 性能优化一直以来都是工程师界的“