前端性能优化(四)——网页加载更快的N种方式
网站前端的用户体验,决定了用户是否想要继续使用网站以及网站的其他功能,网站的用户体验佳,可留住更多的用户。除此之外,前端优化得好,还可以为企业节约成本。那么我们应该如何对我们前端的页面进行性能优化呢?
前端性能优化可以分为三个方面:接口访问优化、静态资源优化和页面渲染速度优化。
一、接口访问优化
1.1、减少http请求,合理设置 HTTP缓存
http协议是无状态的应用层协议,每次发送http请求时,都需要建立连接、通信、断开连接,在服务器端每个http都需要开启独立的线程去处理。所以尽量减少http请求,尽可能地提高访问性能。
减少http请求的方法:
- 合并 js、css、图片等文件,合并成一个文件,浏览器就只需请求一次就可以了。图片合并要适当,不能想着优化呢,盲目地都合并成一张图片。
- 借用浏览器缓存。恰当的缓存设置可以大大减少http请求。不懂浏览器缓存的可参考《浏览器九大缓存方法》。
- 接口合并。前端交互,经常需要请求多个并行或串行接口,此时可以通过接口合并方式,提高接口访问速度。
- 能使用css的尽量不使用js,能使用js的尽量不用三方插件,避免三方插件大量的库。
1.2、减少cookie传输
cookie 存在于 http 头,在客户端与服务器之间交换,尽可能地控制 cookie 的大小,cookie越小,响应速度越快,减少 cookie 传输,响应速度更快。
1.3、使用CDN提供静态文件
使用 CDN 可以更快地在全球范围内获取到你的静态文件,加快网页加载。
1.4、启用 GZIP 压缩
http 协议上 GZIP 编码,是一种用来改进 web 应用程序的。开启 GZIP 后,服务器会把网页内容压缩后传输,一般能压缩到原大小40%,这样网页传输速度就更快了。GZIP 有两大好处:一是减少存储空间,二是通过网络传输文件时,可以减少传输时间。
1.5、分域存放资源
HTTP 客户端一般对同一个服务器的并发连接个数都是有限制的,通常最大并行连接为四了,剩下的会进入等待队列,等前边的执行完毕,等待的才会执行。所以利用多域名主机存放资源,增加并行连接量,缩短资源加载时间。
1.6、减少页面重定向
开启 https 可以有效防范攻击,保证用户始终访问到网站的加密连接,保护数据安全,同时省去 301/302 跳转的时间,大大提升网站的安全系数和用户体验。
如果在网站设置当用户访问域名的时候强制 https 进行 301 或者 302 跳转,但是这个过程中,用到 HTTP 因此容易发生劫持,受到第三方的攻击。所以尽可能使用https安全。
1.7、避免使用iframe
iframe 相当于本页面又嵌套了一个页面,消耗性能,还要加载嵌套页面的资源,所以更消耗时间。
1.8、借用浏览器缓存
ajax 请求到的数据,可以缓存到浏览器,下次使用的时候无需再次获取,直接取缓存数据就可以。这个会根据具体的项目来做,比如常用的角色类型就会缓存,获取到的普通数据为了保证实时性,不能使用缓存。
二、静态资源优化
2.1、压缩 html、css、js 等文件
删除不必要的空格、注释和中行,减少文件大小,显著减少用户下载时间,加快网页加载速度。可以直接使用压缩工具,可以自动删除所有不必要内容。
2.2、在 js 之前引用 css
这是一个小细节,js 执行的时候会进入阻塞,如果放入 js 之后加载,会等待 js 执行完成之后才能加载 css,渲染页面,此时就会出现布局错乱。所以 css 文件需要非阻塞引入,以防DOM 花费更多时间才能渲染。
2.3、非阻塞 js
js 会阻止 html 文档的正常解析,当解析器到达 script 标记时,它会停止解析并执行脚本。所以我们经常把 script 引入的 js,放到 html 中最底下。如果需要让脚本位于页面顶部,建议添加非阻塞属性。经常使用 defer 和 async 来异步加载js文件。
<!-- 使用defer -->
<script defer src="foo.js" ></script>
<!-- 使用async -->
<script async src="foo.js"></script>
2.4、图片压缩
最常见的就是 css 雪碧,就是将很多很多的小图标放在一张图片上,就称为雪碧图。雪碧图最大优点就是可以减少http请求,除此也能压缩图片文件大小。使用的时候,通过设置 background-position ,移动图片的位置。除此之外,网站用到的大图,也需要在保证图片质量前提下优化到最小。
2.5、矢量图替代位图
矢量图(SVG)往往比图像小很多,缩放的时候不失真,这些图像还可以通过 css 进行动画和修改,比位图方便控制。可以的话,尽量用矢量图多点。
2.6、js代码相关优化
- 尽量减少使用闭包,因为闭包所在的上下文不会被释放。
- js避免嵌套循环和死循环,一旦遇到死循环,浏览器会卡死。
- 在js封装过程中,尽量做到低耦合高内聚。减少页面的冗余代码。
- 尽量减少递归,避免死递归。
- 尽量使用window.requestAnimationFrame替代传统的定时器。
三、页面渲染速度
3.1、懒加载
素材类的网站,页面一屏展示很多图片,而且图片还不能失真,图片加载太多,网页加载慢得很,所以就引用懒加载,只加载可视区的图片,避免加载可以能不需要或不必要的图像。改善页面的响应时间。
3.2、避免响应式布局
响应式网站虽然能够兼容所有终端设备,但是会出现隐藏部分无用内容,浪费带宽,加载时间还长,页面的渲染时间也长。想更多了解响应式布局,请点击《前端响应式布局为什么是个坑?》。
3.3、设置大小,避免重绘
遇到 img 标签,会立马发送一个 http 请求,下载图片,页面继续向下渲染,等图片加载成功了,发现图片的宽高大小发生变化,影响后边排版,所以页面会重新再绘制一次这部分。所以尽可能设置图片的大小。
3.4、减少DOM元素
解析 html 内容,将标签转化为DOM节点,之后再解析其他文件,DOM元素越少,也就是标签越少,文件转化得越快,加载速度也就快了。
3.5、减少 Flash 的使用
flash 文件比较大,加载起来耗时。除此,flash 插件还需要运行才能运行,最主要有些浏览器flash插件马上要下线了,建议尽量不用 flash。
3.6、文件顺序
css文件放在最顶部,优先渲染。js放在最底部,避免阻塞。
让网页如何加载更快,有好多的细节,还是要好好提升自己的技能~~~~~~~~~
点个关注!更多分享内容。
前端性能优化(四)——网页加载更快的N种方式的更多相关文章
- Web前端性能优化——提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...
- 前端性能优化--图片懒加载(lazyload image)
话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...
- 百度推出新技术 MIP,网页加载更快,广告呢?
我们在2016年年初推出了MIP,帮助移动页面加速(原理).内测数据表明,MIP页面在1s内加载完成.现在已经有十多家网站加入MIP项目,有更多的网站正在加入中.在我们收到的反馈中,大部分都提到了广告 ...
- Hadoop生态圈-注册并加载协处理器(coprocessor)的三种方式
Hadoop生态圈-注册并加载协处理器(coprocessor)的三种方式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 到目前为止,大家已经掌握了如何使用过滤器来减少服务器端通过 ...
- ios网络学习------4 UIWebView的加载本地数据的三种方式
ios网络学习------4 UIWebView的加载本地数据的三种方式 分类: IOS2014-06-27 12:56 959人阅读 评论(0) 收藏 举报 UIWebView是IOS内置的浏览器, ...
- 加载xib文件的两种方式
一.加载xib文件的两种方式 1.方法一(NewsCell是xib文件的名称) NSArray *objects = [[NSBundle mainBundle] loadNibNamed:@&quo ...
- Spring加载properties文件的两种方式
在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取properties里面的配置,这样后期只需要改动properties文件即可, ...
- 转 Velocity中加载vm文件的三种方式
Velocity中加载vm文件的三种方式 velocitypropertiespath Velocity中加载vm文件的三种方式: 方式一:加载classpath目录下的vm文件 Prope ...
- Velocity中加载vm文件的三种方式
Velocity中加载vm文件的三种方式: a. 加载classpath目录下的vm文件 /** * 初始化Velocity引擎 * --VelocityEngine是单例模式,线程安全 * @th ...
随机推荐
- 第六篇--MFC美化界面
1.MFC如何设置背景颜色 首先,为对话框添加WM_CTLCOLOR消息,方法为:右击Dialog窗口 --> Class Wizard --> Messages --> WM_CT ...
- endnote x9.3.3 for windows安装教程
EndNote X9.3.3 是一款非常nice的实用型文献管理软件,EndNote X9功能极其强劲,便捷好用.本文提供EndNote X9.3.3安装破解激活教程.方法,内附EndNote x9. ...
- LeetCode入门指南 之 排序
912. 排序数组 给你一个整数数组 nums,请你将该数组升序排列. 归并排序 public class Sort { //归并排序 public static int[] MergeSort(in ...
- azure bash: kubectl: command not found
[root@***]# az aks install-cliDownloading client to "/usr/local/bin/kubectl" from "ht ...
- selenium WebDriverWait
Selenium WebDriverWait的知识: 一.webdrivewait 示例代码 from selenium import webdriver from selenium.webdri ...
- vue页面初始化
HTML: <div id="app"> <input type="" class="app" v-model=" ...
- JUC学习笔记(三)
JUC学习笔记(一)https://www.cnblogs.com/lm66/p/15118407.html JUC学习笔记(二)https://www.cnblogs.com/lm66/p/1511 ...
- 第2篇-JVM虚拟机这样来调用Java主类的main()方法
在前一篇 第1篇-关于JVM运行时,开篇说的简单些 中介绍了call_static().call_virtual()等函数的作用,这些函数会调用JavaCalls::call()函数.我们看Java类 ...
- Vue-axios 封装了一手好axios:)
请求方式 很多种请求方式,重点还是第一种吧 下载 npm install axios --save 下载完成 直接导入 import axios from 'axios' 简单配置 axios({ u ...
- MySQL-20-MySQL优化
MySQL优化哲学 1 为什么优化? 为了获得成就感? 为了证实比系统设计者更懂数据库? 为了从优化成果来证实优化者更有价值? 但通常事实证实的结果往往会和你期待相反!优化有风险,涉足需谨慎! 2 优 ...