前言
页面的性能优化是面试和工作中常见到的问题，试想，若网页迟迟加载不出来，作为使用者会是怎样的感受，页面性能优化的重要性可见一斑。
一、资源压缩和合并
资源压缩可以从文件中去掉多余的字符，比如回车、空格。
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");
}
网友评论