美文网首页
前端性能优化

前端性能优化

作者: jinjin2018 | 来源:发表于2019-03-10 16:41 被阅读0次

针对《高性能网站建设指南》的阅读总结:

一、减少HTTP请求

1. 图片地图:将多个图片请求url 合并为在一个图片上关联多个URL。

<img usemap=“#map1”  border=0  src=''>

<map name='map1'>

<area  shape='rect' coords='0,0,31,31' href='home.html'  title='Home'>

<area  shape='rect' coords='36,0,66,31' href='gifts.html'  title='Gifts'>

</map>

在导航栏或其他超链接中使用图片地图是加速页面的最简单方法。

缺点:用手工方式难以准确的定义图片地图的区域坐标而且除了矩形无法定义其他形状。

2. CSS Sprites (css雪碧图 )

将多个图片合并为一张 单独的图片

<div  style='background-image:url('a.gif') ;  background-position:-260px -90px;width:26px;height:24px;>

</div>

3. 内联图片

通过使用data:URL模式可以在Web页面中包含图片,无需额外请求HTTP。

       <img src='data:imgage/gif;base64,ROOOORGK='>

.home{background-image:url(data:image/gif;base64,RJJKKK)}

4.合并脚本和样式表

二、使用内容发布网络(CDN)

三、为组件添加长久的Expires头

添加一个长久的Expires头,可以使页面组件被缓存,如图片,脚本,样式表。

1.在Http1.1中,用Cache-Control:max-age=7888888(秒为单位)指定组件被缓存多久

2.使用Expires头可以减少浏览器响应时间,但是如果服务器有更新,不能及时获取最新组件。可以通过修订文件名,采用变量命名文件,将版本号加到文件名 中,如yahoo-3.9.js

四、压缩脚本和样式表

HTTP请求头中Accept-Encoding标识对压缩的 支持 ,Accept-Encoding:gzip,deflate。

Web服务器响应头Content-Encoding:gzip 通知 客户端压缩 方法。

五、使用LINk标签将样式表放到文档HEAD中。

六、将脚本移到页面底部。

七、避免CSS表达式。

八、将JavaScript和CSS放到外部文件中。

九、通过使用Keep-Alive和较少的域名来减少 DNS查找。

十、对JavaScript源代码进行精简。

十一、避免重定向。

十二、移除重复脚本,确保脚本只被保护一次。

十三、配置或移除ETag

ETag是唯一标识一个组件的一个特定版本的字符串。

十四、确保Ajax请求遵守性能指导,尤其应具有长久的Expires头。

参考:

《高性能网站建设指南》

相关文章

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

  • 前端性能优化

    前端性能优化 下面是我认知的前端性能优化的策略,本书主要着手 JavaScript 优化展开阐述。 JavaScr...

  • 2019-10-22

    2018 前端性能优化清单

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

网友评论

      本文标题:前端性能优化

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