1.什么是Web前端

web前端本质上是一种G U I软件&＃xff0c;本可以直接借鉴其他G U I系统架构设计方法&＃xff0c;但是web前端有点特别。

1.1 传统的GUI软件

CS架构GUI软件的开发与部署过程&＃xff1a;

1.开发
2.将开发好的代码打包到APK软件包&＃xff0c;放到应用商场中
3.用户下载应用(即下载了这个安装包)&＃xff0c;解压&＃xff0c;将代码解压到自己的手机上&＃xff0c;也就是说&＃xff0c;用户的手机上有一个套应用程序的代码&＃xff0c;然后再在用户的手机上运行。也就是说用户其实访问的是自己上机上的代码

1.2 web前端的开发与部署过程

前端采用的是BS架构

1.开发
2.将开发的代码发布到远程的服务器&＃xff08;webserver以及CDN&＃xff09;
3. 运行时用户在浏览器中输入网址&＃xff0c;去服务器请求我们的资源&＃xff0c;这时就会动态的增量式的去加载我们的资源
&＃xff08;因为是去服务端请求我们的资源&＃xff0c;所以如果能更快更好的在浏览器中加载我们的资源&＃xff0c;那么用户体验自然也就更好&＃xff09;

2.浏览器的一个请求从发送到返回都经历了什么&＃xff1f;

• 用户在浏览器中输入URL
• 浏览器对输入的RUL进行解析&＃xff0c;将域名发送到DNS服务器中&＃xff0c;DNS服务器对该域名查询其所对用的IP地址&＃xff0c;并返回给我们的浏览器
• 然后根据ip地址和端口号去查找服务器
• 服务端是有mvc架构的
  4.1首先进入controller,进行逻辑处理和分发&＃xff0c;然后调用Model层
  4.2 进入Model层&＃xff0c;该层是负责与数据进行交互的&＃xff0c;它会去数据库中读取数据
  4.3 将渲染好的页面听过view层返回给我们的网络
• 浏览器根据返回的html&＃xff0c;css&＃xff0c;js进行渲染&＃xff08;这就是浏览器的render&＃xff09;&＃xff0c;生成DOM树和css树&＃xff0c;然后进行整合&＃xff0c;然后解析js

3. 请求过程中一些潜在的性能优化点

• dns是否可以通过缓存减少dns查询时间&＃xff1f;
• 网络请求的过程走最近的网络环境&＃xff1f;
• 相同的静态资源是否可以缓存&＃xff1f;
• 能否减少请求http请求大小&＃xff1f;
• 减少http请求
• 服务端渲染

3.1DNS解析优化

1、DNS缓存

DNS查询过程大约消耗20毫秒&＃xff0c;在DNS查询过程中&＃xff0c;浏览器什么都不会做&＃xff0c;保持空白。如果DNS查询很多&＃xff0c;网页性能会受到很大影响&＃xff0c;因此需要用到DNS缓存。
不同浏览器的缓存机制不同&＃xff1a; IE对DNS记录默认的缓存时间为30分钟&＃xff0c;Firefox对DNS记录默认的缓存时间为1分钟&＃xff0c;Chrome对DNS记录默认的缓存时间为1分钟。

缓存时间长&＃xff1a;减少DNS的重复查找&＃xff0c;节省时间。
缓存时间短&＃xff1a;及时检测服务器的IP变化&＃xff0c;保证访问的正确性。

2、减少DNS查询次数

DNS查询也消耗响应时间&＃xff0c;若网页内容来自各个不同的domain&＃xff0c;则客户端首次解析这些domain需要消耗一定的时间&＃xff0c;但由于DNS查询结果会缓存在本地系统和浏览器中一段时间&＃xff0c;所以DNS查询一般只是对首次访问时的速度有影响。

减少DNS查询次数需要减少来自不同domain的请求的数量&＃xff0c;如尽量将外部域的对象下载到本地服务器上等。

3. DNS预解析提升页面速度

遇到请求延时非常严重的情况&＃xff0c;DNS解析速度很可能是造成资源延时的最大原因。
页面header中添加了以下代码&＃xff08;用以DNS预解析&＃xff09;&＃xff1a;

<meta http-equiv&＃61;"x-dns-prefetch-control" content&＃61;"on" />
<link rel&＃61;"dns-prefetch" href&＃61;"http://bdimg.share.baidu.com" />
<link rel&＃61;"dns-prefetch" href&＃61;"http://nsclick.baidu.com" />
<link rel&＃61;"dns-prefetch" href&＃61;"http://hm.baidu.com" />
<link rel&＃61;"dns-prefetch" href&＃61;"http://eiv.baidu.com" />

了解&＃xff1a;dns-prefetch:

大多数新浏览器已经针对DNS解析进行了优化&＃xff0c;典型的一次DNS解析耗费20-120 毫秒&＃xff0c;减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching是具有此属性的域名不需要用户点击链接就在后台解析&＃xff0c;而域名解析和内容载入是串行的网络操作&＃xff0c;所以这个方式能减少用户的等待时间&＃xff0c;提升用户体验。

浏览器对网站第一次的域名DNS解析查找流程依次为&＃xff1a;

浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索


Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性&＃xff0c;由于Chrome和Firefox 3.5本身对DNS预解析做了相应优化设置&＃xff0c;所以设置DNS预解析的不良影响之一就是可能会降低Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。

预解析的实现&＃xff1a;

1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:
2. 在页面header中使用link标签来强制对DNS预解析:
   注&＃xff1a;dns-prefetch需慎用&＃xff0c;多页面重复DNS预解析会增加重复DNS查询次数。

3.2 网络请求的过程

网络请求的过程其实就解决了网络选择和缓存的问题&＃xff0c;在网络请求的过程中很多公司都会使用到CDN&＃xff0c;使用CDN就解决了网络选择和缓存的问题&＃xff0c;访问CDN是访问静态资源用的&＃xff0c;访问静态资源我们所携带的COOKIE是没有用的&＃xff0c;所以我们请求CDN是希望能够将http.header中将COOKIE去掉的&＃xff0c;但是很多的时候CDN的域名和我们主站的域名是一样的&＃xff0c;这就使得我们也携带了COOKIE&＃xff0c;所以尽量不要将CDN的域名和主站的域名一样

3.3 对于请求接口

对于请求接口我们是没有办法使用CDN的&＃xff0c;但是我们可以使用浏览器缓存&＃xff0c;将接口返回的数据缓存到浏览器

3.4 带宽和http请求大小

一个http请求如果可以小一些&＃xff0c;那么请求的时候就会快一些

3.5减少http请求

每一个http请求都是对网路的损耗&＃xff0c;所以如果可以减少http请求&＃xff0c;那么就可以减少网络损耗

3.6服务器渲染

对于现在的大型框架&＃xff0c;都不是在服务器直接出html&＃xff0c;而是在浏览器端走框架的代码才能渲染我们的页面&＃xff0c;因此首屏渲染就会题慢&＃xff0c;现在有很多的相关框架在服务端渲染的方案&＃xff0c;将代码在服务端渲染&＃xff0c;将html直接输出到浏览器&＃xff0c;而不是在浏览器中渲染。

深入理解http请求的过程是前端性能优化的核心