随笔 - 1636  文章 - 0  评论 - 16  阅读 - 75万

由“从按下回车到网页显示”粗谈网页优化

4.png

图为百度console.log中的信息。


水平有限。望批评指正。


前言

从開始做uikoo9.com開始,一直想怎怎么优化,版本号也一直在迭代。

如今最终有点雏形。近期開始思考怎么能让一个网页最快的展如今用户眼前,

想了想前端纷繁的框架,究竟怎样组合才好,写起来好,构建起来好,展现起来快,

且不谈jquery。bootstrap之流。angularjs。vuejs,reactjs。expressjs(nodejs)。requirejs,seajs等等怎样组合才好?

追根溯源開始思考,非常多大公司的一道面试题。从按下enter键之后,到网页展现出来。究竟经历了什么?


发生了什么?

从按下enter到网页显示发生了什么?

1.按下enter

2.浏览器将域名解析为ip(省略细节,hosts。dns)

3.浏览器通过ip向服务端发起一次http请求(省略复杂的过程和协议)

4.服务端接收请求。处理业务,查询数据,返回页面

5.浏览器获取页面,进行解析

6.解析dom结构,解析css,解析js,解析完成后展现,触发domcontentloaded

7.继续载入页面多媒体内容,比如图片。记载完成,触发load


1-6步页面已经展现出来。7载入图片。


网页调优工具

有非常多网页调优工具,比如阿里測站长工具等,

今天仅仅说简单的工具,firebug的网络视图,chrome也有类似的network,

firebug的网络视图主要是看一张网页载入的过程,以及每次请求的耗时。


从一张图片说起

3.png

从上图能够看出,载入完uikoo9.com的过程也就是多次请求的过程,

包裹訪问域名请求html,到解析dom请求css,js。到请求图片为止,

都是一次次的单独请求。


请求

一个网页就是一次向server的请求。

网页中的每一个js,css也都是一次请求,

那么一次请求分为哪些步骤,见上图。分为:

1.阻挡

2.域名解析

3.建立连接

4.发送请求

5.等待响应

6.接收数据


耗时比較

能够看出,

1耗时较多,解释下阻挡:浏览器避免向同一个地址同一时候发起过多连接请求。easy被判定为DDOS攻击 或 低级爬虫。

2-4耗时较少,

5-6耗时较多


怎样优化

1,好像不能够优化

2.-4,找一个好的域名解析商(dnspod)+好的cdn。这个比較简单

5,等待响应,事实上就是服务端做处理,查询数据,业务计算,优化能够考虑非堵塞IO,多线程,缓存,SQL优化等等。本文略过

6。接收数据,见下


接收数据优化

页面数据无非js,css,图片。多媒体之类静态文件,能够做的优化有:

1.js。css压缩(dev-->min)

2.图片压缩。图片合并(雪碧图)

3.图片单独cdnserver(七牛云)

4.服务端再次压缩并缓存静态文件


再来看看发生什么。

从按下enter開始。就開始了一次次的请求之旅,

每次请求都包含(域名解析,建立连接,发送请求。等待响应,接收数据),

从最開始的地址栏中的域名请求,返回html dom并解析。

到请求js,css,图片等静态文件,都是一次次的请求循环。


html优化

1.採用html5精简的标签

2.尽量将css放到head中。js放到body末尾

3.开发完的html进行压缩,减小html文本大小


js优化

1.细分模块化减小js大小

所谓模块化,比方你须要用到bootstrap,bootstrap有非常多组件,比如有1.js,2.js,。。

。,100.js

A页面你仅仅引入1-2.js

B页面你仅仅引入3-4.js

这样每一个页面的js都非常小

2.利用缓存

还有一个方向是将bootstrap所有引入。这样仅仅在第一次比較慢。

以后每次都是读取缓存,以后的页面较快


以上两种各有利弊


css优化

和js优化相类似。模块化,缓存


图片优化

1.字体图标

在能够用字体图标的地方不要用图片,见iconfont

2.雪碧图

非得用图片的时候。不会常常改变的小图标放到一起,压成一个雪碧图

3.压缩

在保证显示效果的前提下。进行压缩


静态文件优化(js,css。图片)

1.单独server

将静态文件放到一台单独的server上

2.cdn

给静态文件server加入cdn

3.服务端压缩和缓存

服务端在进行一次压缩,并缓存


end,by uikoo9.com

posted on   blfbuaa  阅读(190)  评论(0编辑  收藏  举报

点击右上角即可分享
微信分享提示