由“从按下回车到网页显示”粗谈网页优化
2015-08-20 14:23
176 查看
图为百度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,到请求图片为止,
都是一次次的单独请求。
请求
一个网页就是一次向服务器的请求,网页中的每个js,css也都是一次请求,
那么一次请求分为哪些步骤,见上图,分为:
1.阻挡
2.域名解析
3.建立连接
4.发送请求
5.等待响应
6.接收数据
耗时比较
可以看出,1耗时较多,解释下阻挡:浏览器避免向同一个地址同时发起过多连接请求。容易被判定为DDOS攻击 或 低级爬虫。
2-4耗时较少,
5-6耗时较多
如何优化
1,好像不可以优化2.-4,找一个好的域名解析商(dnspod)+好的cdn,这个比较简单
5,等待响应,其实就是服务端做处理,查询数据,业务计算,优化可以考虑非阻塞IO,多线程,缓存,SQL优化等等,本文略过
6,接收数据,见下
接收数据优化
页面数据无非js,css,图片,多媒体之类静态文件,可以做的优化有:1.js,css压缩(dev-->min)
2.图片压缩,图片合并(雪碧图)
3.图片单独cdn服务器(七牛云)
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.单独服务器将静态文件放到一台单独的服务器上
2.cdn
给静态文件服务器添加cdn
3.服务端压缩和缓存
服务端在进行一次压缩,并缓存
end,by uikoo9.com
相关文章推荐
- .bash_profile和.bashrc
- 图片整理
- UIView的使用setNeedsDisplay
- IE火狐兼容小知识点(即时更新)
- hdu1317(spfa判断正环+Floyd判断联通)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- OAF学习笔记-8-在AM中直接调用sql 语句(PLSQL函数)
- NSarray ...............
- 正则表达式 (一) 快速入门