博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
读《高性能建站指南》(上)
阅读量:6413 次
发布时间:2019-06-23

本文共 1561 字,大约阅读时间需要 5 分钟。

绪言部分介绍了为什么要进行web前端性能的优化以及HTTP协议的简单知识。为什么要进行web前端性能的优化?作者提出了一个前端性能的黄金法则:一般情况下,web页面的显示展示过程中,10%~20%用于下载HTML文档,而80%左右的现在前端组件(图片、js、css),因此对前端组件的处理会对web性能有很大的影响。此外,单纯的从系统整体调优的角度考虑,前端性能调优的工作量更小(相对于后台设计、架构的调整),而产生的效果也更加明显。对于HTTP协议,绪言中重点介绍了HTTP头(header),包括压缩(Content-Encoding)、条件Get请求(If-Modified-Since、Last-Modified)、缓存(Expired)、持久连接(Connect:keep-live)。

        接下来介绍了第一条优化规则:减少HTTP请求,这条规则对用户第一次请求web页面性能影响很大(因为没有缓存)。该规则下重点介绍了减少图片的方式。1.图片地图,将图片合并到一张图片中,使用css坐标定位到大图片中具体位置;2.css sprites,也是将图片合并到一张大图中,然后使用css的background,动态设置图片显示的位置;3.内联图片,将图片直接包含到web页面中,但IE支持存在问题;4.合并脚本和css,将多个js和css文件合并到一个文件中,可以配合压缩的方式。第4条规则的应用比较多,目前在线服务和第三方框架都有支持,大名鼎鼎的YUI compressor还有Eclipse的插件。

        第二条规则:使用内容发布网络(CDN),大概的思路就是将web组件发布到第三方服务器上,当然第三方的web请求相应直接影响了web页面的性能。

        第三条规则:添加Expires头,在绪言中已经介绍了大概的思路,具体就是使用Max-Age和Expires,两者分别在http1.1和http1.0下支持。此外,书中还介绍了使用修改文件名的方式实现对已修改文件的下下载,这一点觉得还好,因为我们不能告诉用户“你应该用Ctrl+F5的方式请求新的页面”,具体的实施步骤还没有动手尝试,后续需要补充。在tomcat7中已经加入了ExpireFilter,通过配置的方式实现对不同类型前端组件的不同缓存方式。

第四条规则:压缩组件,思路就是减小文件大小,提高传输速率。书中介绍了一种比较常用的压缩方式:gzip。主流的服务器和浏览器均支持该方式,其中tomcat只需要在server.xml的connector中增加配置即可,如下:

[html] 
 
  1. compression="on"  
  2.         compressionMinSize="50"  
  3.         compressableMimeType="text/html,text/css,text/javascript"  

书中还介绍了,对于不支持gzip的浏览器、缓存、代理服务器三种结合时出现的复杂情况的处理方式,不得不佩服,考虑的的确周到。由于目前很多系统中js代码很多,也都开始使用了模块化的管理方式,因此在压缩时也有两种处理方式:单文件压缩和按逻辑压缩。单文件压缩的方式就是工作量小,傻瓜式,但是当对文件有很小的改动时,都会导致缓存失效。按逻辑压缩会是前端逻辑复杂度增加,工作量加大,但是目前已经有第三方框架对这这方面进行了努力,如。

 

        第五条规则:将样式表放在顶端。页面的展示是在html文档下载完和css下载完之后,通过浏览器的渲染后展示的,开发人员希望html文档能够先显示,然后再使用css对样式进行重绘,当css靠后就会阻止HTML文件的展示,造成整体性能的下降。

        第六条规则:将脚本放在底部。浏览器存在并行下载的特性,而js阻止并行下载,因此需要将js尽量靠后放置,以充分利用并行下载。

转载地址:http://lhbra.baihongyu.com/

你可能感兴趣的文章
Java中的ExceptionInInitializerError异常及解决方法
查看>>
Spring 注入bean时的初始化和销毁操作
查看>>
java线程同步原理(lock,synchronized)
查看>>
MyEclipse中使用Hql编辑器找不到Hibernate.cfg.xml文件解决方法
查看>>
yRadio以及其它
查看>>
第四节 对象和类
查看>>
闪迪(SanDisk)U盘防伪查询(官方网站)
查看>>
Android onMeasure方法介绍
查看>>
微信公众号搭建营销型房产项目程序后台开发
查看>>
git使用笔记
查看>>
无锁数据结构
查看>>
RabbitMQ消息队列:任务分发机制
查看>>
substr和substring的区别
查看>>
String.Format用法
查看>>
【转】java NiO 学习笔记
查看>>
MySQL的变量查看和设置
查看>>
Android NDK配、编译、调试
查看>>
长平狐 memcached源代码阅读笔记(二):网络处理部分
查看>>
android onNewIntent
查看>>
实战利用腾讯企业邮箱zabbix3.x邮件(微信/QQ/短信)告警详细配置
查看>>