重庆互联网,19年企业互联网解决经验,专业网站开发、移动端开发、微信端开发、小程序开发!
重庆网络推广公司

网站建设前端优化方法总结

作者:重庆互联网-夏天 发布时间:2023-03-23 浏览:36822 赞(89 收藏 评论(0)

网站建设前端优化方法总结

用户访问网页的等待时间,有80%是发生在浏览器前端,特别是页面和页面中各种元素(图片、CSS、Javascript、flash...)的下载之上。


具体说明一下优化的方法∶

对于第一次访问您网站,尚未在浏览器cache中缓存您网站内容的用户,我们可以做的事情包括:

1)减少一个页面访问所产生的http连接次数

对于第一次访问你网站的用户,页面所产生的 http 连接次数是影响性能的一个关键瓶颈。

对策︰

-尽量简洁的页面设计,最大程度减少图片的使用,通过放弃一些不必要的页面特效来减少javascript的使用。

-使用一些优化技巧,比如利用图片的背景位移减少图片的个数;image map技术﹔使用Inline images将css图片捆绑到网页中。

一尽量合并js和css文件,减少独立文件个数。

2)使用gzip压缩网页内容

使用gzip来压缩网页中的静态内容,能够显著减少用户访问网页时的等待时间(据说可达到60% )。主流的web服务器都支持或提供gzip 压缩,如果使用apache服务器,只需要在配置文件中开启mod_gzip ( apache1。x )或 mod_deflate(apache2.x)即可。凡是静态的页面,使用gzip 压缩都能够显著提高服务器效率并减少带宽支出,注意图片内容本身已经是压缩格式了,务必不要再进行压缩.

3)将CSS放在页面顶端,JS文件放在页面底端

CSS 的引用要放在 html的头部 header中,JS文件引用尽量放在页面底端标签的后面,主要的思路是让核心的页面内容尽早显示出来.不过要注意,一些大量使用js的页面可能有一些js文件放在底端会引起一些难以预料的问题,根据实际情况适当运用即可。

4)使JS文件内容最小化

具体来说就是使用一些javascript压缩工具对js脚本进行压缩,去除其中的空白字符、注释,最小化变量名等.在使用gzip压缩的基础上,对js内容的压缩能够将性能再提高5%。

5)尽量减少外部脚本的使用,减少DNS查询时间

不要在网页中引用太多的外部脚本,首先,一次dns的解析过程会消耗20-120毫秒的时间;其次,如果在页面中引用太多的外部文件(如各种广告、联盟等代码),可能会因为外部文件的响应速度而将你的网站拖得很慢.如果不得不用,那么就尽量将这些脚本放在页脚吧。不过有一点需要提及,就是浏览器一般只能并行处理同一域名下的两个请求,而对于不同子的域名则不受此限制,因此适当将本站静态内容( css , js )放在其他的子域名下(如static.xxx.com )会有利于提高浏览器并行下载网页内容的能力。

对于您网站的经常性访问用户,主要的优化思路就是最大限度利用用户浏览器的cache来减少服务器的开销。

dd6bf88a05e758d6b284f92b6adafb5d_毒霸看图.jpg

1)在header 中添加过期时间(Expires Header )

在header中给静态内容添加一个较长的过期时间,这样可以使用户今后访问只读取缓存中的文件,而不会与服务器产生任何的交互。不过这样做也存在一些问题,当图片、CSS和js文件更新时,用户如果不刷新浏览器,就无法获得此更新。这样,我们在对图片、css和js文件修改时;必须要进行重命名,才能保证用户访问到最新的内容。这可能会给开发造成不小的麻烦,因为这些文件可能被站点中的许多文件所引用。flickr提出的解决办法是通过url rewrite使不同版本号的URL事实上指向同一个文件,这是一个聪明的办法,因为url级别的操作效率是很高的,可以给开发过程提供不少便利。

2)将css和js文件放在独立外部文件中引用

将css和js文件放在独立文件中,这样它们会被单独缓存起来,在访问其他页面时可以从浏览器的高速缓存中直接读取。一些网站的首页可能是例外的,这些首页的自身浏览可能并不大,但却是用户访问网站的第一印象以及导向到其他页面的起点,也可能这些页面本身使用了大量的ajax局部刷新及技术,这时可以将css和js文件直接写在页面中。

3)去掉重复的脚本

在正中,包含重复的js脚本会导致浏览器的缓存不被使用,仔细检查一下你的程序,去掉重复引用的脚本应该不是一件很难的事情.

4)避免重定向的发生

除了在 header中人为的重定向之外,网页重定向常在不经意间发生,被重定向的内容将不会使用浏览器的缓存。比如用户在访问www。XXx。com,服务器会通过301转向到www.xxx。com/,在后面加了一个“I”.如果服务器的配置不好,这也会给服务器带来额外的负担。通过配置apache的alias或使用mod_rewrite模块等方法,可以避免不必要的重定向.

做完了上述的优化,可以试着用yslow测试一下网页的性能评分,一般都可以达到70分以上了。

当然,除了浏览器前端和静态内容的优化之外,还有针对程序脚本、服务器、数据库、负载的优化,这些更深层次的优化方法对技术有更高的要求。

图片1.png 

 

———————————————————————————————————————————————————————

        重庆互联网项目从2004年开始为各行各业提供互联网发展解决方案,专业从事网站、小程序、微信公众号、APP、电商平台、系统等互联网平台开发,帮助企业实现从传统行业到互联网的完美转型。截止目前,重庆互联网合作的企业遍布全国各地,19年的开发经验和完善的售后服务体系获得合作客户的高度认可!

网友留言评论
我要评论
评论

欢迎广大用户为此页面进行评价,评价成功将获得积分奖励!

  • 赞(0
    踩(0
重庆网站定制建设
  • 重庆网站建设平台
  • 重庆网站优化公司
  • 重庆网络推广公司哪家好
  • 重庆APP制作公司
版权所有 ©2004-2024 重庆市渝中区圣灵科技信息有限公司 渝ICP备16004600号-14 渝公网安备50010802001420号 电子营业执照
重庆公众号制作哪家好
二维码
联系客服 重庆商城网站建设