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

Posted 2020-09-20 blfbuaa

图为百度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的网络视图主要是看一张网页载入的过程，以及每次请求的耗时。

从一张图片说起

从上图能够看出，载入完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