美文网首页
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查找,避免重定向

相关文章

  • 前端性能优化

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端性能 优化 大全

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • iOS 性能优化总结

    iOS 性能优化总结 iOS 性能优化总结

  • WEB性能优化

    WEB性能优化

  • Web性能优化总结

    减少HTTP请求 页面内部优化; 启用缓存; 减少下载量 网络连接上的优化 减少HTTP请求: CSS Sprit...

  • IOS的性能优化包括哪几点

    iOS性能优化总结 iOS性能优化总结。关于 iOS 性能优化梳理: 基本工具、业务优化、内存优化、卡顿优化、布局...

  • App瘦身、性能优化总结

    App瘦身、性能优化总结 App瘦身、性能优化总结

  • 使用Webpack4优化Web性能

    利用 Webpack 来优化 Web 性能属于加载性能优化 的一部分: ☛ Web Performance Opt...

  • Awesome Extra

    性能优化 性能优化模式 常见性能优化策略的总结 Spark 性能优化指南——基础篇 Spark 性能优化指南——高...

  • web前端性能优化总结

    1、减少http请求,合理设置 HTTP缓存2、使用浏览器缓存3、启用压缩5、LazyLoad Images6、C...

网友评论

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

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