如何提高网页的加载速度

当页面的加载时间超过10秒就会流失大量的用户 ， 当网页在2-4秒内就能加载完毕还是让人比较容易接受的

那么如何提高网站的性能呢？

网页的优化主要分为前台优化和后台优化：

首先我们来了解下网页是如何生成的？下面是一张网页生成过程图

1.html代码被解析成dom

2.css代码被解析成cssdom

3.cssdom和dom被解析组合成dom树

4.根据dom树进行布局 生成平面图层

5.将布局绘制到屏幕上。（生成布局和绘制合称为渲染）

当用户在访问页面时至少会渲染一次 当用户进行操作可能还会不断的渲染。（修改dom 修改样式表， 用户的点击 修改页面的大小 input的输入 页面的滚动等都会使页面重新渲染）

重新渲染 ，就需要页面的重新布局和重新绘制， 前者叫重排 ，后者叫重绘， 重排一定要重绘， 但重绘不一定需要重排， 当元素的位置需要改变的时候叫做重排， 当元素的颜色改变时叫做重绘。

要提高网页的性能就要尽量避免网页的重排和重绘， 现在的浏览器已经具备把多个变动集中在一起并且把这些变动排序并且一次执行， 从而达到避免多次重绘。

当我们要改变一个div的高度和颜色时， 必定会导致页面的一次重排和重绘 ， 但是有的写法写不好会导致多次重排。 

因此用js操做dom元素时 不要读操做和写操作一起，可以将读出来的值赋值给一个变量保存，见下面的例子

错误的写法：
div.style.height =  div.offsethight + 10 + "px";

正确的写法：
var  h = div.offsethight;
div.style.height =  h + 10 + "px";

技巧：

1.多个js的读操作（或写操做）应该写在一起， 不要一会读 一会写

2.当你使用js改变dom时 不要分开写， 多个css操作可以使用链式操作

关于css和js的解析：

css和js是被称为阻塞加载和阻塞解析的 ， js更为糟糕 当css和cssdom并未解析完遇到js 浏览器就会停止dom的的渲染并向服务器发送请求加载js。因此将css放在顶部， js放在底部。多个css和js可向淘宝页面一样 将多js和css合并成一个css js， 这里的合并是请求连接的合并，  并不是将多个js写进一个js内  ， 需要后端提供环境的配置。

 一个网站的图片是很占带宽的，因此在选图时 我们要准守以下规则：

1. 不要求背景透明的情况下推荐试用jpg格式 ， jpg格式比png格式要小

2.要求背景透明的情况下要使用png24

3.网站上的所有图片要经过压缩处理。

4. 对于一些不常用的小图标要使用css雪碧图来减少htp请求。

5.在使用图片时 一定要对图片的大小进行声明。

使用cdn来实现就近请求。

在服务器端试用gzip技术 在像客户端发送页面的时候进行压缩 减少传输体积。

使用Expire/Cache-control

配置或移除ETag

尽量不要把元素设置为display：none后在用js对其进行dom操作，

用变量储存dom的样式值 避免频繁的获取dom元素的值

*css动画造成页面不流畅问题分析优化

使用css3动画造成页面的不流畅和卡顿问题，其潜在原因往往还是页面的回流和重绘，减少页面动画元素对其他元素的影响是提高性能的根本方向，而实现可如下：

1）设置动画元素position样式为absolute或fixed，可避免动画的进行对页面其它元素造成影响，导致其重排和重绘的发生；

2）避免使用margin，top，left，width，height等属性执行动画，用transform进行替代；

对于高并发导致的页面加载速度较慢可以使用 图片服务器， 负载均衡 数据库的优化 ，cdn加载技术， html静态化。