前端项目Web性能优化

Posted 水香木鱼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端项目Web性能优化相关的知识,希望对你有一定的参考价值。

一、尽量减少前端HTTP请求

浏览器并发线程数有限,所以针对资源文件的优化,一般有:
1、 合并脚本文件和CSS文件
2、 CSS Sprites利用CSS background相关元素进行背景图绝对定位,把多个图片合成一个图片。

二、浏览器缓存

在用户浏览网站的不同页面时,很多内容是重复的,比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件,将大大降低页面产生的流量,从而降低页面载入时间。

  1. 添加Expires头和Cache-Control
    Expires头,浏览器端根据过期时间选择是否加载最新的版本。缺点是:需要服务器和客户端时间的严格同步,
    HTTP1.1引入了Cache-Control头来克服Expires头的限制。Cache-Control使用max-age制定组件被缓存多久,使用秒为单位,例如Cache-Control:max-age=3600;表示组件将被缓存60分钟。如果max-age和Expires同时出现,则max-age有更高的优先级,浏览器会根据max-age的时间来确认缓存过期时间。
  2. Last-Modified
    在上次传输中,服务器给浏览器发送了Last-Modified或Etag数据,再次浏览时浏览器将提交这些数据到服务器,验证本地版本是否最新的,如果为最新的则服务器返回304代码,告诉浏览器直接使用本地版本,否则下载新版本。一般来说,有且只有静态文件,服务器端才会给出这些数据。

三、页面压缩

  1. GZIP
    IE和Firefox浏览器都支持GZIP解码。后端服务器容器对数据GZIP压缩之后在传输到客户端,浏览器拿到数据后根据 Content-Encoding:gzip 进行解压,这样虽然稍微占用了一些服务器和客户端的CPU,但是换来的是更高的带宽利用率。对于纯文本来讲,压缩率是相当可观的。
  2. html压缩
  3. JS压缩 混淆
  4. CSS压缩
  5. 图片压缩,展示尺寸和图片尺寸吻合

四、HTML代码结构优化

  1. 正确布置行内脚本
    尽可能使用外部脚本和样式文件,脚本尽可能移到底部脚本放在顶部带来的问题.
    1) 使用脚本时,对于位于脚本以下的内容,逐步呈现将被阻塞
    2) 在下载脚本时会阻塞并行下载
    放在底部可能会出现JS错误问题,当脚本没加载进来,用户就触发脚本事件。所以要综合考虑情况。

Script延迟加载 defer属性(IE & FF3.1+)、setTimeout
风险:行内(内联)脚本在样式表后面。
所有主流浏览器都会保持CSS和javascript的顺序。在样式表完全下载、解析及应用之后,内联脚本才能执行。同时,必须在内联脚本执行后,剩余资源才能下载。
CSS的下载解析可以和其他资源并发执行。

  1. 少用iframe
    优点:可以和主页面并行加载
    缺点: iframe会阻塞onload事件 解决:onload事件后设置iframe的src,或者JS创建iframe节点
    和主页面使用同一个连接池
    避免src为空—为空默认为主页面地址

  2. 减少DOM结构的层级
    DOM层级越深会增加 CSS rule Tree 和 Dom Tree 匹配构造的性能

  3. 减少Cookie的大小

  4. 尽量用div取代table,或者将table打破成嵌套层次深的结构
    table会影响页面呈现的速度,只有table里的内容全部加载完才会显示。

五、组件分成多个域

主要的目的是提高页面组件并行下载能力。但不要跨太多域名,建议采用2个子域名。

六、图片懒加载

七、图片,脚本,数据 预加载

八、图片base64

九、根据业务实际情况优化,保证首屏加载时间。

前端优化可以避免我们造成无谓的服务器和带宽资源浪费,但随着网站访问量的增加,仅靠前端优化已经不能解决所有问题了,后端程序处理并发请求的能力、程序运行的效率、硬件性能以及系统的可扩展性,将成为影响网站性能和稳定的关键瓶颈所在。

以上是关于前端项目Web性能优化的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化之Gzip

打个总结:Web性能优化

WEB性能优化资料

这些Web前端开发性能优化,你知道吗?

前端进阶Web前端性能优化

Web项目开发性能优化解决方案