美文网首页
Web性能优化总结

Web性能优化总结

作者: TurboLoong | 来源:发表于2016-07-21 07:55 被阅读0次

    减少HTTP请求

    页面内部优化;

    启用缓存;

    减少下载量

    网络连接上的优化

    减少HTTP请求:

    CSS Sprites:将多张图片合并成一幅单独的图片,使用css的background-position属性。

    内联图片:通过使用data: URL模式可以在页面包含图片而无需任何额外的请求。

    iconFont:字体代替图片

    减少脚本与样式表的请求主要原则就是合并。

    页面内部优化:

    样式表放在顶部,脚本文件放在底部,避免css表达式,把脚本的样式表放在外部,移除重复脚本。

    为避免当页面变化时重绘页面元素,浏览器会阻塞页面呈现,直到样式表解析完毕。所以如果将样式表放在顶部并不会减少资源的加载时间,它减少的是页面的呈现时间。

    将script标签放在底部

    启用缓存:

    Etag:服务器用于检查浏览器缓存有效性的机制。如果浏览器要验证一个组件是否有效他会使用If-None-Match将etag字符串传送给服务器。如果ETag是匹配的,服务器端会返回304.

    Cache-Control: 使用max-age指令来指定副本被缓存多久。

    减少下载量:

    开启gzip压缩。HTTP1.1通过使用Accept-Encoding来标识支持的压缩,如果服务器看到这个标识,会使用请求头中的一种方式来压缩响应。并通过Content-Enconding来通知web客户端。压缩的成本在于:服务器需要耗费额外的cpu进行压缩,客户端需要解压缩。所以需要在cpu的消耗和数据块的大小之间进行取舍。

    优化网络连接:

    使用CDN加速,减少DNS查找,避免重定向

    相关文章

      网友评论

          本文标题:Web性能优化总结

          本文链接:https://www.haomeiwen.com/subject/dluyjttx.html