web性能优化--减少客户端请求数(一)
- 多图标合并,用css分隔
- 设置较长时间的过期时间
- 合并多个css文件
- 合并多个js文件
- 根据域名划分内容
首先介绍一款速度测试工具:webpagetest(填上url,username,password就开始测试了)
这就是测试结果了
也可以通过时间帧去测试网页速度,推荐工具:ScreenerToGif
首先先来了解下浏览器渲染步骤:
1.首先浏览器解析HTML标记去构造DOM树
2.然后解析css去构造CSSOM树
3.再将DOM和CSSOM树结合渲染树之前,JS文件被解析和执行
那么就存在阻塞渲染了,css阻塞渲染,js阻塞渲染
1.解决css阻塞渲染
将关键css内嵌到页面中,将最重要的(首次加载时可见的部分页面所使用到的)style写入到head中的<style></style>里
样式数据放在顶部
2.解决js阻塞渲染
在<script></script>标签中使用async或者defer特性。
async:将会在html解析时下载该文件并在下载完成后立马执行
defer:将会在HTML解析时下载该文件并在HTML解析完成后执行
将js放在底部
3.设置较长时间的过期时间
对于不经常变化的css可以设置较长的过期时间
4.多图标合并,用css分隔
通过css sprites来整合图像
如果页面中有6个小图像,那么浏览器在显示时会分别下载,这时可以通过css sprites将这些图片合并成一个,可以减少页面加载所需时间
5.合并多个css/js文件,减少请求http耗时
6.根据域名划分内容
浏览器一般对于同一个域的下载连接数有所限制,根据域名划分下载内容可以增大浏览器并行下载连接,但是注意控制域名使用在2-4个之间,不然dns查询也是个问题。一般网站规划会将静态资源放在static.exapmle.com,动态内容放在www.example.com上。好处是可以避免在静态域名上使用cookie
本文参考:高性能网站建设
web性能优化--减少客户端请求数(一)的更多相关文章
- 页面优化——减少HTTP请求数
1.关于减少http请求数 关于减少http请求数,是前端开发性能优化的一个非常重要方面,所以在基本所有的优化原则里,都有这一条原则:减少http请求数. 先不考虑其他的,我们先考虑为什么减少http ...
- 前端性能优化 —— 减少HTTP请求
简要:对于影响页面呈选 的因素有3个地方:服务器连接数据库并计算返回数据 , http请求以及数据(文件)经过网络传输 , 文件在浏览器中计算渲染呈选: 其中大约80%的时间都耗在了http请求上,所 ...
- 前端性能优化-减少http请求,dns预解析,减少repaint和reflow
前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义: ...
- 前端性能优化---减少http请求数量和减少请求资源的大小
减少http请求数量:就是资源的合并 减少http请求大小:就是资源的压缩 一.资源合并的原理: 资源不合并的缺点: 1.文件和文件之间有插入请求----请求a.js,b.js,c.js(三行 ...
- web性能优化--减少DOM操作(三)
减少DOM数量 减少DOM操作 批量处理DOM操作 批量处理样式修改 尽量不要使用tabel布局 尽量不要使用css表达式 string用数组join css选择符优化 1.减少DOM数量 在HTML ...
- 515,前端性能优化--减少http请求(待补充)
对于影响页面呈选的因素有三个地方:服务器连接数据库并计算返回数据,http请求以及数据(文件)经过网络传输,文件在浏览器中计算渲染呈选:其中大约80%的时间都消耗在了http的请求上,所以要想大幅度的 ...
- Web性能优化-合并js与css,减少请求
Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...
- Web 性能优化: 图片优化让网站大小减少 62%
摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...
- web性能优化——浏览器相关
简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...
随机推荐
- http协议详解之响应报文 3
--------------响应示例--------------------------response#状态行HTTP/1.1 200 OK #协议及版本号.状态码.状态描述 #消息报头Date: ...
- Redis 常用命令 大全
Redis 常用命令 发现几个很好的 Redis 常用命令汇总大全网页,分享给小伙伴们~ 1.Redis 命令参考 http://redisdoc.com/string/index.html 2.W3 ...
- zabbix_server调优
调整zabbix_server参数 /usr/local/zabbix/etc/zabbix_server.conf StartPollers=160 StartPollersUnreachea ...
- 【ABAP系列】SAP ABAP7.40新语法简介第一篇
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP7.40新语法简 ...
- cocos2dx[3.2](6) 节点类Node
与2.x相比,节点类Node的属性和功能做了大幅度的修改与增加. Node类是绝大部分类的父类(并不是所有的类,例如Director类是直接继承Ref类的),如Scene.Layer.Sprite以及 ...
- [JS] 文本框判断输入的内容是否为数字
可以通过触发文本框的onchange事件来对输入的内容进行判断是否为数字 文本框的属性设置: 把onchange的属性对应的js函数写好即可 参数传输的是当前控件的value值,即text值 < ...
- Jetty启动报错排查org.eclipse.jetty.util.MultiException: Multiple exceptions
最近自己搭建了一个spring的项目,使用Maven做项目构建,使用JDK8,为了方便启动就使用jetty作为启动容器,但是却无意间步入了一个坑 [WARNING] Failed startup of ...
- ICPC Asia Nanning 2017 F. The Chosen One (大数、规律、2的k次幂)
Welcome to the 2017 ACM-ICPC Asia Nanning Regional Contest.Here is a breaking news. Now you have a c ...
- Editor placeholder in source code错误
When you insert code via autocompletion (or via a code snippet, sometimes), there may be placeholder ...
- Luogu P3942 将军令
题目 维护每个点子树中最深的没有被覆盖的点(仅计算这条链上的关键点)的距离. 若\(u\)为关键点,则\(d_u=-k-1\). 记录\(mx=\max\limits_{v\in son_u}d_v+ ...