文章插图
网站前端的用户体验,决定了用户是否想要继续使用网站以及网站的其他功能,网站的用户体验佳,可留住更多的用户 。除此之外,前端优化得好,还可以为企业节约成本 。那么我们应该如何对我们前端的页面进行性能优化呢?
前端性能优化可以分为三个方面:接口访问优化、静态资源优化和页面渲染速度优化 。
一、接口访问优化1.1、减少http请求,合理设置 HTTP缓存
http协议是无状态的应用层协议,每次发送http请求时,都需要建立连接、通信、断开连接,在服务器端每个http都需要开启独立的线程去处理 。所以尽量减少http请求,尽可能地提高访问性能 。
减少http请求的方法:
- 合并 js、css、图片等文件,合并成一个文件,浏览器就只需请求一次就可以了 。图片合并要适当,不能想着优化呢,盲目地都合并成一张图片 。
- 借用浏览器缓存 。恰当的缓存设置可以大大减少http请求 。不懂浏览器缓存的可参考 。
- 接口合并 。前端交互,经常需要请求多个并行或串行接口,此时可以通过接口合并方式,提高接口访问速度 。
- 能使用css的尽量不使用js,能使用js的尽量不用三方插件,避免三方插件大量的库 。
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 花费更多时间才能渲染 。
以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助:- 高并发web架构介绍 jsp转html静态页面
- 页面重新加载JS方法 重新加载js文件
- 网站外链发布平台 seo外链发布平台
- word变横向页面的方法 word如何把页面横过来
- win7旗舰版优化全攻略 win7性能优化设置
- 企业网站排名优化公司 超级seo企业网站系统
- mac刷新快捷键桌面 mac电脑怎么刷新页面
- vue弹窗加载另一个页面的方法 vue弹窗加载另一个页面
- win10注册表优化教程 xp注册表优化工具
- 前端常用的性能优化方法 前端优化的方法有哪些方法