Web前端优化,提高加载速度
可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系。我只能说,too young too simple。事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传送到浏览器的,那剩余的时间去哪儿了?来瞄一下性能黄金法则:
只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。
一、减少HTTP请求
上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此,改善响应时间最简单的途径就是减少HTTP请求的数量。
从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少。
二、使用CDN
如果应用程序web服务器离用户更近,那么一个HTTP请求的响应时间将缩短。另一方面,如果组件web服务器离用户更近,则多个HTTP请求的响应时间将缩短。
CDN(内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。在优化性能时,向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如,CDN可能选择网络阶跃数最小的服务器,或者具有最短响应时间的服务器。
CDN还可以进行数据备份、扩展存储能力,进行缓存,同时有助于缓和Web流量峰值压力。
CDN的缺点:
1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。
2、如果CDN服务质量下降了,那么你的工作质量也将下降
三、添加Expires头
页面的初次访问者会进行很多HTTP请求,但是通过使用一个长久的Expires头,可以使这些组件被缓存,下次访问的时候,就可以减少不必要的HTPP请求,从而提高加载速度。
Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本,直到指定的时间为止。例如:
Expires: Fri, 18 Mar 2016 07:41:53 GMT
Expires缺点: 它要求服务器和客户端时钟严格同步;过期日期需要经常检查
HTTP1.1中引入Cache-Control来克服Expires头的限制,使用max-age指定组件被缓存多久。
Cache-Control: max-age=12345600
五、将样式表放在头部
首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止“白屏”。
我们总是希望页面能够尽快显示内容,为用户提供可视化的回馈,这对网速慢的用户来说是很重要的。
更样式表相同,脚本放在底部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现。
js的下载和执行会阻塞Dom树的构建(严谨地说是中断了Dom树的更新),所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。
内联脚本或者样式可以减少HTTP请求,按理来说可以提高页面加载的速度。然而在实际情况中,当脚本或者样式是从外部引入的文件,浏览器就有可能缓存它们,从而在以后加载的时候能够直接使用缓存,而HTML文档的大小减小,从而提高加载速度。
影响因素:
1、每个用户产生的页面浏览量越少,内联脚本和样式的论据越强势。譬如一个用户每个月只访问你的网站一两次,那么这种情况下内联将会更好。而如果该用户能够产生很多页面浏览量,那么缓存的样式和脚本将会极大减少下载的时间,提交页面加载速度。
2、如果你的网站不同的页面之间使用的组件大致相同,那么使用外部文件可以提高这些组件的重用率。
加载后下载
异步与即时
什么样的AJAX请求可以被缓存?
POST的请求,是不可以在客户端缓存的,每次请求都需要发送给服务器进行处理,每次都会返回状态码200。(可以在服务器端对数据进行缓存,以便提高处理速度)
GET的请求,是可以(而且默认)在客户端进行缓存的,除非指定了不同的地址,否则同一个地址的AJAX请求,不会重复在服务器执行,而是返回304。
Ajax请求使用缓存
在进行Ajax请求的时候,可以选择尽量使用get方法,这样可以使用客户端的缓存,提高请求速度。
转载于:https://www.cnblogs.com/larennani/p/6741275.html
Web前端优化,提高加载速度相关推荐
- 汇总:web前端优化网页加载速度
前言: 网页的加载流程:打开一个网页,会先拉取一个html页面,然后浏览器解析了这个html页面后,会根据页面的内容,去拉取javascript.css和图片文件,最终根据这些文件,将页面渲染出来.影 ...
- .net Redis缓存优化提高加载速度和服务器性能(二)
上文详细测试了每次都读取数据库的接口和通过缓存读取接口的性能对比 这里我们就准备实际简介肿么将原来的数据库加上Redis缓存优化部分接口 1.下载Redis和Redis视图管理工具 点击下载 提取码: ...
- .net Redis缓存优化提高加载速度和服务器性能(一)
距离上次服务器将图片转义至oss服务器提交加载速度已经有一段时日了 对于图片转移至oss服务器优化前后的结果可以查看我之前编写的文章点击查看 如今随着商户数的增多,数据的增多,服务器的性能再一次达到了 ...
- 前端提升页面加载速度
性能黄金法则: 只有10%~20%的最终用户响应时间花在了下载HTML文档上.其余的80%~90%时间花在了下载页面中的所有组件上. 提升加载速度的方式: 一.减少HTTP请求 (1).合并脚本 和样 ...
- Dns-prefetch DNS 预解析优化页面加载速度
Dns-prefetch DNS 预解析优化页面加载速度 浏览器访问一个链接时并不是直接将请求到网页对应的服务器上,而是先要做域名解析--将域名解析到网页对应的服务器 ip 地址,然后浏览器才能和服务 ...
- win10浏览器加载很慢_Win10 Edge浏览器打开缓慢如何提高加载速度
升级Win10系统的用户大多都在体验最新的Edge浏览器,为什么Edge能够挑战老牌IE的地位,成为Win10默认浏览器呢?微软官方给出的答案是Edge浏览器访问网页更流畅.耗电更少.集成功能更多.可 ...
- 前端性能优化:页面加载速度慢怎么办?
文章目录 前端性能优化 如何识别页面加载速度慢的原因 性能优化的方式 提高资源的请求速度 http缓存 --提升二次访问的响应速度 CDN缓存静态资源缓存 webpack的hash策略-文件资源缓存 ...
- 可以用到项目的优化网站加载速度方案
1.合并图标,减少网络请求 合并图标是减少网络请求的常见的优化手段,网页中的小图标特征是体积小.数量多,而浏览器同时发起的并行请求数量又是有限制的,所以这些小图标会严重的影响网页的加载速度,阻碍关键内 ...
- 如何优化页面加载速度
小于2秒的页载入时间被认为是优良的,而且高达4秒是可接受的.而大于5秒的页面载入时间不仅影响你网站的搜索引擎排名,还会严重影响用户体验.这里列出了10种方法,可以快速提升你网站的性能. 1. 优化图像 ...
最新文章
- Spyder导入已有文件夹
- Golang 为什么不能直接将任意类型数组赋值给 []interface{}完成泛型操作
- CSS美化滚动条的方法
- PREFACE FPGA经典案例序言
- jboss 不适用内置日志_适用于孩子,父母和祖父母的JBoss HornetQ –第1章
- Feign接口 多线程问题
- Linux系统简介与准备
- “我在小公司混,有没有资格去知名技术大会上做分享?”
- Modelsim软件的使用教程
- 清华山维EPS二次开发VBS基础篇
- scrapy爬取统计局的城乡代码,以目录文件夹形式生成,同时最后保存在excel中
- 使用Auto.js实现微信自动发朋友圈脚本
- 如何制作Android语音机器人
- 【OOC学习19】TKBrep:边界表示法的实现
- Nginx源码完全注释(4)ngx_queue.h / ngx_queue.c
- 微信小程序授权登录取消授权重新授权处理方法 附可用代码
- Excel函数大全(Excel Function List)-Part 1
- 用google搜索图书的方法
- AI模型也需要资产管理,星环科技推出AI运营平台MLOps星环科技星环科技
- Translation idea插件