【飞起】手把手教你如何前端页面秒开!!

没有最快,只有更快!世上武功,唯快不破!新能源汽车百公里加速4.x秒!...,可以说,人类对于速度的追求是永无止境的。在网页上也是一样,网页打开的速度快点,再快点,还能再快点吗?!

所以在前端开发领域,速度是一个永恒的话题。经过无数前端开发人员多年的积累,比较典型的就有雅虎34条优化网站法则,还有Yslow22条等之类的优化规则。

1、尽量减少HTTP请求次数

2、减少DNS查找次数

3、避免跳转

4、可缓存的AJAX

5、推迟加载内容

6、预加载

7、减少DOM元素数量

8、根据域名划分页面内容

9、使iframe的数量最小

10、不要出现404错误

11、使用内容分发网络

12、为文件头指定Expires或Cache-Control

13、Gzip压缩文件内容

14、...更多内容自己百度一下“雅虎34条”

<!-- -->

如果同学们仔细的读过,甚至是研究过网站优化方面的资料,你会发现,网站优化是一个很大的系统性的工程。如果把优化的重心只放在前端,那么只能做到页面优化,而无法做到网站的优化。

首先,用户打开网页第一个接触到的并不是网页、img、js等,而是你的网站的带宽!假设,你给你的网站放的是1000M光纤,那么我访问你的网站,自然是速度飞快!

如果你给你的网站的带宽是adsl小水管,那么我相信,无论前端再怎么优化,用户访问你的网站也是龟速。

所以第一步就是CND加速,这个是硬件方面的,是要花钱的!当然了,许多老板一听花钱,脸就拉长了。

<!-- -->

然后才是,

- 减少dns请求数;

- 压缩、合并文件,减少体积;

减少网络请求数,比较常见的方法,就是把许多小图片都合并为一张背景透明的大图,这种作法被称为CssSpirite。

然后在css当中使用背景定位来显示特定位置的背景图片。 就这样,引用同一张大图上的,不同位置的二个小图片,

<style type="text/css">

.bg_1{

background: url('../img/xx.png') no-repeat 0 -22px;

}

.bg_1{

background: url('../img/xx.png') no-repeat 0 -42px;

}

</style>

另外就是webpack等自动化前端构建工具对于资源文件的压缩、合并、打包了。

有一点要注意的是,压缩与打包并不是无限制的,每个文件的体积在25k左右时速度最佳,然后同一时期内的压缩资源最好在5个以内。否则 的话,你把整个网站打成一个大包算了,只有一个dns请求了。

<!-- -->

接下来说缓存

缓存嘛,简单的讲,就是你访问某个网站,它会保存一些资源在你的电脑里,例如图片、js、css之类的,然后你下次再来的时候,他会判断如果你的访问是相同的地址,那么直接你访问的网页就直接调用你电脑里的文件了,这样速度就会很快。

一、是减少延迟,加快响应了;

二、就是节省了网站的带宽,毕竟网站的带宽流量也是要花钱的。

可以在你的网站里设置cache-control和expires属性,可以设计缓存的日期。另外有一点,如果你的网站要更新大量的图片,建议分步骤、分阶段的更新。

这样会避免用户的电脑中大量的缓存失效。在大流量访问的情况下,甚至会造成资源服务器瞬时负载过大,造成网络阻塞,导致用户端网站白屏之类的严重情况。

<!-- -->

再说一下JavaScript的代码优化,

一、 无论你使用什么框架,在操作dom的时候要尽量的减少它的查找和重绘。因为这种操作是最消耗时间和资源的。当然你可以说,我使用的是react、vue,但我想告诉你说,前端开发不操作dom,是不可能的。

在操作dom中,例如for循环,把.length之类的需要查询的值,都提前查出来,然后放在某个变量里保存好。

二、with、eval,能不用尽量不用;

with会改变作用域的长度,eval会导致代码注入,造成安全隐患。

这方面的内容很多,今天先写到这里,看看同学们的反应哈,

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2018-07-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java架构师学习

分布式锁的技术选型及思考锁和分布式锁总结参考

本文来自作者 一行 在 GitChat 分享的{分布式锁的技术选型及思考} 锁和分布式锁 在计算机中,锁的作用是解决在并发状态下的共享资源互斥问题,保证在...

3158
来自专栏C++

python笔记:#006#程序执行原理

1171
来自专栏CSDN技术头条

创建一个分布式网络爬虫的故事

编者按:作者通过创建和扩展自己的分布式爬虫,介绍了一系列工具和架构, 包括分布式体系结构、扩展、爬虫礼仪、安全、调试工具、Python 中的多任务处理等。以下为...

2518
来自专栏大数据架构师专家

从运维角度看中大型网站架构的演变之路

网上有很多文章类似于我今天要分享的课程,有架构师写的,有运维写的,还有开发些的,偏重点都不同,今天我以咱们运维角度全面讲解。

1503
来自专栏智能算法

一文看懂npm、yarn、pnpm之间的区别

原文:Understanding differences between npm, yarn and pnpm 作者:Alex Kras 翻译:雁惊寒 本文作者...

36710
来自专栏西枫里博客

启用CDN后,QQ互联登录出现异常的问题。

博客群里的网友都说网站真实IP没隐藏有巨大的被D风险。隐藏网站真实IP最简单的办法就是做内容分发网络,用户在访问网站的时候是访问就近的CDN节点,ping出来的...

1712
来自专栏F_Alex

SpringCloud-初识微服务(一)

1493
来自专栏前端架构

web统计原理及实现方法汇总总结—网站统计中的数据收集

在php、jsp、asp后端总揽一切的时代,网站统计基本是后台的事情——其实web开发,也没有前端这个职位,网站设计(现在的UI)不仅要前途还要用dreamwa...

3922
来自专栏沃趣科技

沃趣科技火线救援某公安系统核心业务数据

求助电话 只剩下键盘敲打声的办公室,被一个突如其来的电话打破了宁静。电话那头,是某公安客户的紧急求助。 案发现场 其核心数据库,由于存储突然断电,导致数据库实例...

3557
来自专栏云计算-私有云

Windows Server 2019前瞻

十一假期马上就过完了,不知道各位小伙伴玩的怎么样啊,是否有遇到“人在囧途”或者是否看到了处处大海。微软于2018年9月24日-28日在美国召开了Ignite 2...

1.4K0

扫码关注云+社区

领取腾讯云代金券