1.减少Http请求

   在一个页面中图片,CSS,JS可能N个,如果每个资源都去请求一次服务器的话,那么服务器就会为每个资源开一个线程来完成,这样的话对服务器的压力就很大了。所以解决的方法就是合并资源。

  图片合并:可以多个图片合并成一张图片,用偏移的方法来显示不同的图片(backgroup-position:x y;)

  CSS和JS合并:C#(MVC)用BundleConfig.cs来解决多个CSS和JS文件,只需要一次请求。(Global.asax里面要开启BundleTable.EnableOptimizations)

2.缓存

  可以将网页中频率使用比较高,但是更改比较少的资源进行缓存。像这些资源有Logo,JS,CSS...等等。我们可以在http请求中的Cache-control和Expires属性来进行设置它的缓存时间,来进行缓存这些资源。如果说对某个CSS进行缓存,但是我要更改了这个CSS文件怎么让浏览器使用我更改后的CSS文件呢?解决方法就是更改CSS文件名就可以。JS和logo等等这些都是一样的。如果有多个缓存文件都要更新,不要同时更新尽量一个一个的去更新。这样可以减少服务器压力。

  

3.压缩

  服务器可以对文本压缩,客户端进行解压。这样可以减少通信传输数量。因此像html,js,css文件可以启用Gzip压缩来进行传输。但是它还有一个弊端就是服务器需要压缩,客户端需要解压,所以就是对服务器和浏览器造成压力。如果说网络通信比较好的则不需要考虑这项来进行优化了。

  

4.css在前,JS在后

  就是在一个页面中尽量把css放在页面的前面,JS放在页面的后面。因为JS会造成阻塞,这样会阴影页面的渲染。我说的尽量不是一定要这样做,有时候我们需要JS解析页面的时候就不适合放在最后面了。

5.慎用Cookie

  因为cookie包含在每次请求和响应中,如果太大的Cookie数据的话会严重影响数据传输。所以那些数据需要用到cookie来存储自己一定要把握好,用不好会影响用户体验。建议像CSS,JS文件就不要用cookie存储,可以考虑用静态域名访问独立服务器。

6.CDN

  CDN(Content Distribute Network 内容分发网络)它其实就是一个缓存,它是将数据缓存到离用户最近的地方。如下图。可以看到客户端可以以最快的速度就可以获取到静态资源(也就网络访问第一跳)。所以CDN可以放一些访问比较频繁的资源,(如:图片,CSS,JS...等等)。比如淘宝海量图片就是CDN来解决的。

7.反向代理服务器

  代理服务器可以配置缓存来缓存静态资源。当用户第一次服务器就可以把静态资源缓存了代理服务器上。其它用户再次访问的时候就可以在代理服务器上获取资源了。反向代理服务器不仅仅是缓存资源,

  1.它还可以保证网站的安全的功能,因为所有访问都是必须要经过反向代理服务器。所以可以在反向代理服务建立一道屏障,从而减少网络攻击。(有一夫当关,万夫莫开的感觉)

  2.它还可以完成负载均衡的功能,通过负载均衡构建的应用集群可以提高系统总体处理能力,从而改善网站高并发情况下的性能。

  看到上面的图给我的感觉有点像AOP(面向切面编程:就是一个点控制多个面)。反向代理服务器就是一个点,集群服务器就是多个面。网站权限功能就是AOP来完成的,网站权限也是出于安全考虑。所以给我的感觉上面的图有点类似AOP工作原理

总结:如果你的网站不是唯一性的话(唯一性就是互联网中只有一个,如12306网站),那么就要考虑到网页的响应时间了。响应时间遵循2,5,8定律,也就是说2秒之内响应,用户体验较好。5秒之内响应,用户还可以接受。8秒钟之内,可能就会流失用户了。在这个竞争这么激烈的互联网中,如果你的网站用户体验不好的话,就会流失用户群了。

  (本人学识有限,文章如有误,愿见谅。希望能指出来,以免误人子弟了。^_^)

Web前端 优化方案的更多相关文章

  1. 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

  2. [转] Web前端优化之 Server篇

    原文链接: http://lunax.info/archives/3093.html Web 前端优化最佳实践第二部分面向 Server .目前共计有 6 条实践规则.[注,这最多算技术笔记,查看最原 ...

  3. web前端优化-温故知新系列(1)

    有关web前端优化的博文,博客园中有许多网友的博客中都有介绍,而且详细.精准.楼主打算写这个博客,算是对自己一年工作来的一个总结和积累有些知识从别的地方拷贝过来的,但是都审查过. 引言: 1. 慢的页 ...

  4. 网站静态化处理—web前端优化—下【终篇】(13)

    网站静态化处理—web前端优化—下[终篇](13) 本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部, ...

  5. 【转】关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

  6. 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

    Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...

  7. 关于大型网站技术演进的思考(十九)--网站静态化处理—web前端优化—上(11)

    网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...

  8. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

  9. [转] Web 前端优化最佳实践之 Mobile(iPhone) 篇

    原文链接:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_mobile.html Web 前端优 ...

随机推荐

  1. 洛谷P3004 [USACO10DEC]宝箱Treasure Chest

    P3004 [USACO10DEC]宝箱Treasure Chest 题目描述 Bessie and Bonnie have found a treasure chest full of marvel ...

  2. [Xcode 实际操作]六、媒体与动画-(7)遍历系统提供的所有滤镜

    目录:[Swift]Xcode实际操作 本文将演示系统到底提供了多少滤镜供开发者使用,并了解每个滤镜都有哪些参数需要配置. 在项目导航区,打开视图控制器的代码文件[ViewController.swi ...

  3. redis之进阶

    redis之进阶   redis redis介绍 redis的功能特性 1,高速读写 2,数据类型丰富 3,支持持久化 4,多种内存分配及回收策略 5,支持事务 6,消息队列.redis用的多的还是发 ...

  4. Codeforces 1114F(欧拉函数、线段树)

    AC通道 要点 欧拉函数对于素数有一些性质,考虑将输入数据唯一分解后进行素数下的处理. 对于素数\(p\)有:\(\phi(p^k)=p^{k-1}*(p-1)=p^k*\frac{p-1}{p}\) ...

  5. UVa1471

    保留有价值的数字的做法,实际上这道题因为n只有1e5,所以不需要这种优化. #include<bits/stdc++.h> #define inf 0x3f3f3f3f ; using n ...

  6. curl_setopt 注意

    最近碰到好多奇怪的BUG,今天就是一个例子. 我在用CURL调用麦考林的接口,在浏览器测试完全没问题,调用全都成功.但是用命令行执行PHP时,却一直不行,返回http code 302错误.百思不得其 ...

  7. Python入门_汇总_未完待续

    if/elseif/else for while break continue 多重循环 list [] duple() dict {} set {[]} 函数 help(abs) 查看abs函数的帮 ...

  8. docker 的目录问题

    今天在使用Dockerfile制作镜像的时候,使用命令 :COPY aaa.sql /usr/test 下时, 总是报错 “INFO[0001] stat /var/lib/docker/aufs/m ...

  9. stm32的低功耗模式:

    一.待机模式.待机模式是低功耗中最低功耗的,内部电压调节电路被关闭,  HSE.HIS.PLL被关闭:进入待机模式后,SRAM和寄存器的内容将丢失.  (CPU停止,外设停止,RAM的数据寄存器的内容 ...

  10. vue学习之路之需要了解的知识汇总

    一.vue是什么? 相关网页:  https://vuejs.bootcss.com/v2/guide/       及菜鸟教程       https://www.runoob.com/vue2/v ...