前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >web前端优化,减少http请求,提高页面加载速度

web前端优化,减少http请求,提高页面加载速度

作者头像
德顺
发布2019-11-13 10:15:27
1.2K0
发布2019-11-13 10:15:27
举报
文章被收录于专栏:前端资源前端资源
移动端性能陷阱和硬件加速

80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。

  减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢?嗯,确实有鱼和熊掌兼得的办法。

  合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的,当然,也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话,合并文件就是一项比较麻烦的工作了,但把这个作为站点发布过程的一部分确实可以提高响应时间。

web前端优化,减少http请求,提高页面加载速度 经验总结 第1张
web前端优化,减少http请求,提高页面加载速度 经验总结 第1张

CSS Sprites 是减少图片请求数量的首选方式。把背景图片都整合到一张图片中,然后用CSS的background-image和background-position属性来定位要显示的部分。

  图像映射可以把多张图片合并成单张图片,总大小是一样的,但减少了请求数并加速了页面加载。图片映射只有在图像在页面中连续的时候才有用,比如导航条。给image map设置坐标的过程既无聊又容易出错,用image map来做导航也不容易,所以不推荐用这种方式。

  行内图片(Base64编码)用data: URL模式来把图片嵌入页面。这样会增加HTML文件的大小,把行内图片放在(缓存的)样式表中是个好办法,而且成功避免了页面变“重”。但目前主流浏览器并不能很好地支持行内图片。

  减少页面的HTTP请求数是个起点,这是提升站点首次访问速度的重要指导原则。

  1. 使用CDN(内容分发网络)(其实就是靠钱)
web前端优化,减少http请求,提高页面加载速度 经验总结 第2张
web前端优化,减少http请求,提高页面加载速度 经验总结 第2张
web前端优化,减少http请求,提高页面加载速度 经验总结 第3张
web前端优化,减少http请求,提高页面加载速度 经验总结 第3张

3.添加Expire/Cache-Control头

Http头介绍:Expires,Cache-Control,Last-Modified,ETag

4.启用Gzip压缩

5.将css放在页面最上面

6.将script放在页面最下面

避免在CSS中使用Expressions 把JavaScript和CSS都放到外部文件中 减少DNS查询 压缩 JavaScript 和 CSS  避免重定向 移除重复的脚本 配置实体标签(ETag)  使 AJAX 缓存

工具: YSlow插件 百度统计

参考文献:

雅虎前端优化的35条军规 Yahoo军规

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档