一般说来Web前端指网站业务逻辑之前的部分,包括浏览器加载、网站视图模型、图片服务、CDN服务等,主要优化手段有优化浏览器访问、使用反向代理、CDN等。

4.2.1 浏览器访问优化

1、减少http请求

合并CSS、合并Javascript、合并图片

2、使用浏览器缓存

对于更新频率低的资源,通过设置HTTP头中的Cache-Control和Expires属性,可设定浏览器缓存,缓存时间可以是数天,甚至几个月。

使用浏览器缓存策略的网站在更新静态资源时,应采用批量更新的方法,比如需要更新10个图标文件,不宜把10个文件一次全部更新,而是应一个文件一个文件逐步更新,并有一定的间隔时间,以免用户浏览器突然大量缓存失效,集中更新缓存,造成服务器负载骤增、网络堵塞的情况。

3、启用压缩

对文本文件,HTML、CSS、Javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。

4、CSS放在页面最上面、Javascript放在页面最下面

浏览器在下载完全部的CSS之后才对整个页面进行渲染,所以最好将CSS放在页面最上面,让浏览器尽快下载CSS。

浏览器在加载Javascript后立即执行,有可能会阻塞整个页面,造成页面显示缓慢,因此最好将Javascript放在页面最下面。

但是如果页面解析就需要用到Javascript,这时放在底部就不合适了。

5、减少Cookie传输

Cookie包含在每次请求中,太大的Cookie会严重影响数据传输,因此哪些数据需要写入Cookie需要慎重考虑,尽量减少Cookie中传输的数据量。

静态资源如CSS、Script使用独立域名访问,避免请求静态资源时发送Cookie,减少Cookie传输的次数。

4.2.2 CDN加速

CDN(Content Distribute Network)本质仍然是一个缓存,而且将数据缓存在离用户最近的地方,使用户以最快速度获取数据,即网络访问第一跳。

CDN能够缓存的一般时静态资源,如图片、文件、CSS、Script脚本、静态网页等,但是这些文本访问频度很高,将其缓存在CDN可极大改善网页的打开速度。

4.2.3 反向代理

反向代理服务器位于网站机房一侧,代理网站Web服务器接收HTTP请求。

互联网访问必须经过代理服务器,具有保护网络安全的作用。

另外,代理服务器可以通过配置缓存功能加速Web请求。

负载均衡也是主要功能,通过负载均衡构建应用集群可以提高系统处理能力,进而改善网站高并发情况下的性能。

大型网站技术架构,4网站的高性能架构之Web前端性能优化的更多相关文章

  1. 大型网站技术架构(3):WEB 前端性能优化

    上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...

  2. 网站的高性能架构---Web前端性能优化

    网站性能测试 不同视角下的网站性能 用户视角的网站性能:从用户角度,网站性能就是用户在浏览器上直观感受到的网站响应速度.用户的感受时间包括用户计算机和网站服务器通信的时间.网站服务器处理请求时间.用户 ...

  3. Web前端性能优化教程05:网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  4. 15套java架构师、集群、高可用、高可扩展、高性能、高并发、性能优化、Spring boot、Redis、ActiveMQ、Nginx、Mycat、Netty、Jvm大型分布式项目实战视频教程

    * { font-family: "Microsoft YaHei" !important } h1 { color: #FF0 } 15套java架构师.集群.高可用.高可扩展. ...

  5. 15套java架构师、集群、高可用、高可扩 展、高性能、高并发、性能优化Redis、ActiveMQ、Nginx、Mycat、Netty、Jvm大型分布式项目实战视频教程

    * { font-family: "Microsoft YaHei" !important } h1 { color: #FF0 } 15套java架构师.集群.高可用.高可扩 展 ...

  6. 【读书笔记】读《高性能网站建设指南》及《高性能网站建设进阶指南:Web开发者性能优化最佳实践》

    这两本书就一块儿搞了,大多数已经理解,简单做个标记.主要对自己不太了解的地方,做一些记录.   一.读<高性能网站建设指南> 0> 黄金性能法则:只有10%~20%的最终用户响应时间 ...

  7. 【前端性能优化】高性能JavaScript整理总结

    高性能JavaScript整理总结 关于前端性能优化:首先想到的是雅虎军规34条然后最近看了<高性能JavaScript>大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅 ...

  8. 网站前端性能优化之javascript和css

    之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...

  9. 架构设计:前后端分离之Web前端架构设计

    在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有 ...

随机推荐

  1. 【监控实践】【4.2】perfmon监控性能计数器(基于typeperf命令)

    关键词:typeperf typeperf 命令 使用示例: 案例1:#使用typeperf收集windows cpu.内存.硬盘性能 #使用typeperf收集windows cpu.内存.硬盘性能 ...

  2. (4.25)Sqlserver中 登录用户只能看到自己拥有权限的库

    Sqlserver中 登录用户只能看到自己拥有权限的库 转自:https://www.cnblogs.com/huangtailang/p/4209180.html 相关参考:https://www. ...

  3. Linux0.11之初识Makefile/build.c

    前言 Makefile对于从来没有接触过的人来说是相当别扭的(比如我),但它确实又是非常重要的,它描述了一个Image是如何形成的,理解它也许并不能帮我解决实际问题,而且编写Makefile的工作也许 ...

  4. 嘉馨学姐又双叒叕来吃包子了 QDUOJ 模拟 尺度法

    嘉馨学姐又双叒叕来吃包子了 QDUOJ 模拟 尺度法 点我进入OJ题目详情 题意 给你一串数,让你求长度最长的子串,这个字串满足里面没有重复出现的数字. 解题思路 使用一个标记数组,来标记每个数的第一 ...

  5. web 过滤器 Filter、 Spring 拦截器 interceptor

    1.过滤器(Filter)(在web.xml中注册过滤器) 首先说一下Filter的使用地方,我们在配置web.xml时,总会配置下面一段设置字符编码,不然会导致乱码问题: <filter> ...

  6. Node.js+webSocket

    // 引入WebSocket模块 var ws = require('nodejs-websocket') var PORT = 3030 var server = ws.createServer(f ...

  7. Codeforces Round #503 (by SIS, Div. 2) E. Sergey's problem

    E. Sergey's problem [题目描述] 给出一个n个点m条边的有向图,需要找到一个集合使得1.集合中的各点之间无无边相连2.集合外的点到集合内的点的最小距离小于等于2. [算法] 官方题 ...

  8. HDU 1594 find the max

    数序问题. 题意是说 一个数列 a1,a2,--ai,--an;  x=i , y = ai:找两个点斜率绝对值.!最大. 第一次没找绝对值,--认真读题. .. x 每次加1 . 仅仅须要找 相邻的 ...

  9. activemq高可用

    这里是基于 zookeeper 选举方式实现的集群配置,服务器过半数才可提供服务,所以是2n+1台这里以三台为例. 只有master节点能提供服务,slave节点无法提供服务,只有当master节点挂 ...

  10. Android模拟器运行慢的解决方案

    在android开发的过程,发现android模拟器的速度不是一般的慢,那主要是因为android模拟器默认采用的是arm处理器造成的,这里主要提供两种方法: ① 利用intel虚拟硬件加速的方式,实 ...