Web性能优化总结

减少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查找,避免重定向

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列...
    拉风的老衲阅读 1,874评论 0 1
  • 网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢...
    留七七阅读 6,382评论 0 31
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • 悠闲而清淡,那是一种恬静的美,让人最留念想的是那墙上空白的画框,一张白纸入画也许认为容易,但是,还是要懂得的人才能...
    零一大自然阅读 408评论 0 2
  • 广州 慧一 速度达至生命的极端 为一餐几顿的食物 用生命的元素延续生命 没有依赖及寄望 只有生和死 看似平静的...
    一慧一阅读 328评论 0 5