最新最全面的网站优化前端解决方案_网站SEO优化方案都在这里

网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢?答案是肯定。雅虎的邮件团队总结了常用的35条网站优化最佳实践,其中就有很多实践,只要我们前端人员在日常开发过程中遵循这些实践,就可以在一定程度优化网站加载速度。

本文篇幅较长,主要内容就是网站优化的35条最佳实践,以及对每条最佳实践的说明。技术文章看起来都是很枯燥,特别对于这种篇幅较长的文章,这里先列出来有哪些实践,不是每条实践的说明都要看,才能明白这个实践的意思。


1.最小化HTTP请求2.使用内容分发网络(CDN)3.增加Expires或者Cache-Control头4.Gzip压缩内容5.把CSS文件放到顶部6.把Js文件放到底部7.避免CSS表达式8.保持Js和CSS外部引用9.减少DNS查询路径10.压缩js和css11.避免logo等的过程,HTML页面就相当于进度提示,这样就给等待页面加载的用户一个视觉反馈。提高整体的用户体验。

如果把CSS文件放到页面底部,在很多浏览器中可能会影响逐步渲染过程,包括IE浏览器。因为这些浏览器会阻塞渲染过程以防页面元素样式改变时重绘元素。用户就会看到一个空白页。

HTML的规范中明确声明了CSS是包含在页面的HEAD中的。

****6.把Js文件放到底部****

脚本文件会导致的一个问题就是它们会阻塞并行下载。HTTP/1.1规范建议不要在一个主机上并行下载不超过两个脚本文件。如果把图片托管到多台主机上面,那就可以并行下载多个图片文件。但是当一个脚本文件正在下载时,浏览器不会下载其他的脚本文件,即便这个脚本文件在其它主机上面。

在有些情况下想要把脚本文件移动文档底部并不容易。例如如果脚本使用document.write插入页面内容,它就不能移到页面底部。这可能会引起作用域问题。在很多情况下,还有其它的途径解决类似的这种问题。

一个常用的建议就是使用延时脚本。script的DEFER属性表明脚本不包含document.write,告诉浏览器可以继续渲染。但是也不是所有的浏览器都支持。Firefox不支持DEFER属性,IE对DEFER的支持也不尽如意。

如果脚本可以延迟加载,它就可以放到页面底部,这样就会加快页面的载入速度。

7.避免CSS表达式

CSS表达式是动态设置CSS属性的一种强大并且危险的方法。IE从5开始支持CSS表达式,但是从IE8开始弃用这种方式。下面的例子就是,背景颜色可以根据时间动态设置:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上面展示的,expression方法接受一个js表达式参数,CSS的属性是根据js表达式的计算结果设置的。其它浏览器不支持expression方法,所以它只适用于IE浏览器。

CSS表达式的问题是计算太频繁了,不仅页面渲染缩放时,需要计算,页面滚动甚至鼠标滑过页面时都需要重新计算。如果在CSS表达式里面加个计数器来追踪CSS表达式的计算频率,把鼠标滑过页面就会发现计算次数会轻易的超过10000次。

减少CSS表达式计算次数的方法是使用一次性表达式,表达式第一次计算时会给样式属性设置一个显示值来代替表达式。如果样式属性必须根据页面活动动态设置,用事件绑定代替CSS表达式是一个好的选择。

8.保持Js和CSS外部引用

有很多性能规则来处理外部组件管理。然而,在考虑这些因素之前,有一个更基本的问题需要考虑:js和css应该包含在外部文件中,还是内联在页面里面?

使用外部文件通常会加快重定向

重定向所有有用额信息都在header里面。响应内容通常是空的。

12.删除重复Scripts

一个页面中有两个一样的js文件会影响性能。这可能不像你想的那样不同寻常。当团队人数及脚本数量增加时,很有可能一个页面就会引入相同的脚本文件。这种情况发生时,重复的脚本会创建不需要HTTP连接而且多次执行进而会影响性能。不需要的HTTP请求发生在IE浏览器中,Firefox不会有这种现象。在IE中,如果一个外部js被引入了两次并且没被缓存,它就会在页面加载时产生两个HTTP请求。甚至当js被缓存时,当用户刷新页面后,额外的HTTP请求也会发生。除了产生浪费的HTTP请求,脚本多次也会浪费时间。这种情况在Firefox以及IE中都会发生,不管js文件有没有被缓存。

有一种方法可以避免多次引入相同的脚本,那就是在模板系统里面实现一个脚本管理模块。这样的话,在HTML页面中就可以利用script标签引入脚本管理文件。<script type="text/

 
®关于本站文章™ | 若非注明原创,默认 均为网友分享文章,如有侵权,请联系我们™
㊣ 本文永久链接: 最新最全面的网站优化前端解决方案_网站SEO优化方案都在这里