Web性能优化系列

最新推荐文章于 2024-07-13 10:51:07 发布

何烨坪Echo

最新推荐文章于 2024-07-13 10:51:07 发布

阅读量420

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/heye13/article/details/51727974

版权

WEB前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

【1】Web性能优化分析

如果你的网站在1000ms内加载完成，那么会有平均一个用户停留下来。网站的核心内容需要在1000ms内呈现出来。如果失败，用户将永远不会再访问你的网站。

网站优化的步骤：

1、设定性能预算

2、测试当前的性能

3、找出导致性能问题的地方

4、最后，使用优化特效

下面有几种方法可以提升你的页面性能

（1）速度指标

速度指标是指页面的可视部分被呈现在浏览器中的平均速度。表示为毫秒的形式，并且取决于viewport的大小。请看下图（用视频帧的形式展现页面加载时间，以秒为单位）。

速度指标越低越好。

网站优化 Web性能优化网站性能优化

速度指标可以通过Webpagetest来测试（由Google维护）

（2）渲染阻塞

了解浏览器如何运行的

渲染的步骤：

1.首先浏览器解析HTML标记去构造DOM树（DOM = Document Object Model文档对象模型）

2.然后解析CSS去构造CSSOM树（CSSOM = CSS Object Model CSS对象模型）

3.在讲DOM和CSSOM树结合渲染树之前，JS文件被解析和执行。

2.1 阻塞渲染CSS

有人认为css阻塞了渲染。在构造CSSOM时，所有的CSS都会被下载，无论它们是否在当前页面被使用。

为了解决这个阻塞，下面有两个步骤：

1.将关键CSS内嵌入页面中，即将最重要的（首次加载时可见的部分页面所使用到的）style写入head中的<style></style>；

2.移除没有用到的CSS。

如何找出没有用到的CSS？

1.使用pagespeed Insight去得到像未使用的CSS，阻塞渲染的CSS和JS文件等等的统计数据。

2.使用Gulp任务，如gulp-uncss或是使用Grunt任务，如grunt-uncss。

*专业小贴士

1.使用CSS Stats保证页面中完全没有未被用到的元素，唯一的样式和字体等。

2.Pagedpeed Insight Chrome插件

3.Tag Counter Chrome插件

2.2渲染阻塞的JavaScript

如果在解析HTML标记时，浏览器遇到了javascript，解析会停止。只有在该脚本执行完毕后，HTML渲染才会继续进行。所以阻塞了页面的渲染。

解决的方法：在<script></script>标签中使用asyns或者defer特性。

1.<script async>将会在HTML解析时下载该文件并在下载完成后马上执行。

2.<script defer>将会在HTML解析时下载该文件并在HTML解析完成后执行。

（3）内存泄漏

内存泄漏和页面臃肿是前端开发者所要面临的问题之一。

如何发现内存泄漏？

在javascript中寻找内存泄漏

使用Chorme Task Manager（任务管理器）去检测app所使用的内存以及js内存（总体内存+实时内存）

Chrome DevTools分析

使用 Heap Profiler 去查看内存泄漏。打开Chrome devTools 然后点击profiles 标签，接着选中 take heap snapshot。

Heap Profiler有四个快照视图(snapshot view)

Summary 视图 – 展示对象的总体数量以及它们的实例总数，浅部（Shallow）大小（对象本身的内存大小）以及保留（Retained）大小（自动GC发生后所释放的内存大小+无法执行到的对象的内存大小）。
Comparison 视图- 用于比较一个操作的前后的两个或多个快照，可以检测内存泄漏。
Containment 视图- 展示了你的app对象架构的整体视图 + DOMWindow 对象(全局对象下的), GC 根部, 本地对象 (来自浏览器)。
Dominators 视图- 展示了 dominators 树的堆图。

点击了解更多Heap profiler。

DOM泄漏

对DOM元素的引用会导致DOM泄漏并且阻碍自动垃圾回收（GC）的进行。

来看一个例子

<div>
    <div id="container">
        <h1 id="heading">I am just a heading nothing much</h1>
    </div>
</div>
	
var parentEle = document.getElementById('container'); 
//get parent ele reference 得到父元素的引用
 
var headingEle = document.getElementById('heading'); 
//get child ele reference 得到子元素的引用
 
parentEle.remove(); 
//removes parent element from DOM 从DOM中移除父元素
 
//but its child ref still exist, So parentEle won't collect GC'd and causes DOM Leak
//但是它的子元素引用仍然存在，所以parentEle不会被GC回收，因此导致了DOM泄漏。

将它的引用设置为null即可修复DOM泄漏。

headingEle = null;//Now parentEle will be GC'd

（4）延迟加载js文件
（1）使用defer或者async（但是这两种方法都不能解决web页面完全加载后再加载外部js的问题）
<script type="text/javasvript" defer="defer"></script>
（2）google推荐的代码，这些代码应该被放置在</body>标签前（接近HTML文件底部）。
<script type="text/javascript">
function downloadJSAtOnload(){
var element = document.createElement)("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if(window.addEventListenter)
window.addEvenListener("load",downloadJSAtOnload,false);
else if(window.attachEvent)
window.attachEvent("onload",downloadJSAtOnload);
else
window.onload = downloadJSAtOnload;
</script>
这段代码意思是等到整个文档加载完后，再加载外部文件"derfer.js"。
这段代码直到文档加载完才会加载指定的外部JS文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码，应放在一个外部文件，然后再引进来。