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

图为百度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

时间: 2024-10-17 16:25:12

由“从按下回车到网页显示”粗谈网页优化的相关文章

从按下回车到网页显示发生了什么?(图解)

图为百度console.log中的信息. 注 水平有限,望批评指正. 前言 从开始做uikoo9.com开始,一直想怎怎么优化,版本也一直在迭代, 现在终于有点雏形,最近开始思考怎么能让一个网页最快的展现在用户眼前, 想了想前端纷繁的框架,到底如何组合才好,写起来好,构建起来好,展现起来快, 且不谈jquery,bootstrap之流,angularjs,vuejs,reactjs,expressjs(nodejs),requirejs,seajs等等如何组合才好? 追根溯源开始思考,很多大公司

IOS嵌套界面下 -UIWebView加载网页显示不全(尺寸适应问题)

最近有个朋友碰到一个关于在嵌套界面下UIWebView加载网页显示不全的问题 咋一看这种问题太easy了.但是不要忽视其背后的真正黑手,现在拿百度首页做个实验(百度就是这点好)先贴上一小段核心代码: 显示效果: 看到没 显示不全.现在你会说快用大招: 解决它.可惜这招也不行. 原因分析:为什么会显示不全呢? 主要问题就出在前面说的关于在嵌套界面下. 可为什么在嵌套界面下就不行呢? 显示不全是个问题. 是的 是个问题而且是个显示界面尺寸不匹配的问题.可在主界面就这可以, 而且frame我都是用的s

wamp安装后打开默认网页显示dir,图标红点

首先网页显示dir,是因为服务这些没启动,跟图标红点是一个原因,解决了图标红点,就能解决只显示dir的问题. 先测试是不是端口占用问题,如图: 如果是,那就继续往下走. 单击图标左键(记住是左键),然后Apache->然后打开httpd.conf文件,搜索80端口,把这两个地方的80端口改为别的,我就改为8099,这个端口随意,只要是没用过的端口,一般大于6000,因为小于6000的  可能被系统占用. 改完后保存,单击图标左键,重新启动所有服务 如果还不行,则关掉MySql服务,方法是Win键

windows下回车与换行符

windows下回车与换行符 从键盘输入的数据一般是ASCII码,也就是文本文件,在送到计算机内存时,回车和换行符转换成一个换行符(也就是说回车和换行符在windows文本中是两个字符),再从内存中以“wb”方式(二进制方式)输出到文件中,此时不发生字符转换,按内存中存储形式原样输出到磁盘文件中,当用“rb”方式(二进制方式)读入数据时,数据按原样输入,也不发生字符转换,直接读入到内存中,当用printf函数在屏幕上显示字符时,换行符又转换为回车加上换行符. 若以"r"方式(文本方式)

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

android环境下摄像头数据采集及显示

以前项目涉及些摄像头预览及数据处理操作,当时的需求是除了做摄像头预览外,还要显示文字.个性图像等,当初在查找资料实现相关模块时,发现很多资料讲的比较繁琐,不够简洁,这里将自己的实现方式分享出来,希望能够为正在做相关工作的同学提供些思路.不过这里先顺便提一下,如果单纯的做摄像头预览,不在预览数据时做添加文字.图像等额外操作,可以用surfaceview方式,性能上会更好些. 这里将摄像头采集及视频图像绘制放在一个模块中,比较便于管理及维护,同时在使用时,因为该类继承自view类,所以可以向操作很多

在Mac 系统下进行文件的显示和隐藏

Mac 系统如何显示或者隐藏文件呢? 苹果Mac OS X操作系统下,隐藏文件是否显示有很多种设置方法,最简单的要算在Mac终端输入命令.显示/隐藏Mac隐藏文件命令如下(注意其中的空格并且区分大小写): 显示Mac隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏Mac隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool fals

【手机网页】手机网页显示图片模糊问题

[本文原创,谢绝转载] [总结] 1.手机浏览器,不管是UC.原生浏览器.safari,显示页面都是按照320px的 2.由于现在手机的宽度都大于320px,所以,图片会模糊 3.像苹果的retina屏幕的方式学习! 先把图片做成两倍长宽的大小,然后通过css样式强制做成原大小 [手机网页]手机网页显示图片模糊问题,布布扣,bubuko.com

浏览器兼容问题——IE7/IE/8下背景图片不显示

在无休止的IE兼容调试中,今天又遇到一个蛮恶心的问题. 那就是在IE/7 IE/8下背景图不能显示(IE/6没试) 首先,这是我的源码 出来的效果是这样的 秉承了不会就百度的优良传统,找了N久的答案,终于... 没错!以上就是正确答案,什么没区别?你仔细瞧瞧背景图地址后面连写的那一句那~ 要多一个空格!!!(当然看到答案真的J8都气大) 解决后...