汇总:web前端优化网页加载速度
前言:
网页的加载流程：打开一个网页，会先拉取一个html页面，然后浏览器解析了这个html页面后，会根据页面的内容，去拉取javascript、css和图片文件，最终根据这些文件，将页面渲染出来。影响一个网页展示速度的主要因素不是网页本身，而是它依赖的一些其它文件。如果优化了这些资源的加载速度，那么网页展示的速度也就上去了。
1.优化图片资源的格式和大小
一个网页中，图片资源的大小占比是最多的，而且单个的文件的大小也很可观。因此，在保证图片质量不变的情况下，尽可能的使用高压缩率的图片格式，图片格式可以按照这个优先级选择webp > jpeg > png > bmp。其次在图片太大时，可以采用 Baseline JPEG和Progressive JPEG
Baseline JPEG和Progressive JPEG 区别参考以下文档
https://www.jianshu.com/p/e1b9d9aa9fc0
- Baseline JPEG
- Progressive JPEG
2.Sprites图片技术(雪碧图/精灵图)
Spriting是一种网页图片应用处理方式，它是将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用CSS技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用CSSSprites能很好地减少网页的http请求，从而大大的提高页面的性能。
3.开启网络压缩
大部分浏览器在发出请求时，会带上这个标记「Accept-Encoding: gzip, deflate」，表示这个浏览器可以接受以gzip压缩方式传输数据，如果你的网页服务器也支持gzip压缩数据，那么数据以gzip方式传输时，会减少70～80%的流量。
4.压缩css和js内容
#####这里说的压缩是css和js中有大量的TAB、空格、回车、代码注释、变量命名等（如hello=”hello word”;），如果将这些空格去除，并用简单的字母来代换变量名（如a=”hello word”;），那么这些css和js原文件的大小也会缩小，这样也对加快拉取速度是有帮助的。
5.使用浏览器缓存
同一个站点下面的不同页面，往往都会复用一部分资源文件，如果把这些资源文件设置为可缓存的，那么在刷新或者跳转到另一个页面时，都无须再从网络拉取相关资源，这样就大大加快了网页的加载速度。
6.减少重定向请求
有的网站对于不同的终端制作了不同的页面，比如说在手机上访问微博，会从weibo.com重定向至weibo.cn，每一次重定向都会导致浏览器重新发起请求，延长加载时间。重定向增加了额外的HTTP请求，因此也增加了页面加载时间。然而有时重定向却是不可避免的，如链接网站的不同部分、保存多个域名、或者从不存在的页面跳转到新页面。
7.延迟显示可见区域外的内容
为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容，为了避免页面变形，可以使用占位符标签制定正确的高度和宽度。比如jQueryImage、LazyLoad插件就可以在用户停留在第一屏的时候，不加载任何第一屏以下的图片信息，只有当用户把鼠标往下滚动的时候，这些图片才开始加载。这样很明显提升可见区域的加载速度，提高用户体验。
8.确保功能图片和按钮优先加载
网站主要考虑可用性的重要性，一个功能按钮要提前加载出来，比如秒杀、抢票等
9.把CSS文件放在页面顶部，而JS文件放在底部
把CSS文件在页面顶部引入可以禁止逐步渲染，节省浏览器加载和重绘页面元素的资源。JavaScript是用于功能交互等。把JS文件放在页面底部可以避免代码执行前的等待时间，从而提升页面加载速度。这些都是一些减少页面加载时间和提高转换率的方法。在某些情况下，需要JavaScript在页面的顶部加载（如某些第三方跟踪脚本）。
10.使用CDN存储静态资源
CDN是一种静态内容分发网络，它在每个省，甚至每个城市都部署有自己的服务器，用于分发这些静态内容，那么当某个城市的用户要拉取某个资源时，他会首选从本地的CDN服务器上拉取，这样可以保证他最快速的获得该资源。据砖家统计，网络资源中有70%的是静态资源。这就意味着，有70%的内容产生后是不会变化，那么将它们全部放在CDN上面，可以提升这70%的资源的下载速度。
11.减少DNS查询次数
很多人喜欢把不同的图片挂在不同当域名下，比如说图片A挂在a.pm-teacher.com，图片B挂在b.pm-teacher.com。当一个网页同时使用图片A和图片B时，浏览器需要查询两个域名，要知道，每次解析域名都是会浪费时间的，所以尽可能的将全部图片放在一个域名下。
12.延迟加载和执行非必要脚本
网页中有很多脚本是在页面完全加载完之前都不需要执行的，可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行，避免对网页上重要内容的呈现造成影响。这些脚本可能是你自己网页的脚本，往往更多的是一些第三方脚本，这样的有很多，比如评论、广告、智能推荐、百度云图、分享等等，这些完全可以等主体内容加载完后再执行。
13.精简代码
这个可以说是最直接的一个方法，对网页代码进行瘦身，删除不必要的沉冗代码
优化方案的核心就3点：减少请求数、减少资源大小、找最快的服务器。
汇总:web前端优化网页加载速度相关推荐
- 浅析用Base64编码的图片优化网页加载速度
想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片.如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度.所以现在有一种 ...
- 分享网页加载速度优化的一些技巧？
日期:2013-2-17 来源:GBin1.com 不管你是不是相信,在最近的几年里,互联网网页的大小已经显著增大了.由HTTP Archive研究得出的结果表明,目前平均一个页面的大小是1.25M ...
- uc点网页显示服务器升级,让uc浏览器网页加载速度提升100%
摘要: 3G的最大特征就是网速的极大提升,而这正是 uc浏览器 手机浏览器的立身之本. 版本升级速度再提升100% 新发布的uc浏览器进一步改进了WAP/WEB网页的加载方式,不仅有效提高了浏览器的跳 ...
- 提高网页加载速度的一些方法和技巧
网页的加载速度是评估网站质量一个重要指标,原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网页,所以网页载入速度会极大地影响网站的流量和访问. 以下总 ...
- 【PHP】如何提高网页加载速度？
[php]如何提高网页加载速度? 1.减少页面请求: 从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少. 之前我下载163邮箱 ...
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
- Dns-prefetch DNS 预解析优化页面加载速度
Dns-prefetch DNS 预解析优化页面加载速度 浏览器访问一个链接时并不是直接将请求到网页对应的服务器上,而是先要做域名解析--将域名解析到网页对应的服务器 ip 地址,然后浏览器才能和服务 ...
- Windows Server 2012网页加载速度慢解决方法
Windows Server 2012网页加载速度慢解决方法 背景 现象 问题原因 解决方法 背景 由于项目需要,在 windows server2012 上搭建了基于ssm框架和tomcat的大数据 ...
- 加快网页加载速度的五个有效的方法
加快网页加载速度的五个有效的方法 Filed under: 未分类 | Posted on 五月 1st, 2010 by 林涛 网页尽可能的快速加载对网站非常重要:用户希望快速的查看他们想要看的页 ...
最新文章
- 前端智能化的加速时刻：华为机器视觉的创新方程式
- 集合视图UICollectionView 介绍及其示例程序
- java长度为100的数组_产生一个int数组，长度为100，并向其中随机插入1-100，不重复...
- intel服务器最新主板芯片组,intel主板芯片组的介绍
- 使用VScode + PicGo 写markdown 以及github图片加载不出的问题
- mysql心得笔记_mysql总结笔记
- Linux系统内存管理实验报告,linux内存管理实验报告
- Oracle CASE WHEN 使用及保留两位小数
- Julia : global、local 以及 作用域问题
- 全面剖析雅虎助手以及网络实名的流氓行径(4)
- 【c语言】两个栈实现一个队列
- 前端Hack之XSS攻击个人学习笔记
- spring-boot-maven-plugin爆红
- Win11 “qq无法访问个人文件夹”解决方法（原创）
- linux网卡掉包或挂掉解决办法
- Java基础练习（十二）集合与数组工具类使用，BigDecimal使用，实现二分查找，快速排序
- 我遇见了一个问题求帮助
- 零基础学python要多久？
- spring注解校验
- Wind量化接口常见错误码