网站前端和后台性能优化1
减少HTTP请求数量 (Minimize HTTP Requests)
tag:content
80%的用户响应时间被花费在前端，而这其中的绝大多数时间是用于下载页面中的图片、样式表、脚本以及Flash这些组件。减少这些组件的数量就可以减少展示页面所需的请求数，而这是提高网页响应速度的关键。
朴素的页面设计当然是减少组件的一种途径，但有没有能兼顾丰富的页面内容和快速的响应速度的方法呢？下面就是一些不错的技巧，能在提供丰富的页面展现的同时，减少Http请求数量：
合并文件，通过把所有脚本置于一个脚本文件里或者把所有样式表放于一个样式表文件中，从而减少Http请求的数量。当不同页面需要应用不同的脚本或样式时，合并这些文件会是一个很大的挑战，不过在发布网站时进行这种合并，将是提高网站响应速度的重要一步。
CSS Sprites是减少图片请求的首选方案。把所有的背景图片合并到一张图中，使用CSS的background-image 和background-position 属性去控制展现恰当的图片区域。
Image maps把多张图片组合成为一张图片。图片的总大小是不变的，但减少Http请求数会提高页面的响应速度。Image maps只能用于图片在网页中相邻的情况，比如导航条。制定image maps中的图片坐标是个很麻烦的过程，而且容易出错。同时给导航使用image maps也并不易读，所以并不推荐使用。
内联图片使用data: URL scheme 把图片数据嵌入页面，但这会增加Html文档的大小。把内联图片合并到你被缓存的的样式表中是一个能既减少HTTP请求数又不会增加页面大小的方法。但目前并不是所有的主流浏览器都支持内联图片。
减少页面的Http请求数量是第一步，而且对于提高用户初次访问体验是最重要的一步。正如在 Tenni Theurer的blog中的Browser Cache Usage - Exposed!里描述的，每天，有 40%-60%的访客并没有你的网站的缓存文件。提高这些初次访客的访问速度是提高用户体验的关键。
网站前端和后台性能优化1相关推荐
- 网站前端和后台性能优化的34条经验和方法
1 减少HTTP请求数量 (Minimize HTTP Requests) tag:content 80%的用户响应时间被花费在前端,而这其中的绝大多数时间是用于下载页面中的图片.样式表.脚本以及Fl ...
- 网站前端和后台性能优化18
预先加载组件 (Preload Components) tag:content 预加载看起来和后加载原则是个矛盾,但它其实是为了另外一个目的.预加载组件让你可以利用浏览器的空闲时间来加载之后需要的组件 ...
- 网站前端和后台性能优化24
为部件使用没有cookie的域名 Use Cookie-free Domains for Components tag:cookie 当浏览其请求一个静态图片并一同发送cookie时,服务器并不需要这 ...
- 网站前端和后台性能优化22
避免404错误 No 404s tag:内容 一个获得没用的404响应的HTTP请求对于宝贵的HTTP请求资源来说是完全不必要的,而且这样还会减慢用户的体验. 有的网站提供了有帮助的404错误信息,比 ...
- 网站(前端、后端)性能(架构)优化手段
网站的性能测试 性能测试是性能优化的前提,也是性能优化结果的检查和度量标准.温馨提示:本文内容有点长,请耐心看完或者先收藏. 性能测试的常用指标: 响应时间 并发数目 吞吐量.常用的吞吐量指标: ...
- 前端工程与性能优化：静态资源版本更新与缓存
2019独角兽企业重金招聘Python工程师标准>>> 每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问题.我们有雅虎14条性能优化原则,还有两本很经典的 ...
- 全方位分析web前端如何进行性能优化
前言: 最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教. 1.整体资源 (1)js.css源码压缩 (2)css文件 ...
- 【chrome devtools】前端性能分析之chrome devtools的使用 前端项目内存性能优化的建议 前端浏览器崩溃卡死 前端性能分析实战
最近有个项目,静置一段时间,chrome内存一直上涨.就像是这样: 内存会慢慢悄悄的往上涨,最终可以到达2000多M,直至浏览器崩溃卡死.很明显,这应该是内存泄漏了. 但是只知道内存泄漏,并不知道究竟 ...
- 鸟瞰前端 , 再论性能优化
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 导语 : 从事前端有6年 的时间了,从最开始的美工到重构再到偏向js逻辑开发的前端开发,一直在前端这个行业里面摸索和学习,我现在将自己这些 ...
最新文章
- java开发webservice的几种方式
- Linux下的shell脚本实战之用户创建
- HDU - 6514 Monitor(二维差分)
- POJ2406-Power Strings【KMP】
- 提高速度 - MyEclipse配置
- Python 元组tuple - Python零基础入门教程
- [渝粤教育] 中国地质大学 现代控制理论 复习题 (2)
- freeswitch 会议创建命令
- 寻找春天nbsp;九宫格日记-2011.04.17
- 【WIN10更改鼠标指针默认图标】
- 今日得闲，完善一下之前用python画的滑稽笑脸的代码，附计算过程
- 解决微信、QQ在一加手机系统中无法限制后台的问题
- matlab开环传递函数 求单位负反馈的系统传递函数,利用matlab由开环传递函数求闭环传递函数并求其单位冲击和阶跃响应...
- Anaconda =＞ PyCharm =＞ CUDA =＞ cudnn =＞ PyTorch 环境配置
- Debian 11 “bullseye” 发布
- Unity3D疫情传播模拟器完整代码
- 中关村“染指”番茄花园
- T507|全志T507核心板价格|芯片参数配置|资料|原理图|性能|功耗-飞凌
- 学历既是敲门砖，又可能成为枷锁
- Hector代码原理推导