页面性能优化方法

2020-02-04 本文已影响0人 agamgn

前言

页面的性能优化是面试和工作中常见到的问题，试想，若网页迟迟加载不出来，作为使用者会是怎样的感受，页面性能优化的重要性可见一斑。

一、资源压缩和合并

资源压缩可以从文件中去掉多余的字符，比如回车、空格。

1.1、html压缩

html代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。
例如，压缩前：

<div>
<h2>title</h2>
<p>agamgn</p>
</div>

压缩后：

<div><h2>title</h2><p>agamgn</p></div>

如何压缩

使用在线网站进行压缩例如HTML压缩
使用node提供的html-minifier进行压缩。

1.2、css代码压缩

css代码压缩简单来说就是无效代码删除和css语义合并。
如何压缩

使用在线网站进行压缩(同HTML)。
使用node提供的html-minifier进行压缩。
使用clean-css
对css压缩。

1.3、JavaScript的压缩和混乱

js的压缩和混乱主要包括以下这几部分：

无效字符的删除
剔除注释
代码语义的缩减和优化
代码保护(代码逻辑变得混乱，降低代码的可读性，这点很重要)

如何进行js的压缩和混乱

使用在线网站进行压缩(同HTML)
使用html-minifier工具
使用uglifyjs2
对js进行压缩

二、利用浏览器缓存

对于web应用来说，缓存是提升页面性能同时减少服务器压力的利器。
关于浏览器缓存请参考浏览器缓存

三、使用CDN

大型Web应用对速度的追求并没有止步于仅仅利用浏览器缓存，因为浏览器缓存始终只是为了提升二次访问的速度，对于首次访问的加速，我们需要从网络层面进行优化，最常见的手段就是CDN（Content Delivery Network，内容分发网络）加速。通过将静态资源(例如javascript，css，图片等等）缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载。

四、使用异步加载方式

对于非核心代码使用异步加载能提高页面的性能

4.1、async方式

async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持
async属性规定一旦脚本可用，则会异步执行
async属性仅适用于外部脚本
如果是多个脚本，该方法不能保证脚本按顺序执行

<script type="text/javascript" src="xxx.js" async="async"></script>

4.2、defer方式

兼容所有浏览器
defer属性规定是否对脚本执行进行延迟，直到页面加载为止
如果是多个脚本，该方法可以确保所有设置了defer属性的脚本按顺序执行
如果脚本不会改变文档的内容，可将defer属性加入到script标签中，以便加快处理文档的速度

4.3、动态创建script标签

在还没定义defer和async前，异步加载的方式是动态创建script，通过window.onload方法确保页面加载完毕再将script标签插入到DOM中,具体代码如下：

function addScriptTag(src){  
    var script = document.createElement('script');  
    script.setAttribute("type","text/javascript");  
    script.src = src;  
    document.body.appendChild(script);  
}  
window.onload = function(){  
    addScriptTag("js/index.js");  
}