web前端页面性能优化

为了提升页面的加载速度，让用户有更好的体验，前端网站的性能优化是很是有必要的。

优化的方式有如下几种：

1、 编辑html的时候注意语义结构化

　　结构语义化：根据内容的结构，选择合适的标签，以便于开发者阅读和写出更优雅的代码，同时让浏览器的爬虫和机器很好地解析。

　　结构语义化的优势包括：

　　　　1. 在页面没有css或者css还未加载出来的时候，页面也能呈现出很好的结构。

　　　　2. 有利于SEO，易于被搜索引擎抓取，有利于推广。

　　　　3. 方便盲人阅读器、屏幕阅读器等等设备来解析。

　　　　4. 用户体验更好，例如图片的alt属性，在图片没有加载出来时给予合理的解释。

　　　　5. 便于团队开发和维护。

　　　　6. 遵循分离结构和表现原则。

2、 对网站的文件和资源进行优化

　　1. 书写css和js的时候要注意代码优化，尽可能重复利用。

　　2. 能够用一个大的css文件来合并多个小的css文件，浏览器在请求每个css文件时都会发送一个http请求，在http请求带来的延迟没有结束的时候，用户都将在等待中度过。

　　3. 若是网页中使用了大量背景图片，那么这些图片每一张都会发送一个http请求，可使用css sprite来合并网页中的须要频繁加载的多个图片。对于合并以后的图片，咱们须要注意对它图片质量和大小的优化，图片越小加载速度越快。

　　4. css文件放置在head，js放置在文档尾部。

3、 利用多个域名来存储网站资源

　　1. 能够节约cookie带宽。 

　　2. 节约主域名的链接数，优化页面响应速度。

4、利用缓存

　　Ajax调用都采用缓存调用方式，通常采用附加特征参数方式实现，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征参数，这个参数不变化就使用缓存文件，若是发生变化则从新下载新文件或更新信息。