由“从按下回车到网页显示”粗谈网页优化
图为百度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
由“从按下回车到网页显示”粗谈网页优化相关推荐
- html网页显示蒙文,网页标签中显示蒙古文竖排文本
网页标签中显示蒙古文竖排文本 蒙古文网页和我们经常见到的网页最大的区别在于,在网页中蒙古文文本的显示和编辑不同于其他的网站,蒙古文是竖排文本,并且不像汉文是从左向右书写文字,从上到下换行.而蒙古文是从 ...
- java 利用网页显示摄像头_web网页调用摄像头拍照
var CameraInit=(function(window,document,undefined){functionMyCamera(videoDom,canvasDom) {this.media ...
- 打开html只能显示文字,显示文字-网页显示不正常网页的背景不显示,只显示文字 – 手机爱问...
2007-04-07 修改背景音乐列表不能键入文字 只是显示一个橘黄色的长条 你好朋友,添加播放器设置(下面是两种方法,你可以任选一种):第一步.登录新浪博客,输入"登录名"&qu ...
- 【蒙古文】:传统蒙古语网页显示方法
为了网页显示传统蒙古语,必须做一些前期的准备,就是字体,输入法操作系统自带,也有对应的字体.但是,网页显示必须在网页中引入响应的字体库.字体库有:MongolianWhite.eot,Mongolia ...
- ubuntu下网页显示乱码的解决方法
在Linux下用Firefox浏览有Flash的网页时,经常碰到有些文字不能正常显示,有些还可能显示乱码,比如baidu 的在线音乐播放音乐时,完全显示不了文字. 解决方法很简单,操作如下: 修改su ...
- php用360浏览器显示不正常,win10系统下360浏览器网页显示不正常的解决方法
win10系统下360浏览器网页显示不正常怎么办?这是最近不少朋友都向小编咨询的问题.他们表示若干页面在360的浏览器上显示不正常,可是在其他的浏览器上却都是正常状态.那么,问题到底出在哪?下面,系统 ...
- php网页第一张图片不显示不出来了_网页图片不能显示|网页不显示图片|网页图片显示不出来 - 网页图片无法显示的解决方法 - 安全专题...
网络上丰富的图文资源极大地丰富了我们的生活,也提供了许多生动的信息.然而,许多网友在浏览网页时遇到网页图片不能显示的问题,给网络应用带来了很大的不便.造成网页图片不能显示的原因很多,现在,我们通过多种 ...
- php文件内含有隐藏的^m字符,【整理】如何取消Linux下,vi中显示的^M符号
[整理]如何取消Linux下,vi中显示的^M符号 [背景知识] ^M 是ascii中的'\r', 回车符,是16进制的0x0D,8进制的015,十进制的13. 对于换行这个动作,unix下一般只有一 ...
- 从你输入一个网址,到网页显示,其间发生了什么?
来源:小林coding 想必不少小伙伴面试过程中,会遇到「当键入网址后,到网页显示,其间发生了什么」的面试题. 这次,小林我带大家一起探究下,一个数据包在网络中的心路历程. 每个阶段都有数据包的「心路 ...
最新文章
- numpy.ndarray的赋值操作
- 1、Python 日期时间格式化输出
- 新浪微博第三方登陆重定向错误23123
- client中周期性边界_「微评」增加艺术品在投资组合中的比例 推进国家艺术软实力...
- [渝粤教育] 武汉理工大学 认识武理 参考 资料
- oracle将存储过程导出,Oracle如何导出存储过程
- 【汇编语言与计算机系统结构笔记14】循环和分支程序设计
- SQL中一种类似GUID值的函数实现
- 不要奢望.NET能够跨平台
- c# list转为json_C#中List集合转换JSON
- 正确的座机号码格式_正确的座机号码格式
- 华南师范大学计算机学院2015级,2015年华南师范大学教育信息技术学院全日制硕士录取公示...
- 常见关系型数据库(sql server/oracle)查询语句面试题
- 二十一世纪的计算研讨会及启示
- Photoshop学习(十六):使用矢量蒙版
- 属性的遍历:for...in 循环
- 第5章 8051单片机工作原理
- 输入汉字转自动转拼音 20378个词库
- 新书推荐 |《机器学习即服务:将Python机器学习创意快速转变为云端Web应用程序》...
- 纯javascript实现赛车小游戏