• 隐藏侧边栏
  • 展开分类目录
  • 关注微信公众号
  • 我的GitHub
  • QQ:1753970025
Chen Jiehua

前端优化小记 

技巧

避免坏请求

有时页面中的HTML或CSS会向服务器请求一个不存在的资源,比如图片或HTML文件,这会造成浏览器与服务器之间过多的往返请求。

前端时间google被墙,而wordpress在加载的时候会加载google的字体文件,导致博客一直没有加载出来。

避免CSS @import

使用 @import方法引用CSS文件可以能会带来一些影响页面加载速度的问题,比如导致文件按顺序加载(一个加载完后才会加载另一个),而无法并行加载。

可以通过下面这种方式来代替

避免使用CSS表达式,CSS表达式在执行时候的运算量非常大,会对页面性能产生大的影响;

合并多个CSS、JavaScript文件

网站中一般都包含有多有的CSS、JavaScript文件,将多个文件进行合以减少网络访问次数,提高加载速度;

同时可以对CSS、JavaScript文件进行压缩,减小文件大小;

小图标合并

将网站中的多个小图片文件合并在同一个文件中,然后通过css position进行控制,减少页面加载时间;

例如:bootstrap中的所有小图标都仅存在一个文件中;

启用Keep-Alive

HTTP协议采用“请求-应答”模式,当使用普通模式(非KeepAlive模式)时,每个请求/应答客户和服务器都要新建一个连接,完成之后立即断开连接(HTTP协议为无连接的协议);当使用 Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接。

在HTTP 1.0中Keep-Alive默认是关闭的,需要在HTTP头中加入“Connection: Keep-Alive”,才能启用Keep-Alive;在 HTTP1.1中Keep-Alive默认启用,加入“Connection: close”可关闭。目前大部分浏览器都是用HTTP 1.1协议,也就是说默认都会发起Keep-Alive的连接请求了,所以是否能完成一个完整的Keep- Alive连接就看Web服务器的设置情况。

内嵌

短小的CSS、JavaScript直接嵌入到Html文件中;小图片也可以直接嵌入html中,通过内联图象(使用 data: URL scheme 在实际的页面嵌入图像数据);

避免Javascript阻塞渲染

浏览器在遇到一个引入外部JS文件的<script>标签时,会停下所有工作来下载并解析执行它,在这个过程中,页面渲染和用户交互完全被阻塞了。这时页面加载就会停止。

可以删除干扰页面中第一屏内容加载的JavaScript,第一屏是指用户在屏幕中最初看到的页面,无论是桌面浏览器、手机,还是平板电脑。

最简单可依赖的方法就是将javascript脚本尽可能的往后挪;

css放在页面最上面

相反的,css一般放在页面最上方,因为 ie,firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。

Cookie优化

减小cookie大小:去除不必要的coockie,并使coockie体积尽量小以减少对用户响应的影响;

针对Web组件使用域名无关的Cookie:对静态组件的Cookie读取是一种浪费,使用另一个无Cookie的域名来存放静态组件是一个好方法,或者也可以在Cookie中只存放带www的域名;

设置缓存

图片等静态资源可以直接通过HTTP Header中的Expires设置一个很长的过期头;

减少不必要的HTTP跳转

对于以目录形式访问的HTTP链接,在末尾加上“/”。很多人都会忽略链接最后是否带’/’,假如你的服务器对此是区别对待的话,那么你也需要注意,这其中很可能隐藏了301跳转,增加了多余请求;

 避免使用eval()

eval函数效率特别低,由于事先无法知晓传给 eval 的字符串中的内容,eval在其上下文中解释要处理的代码,也就是说编译器无法优化上下文,因此只能有浏览器在运行时解释代码;

减少DNS查询

yahoo的建议一个页面所包含的域 名数尽量控制在2-4个;

工具

1、google的PageSpeed工具来检测坏链接;

2、CSS delivery工具检测页面代码中的CSS文件;

3、resource check工具检测页面中所引用的JavaScript文件数;

4、 Gzip压缩工具来检测页面是否已经经过Gzip压缩;

 

 

其他参考

1、https://developer.yahoo.com/performance/rules.html

2、https://developers.google.com/speed/docs/insights/rules

3、http://dbanotes.net/web-performance.html

码字很辛苦,转载请注明来自ChenJiehua《前端优化小记》

评论