网页性能优化

页面加载速度（加载时优化）

页面的加载速度不仅影响到网站的搜索引擎排名，还严重影响到用户的体验。

以下介绍优化页面加载速度的几种方法：

一、优化图像。

      1.去掉不必要的图片；                     

      2.多使用css3代替图片；

      3.使用压缩率最高的图片，特别是gif动图，一些视频格式的体积比gif小很多；

      4.用艺术字字体，不要用图片；

      5.仔细权衡图片和文字的关系，要表达一个意思，可能一图胜千言；

      6.使用progressive jpeg，相比随着数据下载从上到下显示的baseline jpeg，前者是由模糊到清晰，用户体验好，也不会导致reflow;

      7. 图片分辨率要尽可能小，避免图片分辨率大于显示分辨率；

      8.为使用更新浏览器的用户提供更现代化的图片格式；

      9.多种分辨率的位图共不同页面大小使用；

     10.要给标签指明宽高，否则会导致reflow

二、优化字体

     1.@font-face中unicode-range可以制定字符范围，用来避免下载不需要的语言的字符。

     2、确保字体都被压缩过

     3、用@font-face的display属性和FontFace对象管理好字体加载时的逻辑

三、去掉不必要的插件

四、减少DNS查询（页面加载时间快速有效的方法）

五、最小化重定向：重定向增加了额外的http请求，因此也增加了加载时间，但有时重定向是不可避免的，如链接网站的不同部分、保存多个域名、或者从不存在的页面跳转到新页面。重定向 增加了延迟时间，因此要避免使用它。

六、使用内容分发网络（CDN）: 一些必要的插件，如bootstrap，可以引用cnd上的。CDN是位于全球不同地方的高性能网络服务，复制你网站的静态资源，并以最有效的方式来为访客服务，(cdn网址： http://www.bootcdn.cn/)

七、把css文件放在页面顶部，JavaScript文件放在底部

css文件放在页面顶部可以禁止逐步渲染，节省浏览器加载和重绘页面元素的资源。js用于功能和验证，放在底部可以避免代码执行前的等待时间。

八、利用浏览器缓存

再次访问时，可直接从缓存中读取 

九、使用css雪碧图：整合图像文件，减少在下载其他资源的往返次数和延迟，从而提高站点的速度

十、压缩css和js:

压缩是通过移除不必要的字符（如tab、空格、回车、代码注释），以帮助减少其大小和页面的后续加载时间的过程。（但还需保存源代码，方便修改）

十一、启动CZIP压缩

GZIP是一个减少发送给访客的HTML文件、JS和CSS体积的工具，压缩的文件减少了HTTP响应时间。

十二、关键渲染路径

           浏览器渲染一张网页通过以下步骤：

           1.处理HTML标号并构建DOM树

           2. 处理css标记并构建CSSOM树

           3. 将DOM与CSSOM合并成一个渲染树

           4. 根据渲染树来布局，以计算每个节点的几何信息

           5. 将各个节点绘制到屏幕上。

           优化关键渲染树路径，就是指优化这个渲染过程，让网页尽快呈现出来。

          css:

            ① css文件会阻塞渲染。浏览器构架好DOM树后，必须等待CSSOM树构建完成。

            ② 在文档顶部防止外联CSS的标签，让浏览器尽快请求css文件。

            ③ 避免在css文件中使用@import，因为只有包含import的文件被下载编译后，浏览器才会发现并下载import的css

            ④ 可以考虑内联css，无需额外请求，不会阻塞渲染。

         js:

            ① 在CSSOM构建完成前，js不会开始执行

            ② js也会阻止DOM树构建，除非在<script>标签上标记async

            ③ 用chrome开发者工具的audits检查网页

缓存优化

管理好页面的缓存，避免重复下载资源。

浏览器缓存机制：

1.访问页面，请求各种资源，浏览器检查本地是否有缓存

2.如果有，检查资源是否过期。没过期，就直接使用缓存。过期了，便向服务器发送请求。

3.发出的请求中会带伞etag和last-modified首部字段。

4.服务器通过Etag和last-modified来判断浏览器缓存的资源是否已经不可用

5.如果资源仍然有效，便返回304告知浏览器使用缓存。否则返回更新后的资源