页面优化

一、加载优化

1、减少Http请求

页面中的图片、css、js文件等，每加载一个这样的文件都需要发送Http请求，浏览器就要向服务器发送请求，服务器接受请求并处理请求，这使得页面处理速度非常慢。加快页面处理速度的办法<b>合并css、js文件，合并小图标的图片</b>。

2、使用缓存

页面缓存、数据缓存，使用缓存可以减少向服务器的请求数，节省加载时间

3、压缩css、js、图片文件

减小资源大小，可以加快网页的加载速度，删除多余的空格、注释，服务端可以用gzip模块进行压缩传输，缩小传输文件大小。

4、文档结构方面优化

文档 <b>起始位置引用css文件</b>，浏览器会在解析html代码前将css信息准备好，有助于提高页面的加载性能。在<b>页面底部body之前应用js文件</b>，浏览器在解析js文件时已经将页面加载完毕，这样js会对页面元素产生积极影响。不在html内写js代码和css样式，不利于页面的维护。

5、避免阻塞型的JavaScript和CSS

浏览器呈现网页之前，它首先需要通过解析HTML标记语言来构建一个DOM树。在此过程中，如果遇到了脚本，此过程就会中止，转而先执行脚本，完了才会继续原先的活动。这样会导致网页的延迟，所以我们可以推迟加载不必要的js脚本或者采用异步加载的方式。

6、页面预加载

页面预加载，可以在资源加载完成后再显示页面。

二、CSS优化

1、避免使用css表达式，不使用内联css样式

CSS表达式的执行需跳出CSS树的渲染

2、不滥用float

float在渲染时计算量比较大，减少使用。

3、不滥用web字体

使用web字体需要下载、解析、重绘当前页面。

4、不声明过多的font-size

过多的Font-size引发CSS树的效率

5、值为0时不需要任何单位

为了浏览器的兼容性和性能，值为0时不要带单位。

三、javascript优化

1、减少重绘和回流

避免不必要的DOM操作，尽量改变class而不是style，避免使用docment.write，减少drawImage。

2、缓存列表.length

每次 .length都要重新计算，把他赋给一个变量。

3、尽量使用事件代理，避免批量绑定事件

4、尽量使用ID选择器

ID选择器最快

四、布局

• 使用 p元素修饰文本，而不是布局；默认 p 元素是自动提供边缘，而且其他样式也是浏览器默认提供的。
• 避免使用 br 元素换行，避免使用

  ---

  添加水平线，可以使用border-bottom来代替。
• 不到关键时刻不适用div标签。
• 尽量少使用table布局。
• 可以多使用flex box。
• 使用css调整边距。

五、其他

• 格式一致性使得HTML代码易于阅读，理解，优化，调试。
• 让标记有始有终。
• 使用iframe嵌套另一个页面。
• 如果是目录网址后加斜杠，这样服务器就一目了然地知道要访问该目录下的文件，从而节省加在时间。
• 图片要标明宽度和高度，不然浏览器一边下载一边计算图片大小，会影响加载速度和用户体验。当浏览器知道了高度和宽度后，即使图片无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载快了，浏览体验也更好了