Web前端性能优化策略
前端性能优化需要从前端的资源类型分析,以减少请求资源和请求时间为目的。目前的类型包括图片、javascript、css、动态数据等,不同的资源对于运算、带宽等的依赖也不同,因此优化的方式也不同。参照以往的经验和雅虎前端优化的策略,本系统分为以下方面:
1)根据浏览器加载数据的顺序不同,将加载的位置分为head内部和body之后
a:css尽可能的放到head内部;
b:javascript放到body之后;
2)减少数据请求的次数,减少服务器请求时间
a:合并不必要的单次后端请求;
b:首界面采用懒加载,列表页采用分页加载;
c:javascript合并;
d:css合并;
e:2k以内的请求采用get请求,反之采用post请求;
3)通过数据压缩,减少数据传输的时间
a:服务器请求采用gzip压缩;
b:banner图片采用图片压缩,压缩到200kb左右;
c:javascript和css采用数据压缩;
4)通过数据缓存增加请求的速度
a:图片资源,javascript、css配置cdn;
b:页面静态资源配置页面缓存;
5)多域名请求
a:将数据库、图片、应用程序等功能分开存储请求;
b:根据不同的业务划分不同的域名服务器;
6)负载均衡
a:设定负载均衡,包括应用程序负载和数据库负载处理;
7)硬件配置提升
a:增加网络带宽;
b:增加服务器处理能力;
Web前端性能优化策略的更多相关文章
- Web前端性能优化教程09:图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看: 一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...
- Web前端性能优化的9大问题
1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...
- 网站的高性能架构---Web前端性能优化
网站性能测试 不同视角下的网站性能 用户视角的网站性能:从用户角度,网站性能就是用户在浏览器上直观感受到的网站响应速度.用户的感受时间包括用户计算机和网站服务器通信的时间.网站服务器处理请求时间.用户 ...
- Web前端性能优化全攻略
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...
- Web前端性能优化全攻略[转载]
1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...
- 大型网站技术架构(3):WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
- 性能优化——Web前端性能优化
核心知识点: 1.排查网站性能瓶颈的手法:分析各个环节的日志,找出异常部分 2.Web前端:网站业务逻辑之前的部分(浏览器.图片服务.CDN) 3.优化手段 1)浏览器优化 (1)减少http请求 a ...
- web前端性能优化的技巧
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
- 前端进阶(1)Web前端性能优化
前端进阶(1)Web前端性能优化 Web前端性能优化, 不仅能够改善站点的用户体验,并且能够节省相当的资源利用.下面将从1)服务器.2)html内容.3)css. 4)javascript. 5)图片 ...
随机推荐
- Zookeeper系列五:Master选举、ZK高级特性:基本模型
一.Master选举 1. master选举原理: 有多个master,每次只能有一个master负责主要的工作,其他的master作为备份,同时对负责工作的master进行监听,一旦负责工作的mas ...
- react跳转url,跳转外链,新页面打开页面
react中实现在js中内部跳转路由,有两种方法. 方法一: import PropTypes from 'prop-types'; export default class Header exten ...
- 微信小程序中使用Async-await方法异步请求变为同步请求
微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...
- python concurrent.futures.Threadpoolexcutor的有界队列和无界队列
1.默认是无界队列,如果生产任务的速度大大超过消费的速度,则会把生产任务无限添加到无界队列中,这样一来控制不了生产速度,二来是会造成系统内存会被队列中的元素堆积增多而耗尽. 2.改写为有界队列 cla ...
- [Python] 01 - Number
故事背景 一.大纲 如下,chapter4 是个概览,之后才是具体讲解. 二. 编译过程 Ref: http://www.dsf.unica.it/~fiore/LearningPython.pdf
- scala中隐式转换之隐式类
/** * Created by root * Description :隐式类: * 1.其所带的构造参数有且只能有一个:并且构造器的参数是转换之前的对象 * 2.隐式类必须被定义在类,伴生对象和包 ...
- PHP在linux读取word文档
几天帮朋友解决一个技术问题,在Linux下,将word文档中的内容读取,然后使用正则匹配,拼成sql入库 查阅了外文资料和google之后,步骤如下: #wget http://www.winfiel ...
- Android Studio开发第二篇创建新项目
创建新项目很简单,File-New-New Project,这个没什么好说的跟Eclipse都差不都. 第二步SDK选择,有手机平板还有Wear,TV,汽车Auto,谷歌眼镜等几个种平台,这里就先选择 ...
- js -【 数组】判断一个变量是数组类型的几种方法
怎么判断一个数组是数组呢? 其实这个也是一个常考的题目.依稀记得我为数不多的面试经过中都被问道过. 方案一: instanceof variable instanceof Array 解决思路: 使用 ...
- [原]Jenkins(二)---jenkins之Git+maven+jdk+tomcat
/** * lihaibo * 文章内容都是根据自己工作情况实践得出. *版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/5331 ...