页面加载及优化

页面加载过程

 一、DNS解析(域名解析)

    DNS查询的基本过程如下:

    1.查找浏览器缓存

      浏览器会缓存DNS查询结果,不同的浏览器缓存时间会有所不同。如果浏览器存在缓存,那么DNS查询就到此为止。

    2.查找系统缓存

      浏览器缓存中没有需要的数据时,就会往上找到操作系统缓存。我们也可以手动配置host文件,这样浏览器会优先使用我们的配置。

    3.查找路由器缓存

     系统缓存中也没有需要的数据时,就会找到路由器。

    4.查找运营商DNS缓存

      之后会向运营的服务器(网络配置中的DNS服务器地址)请求DNS数据。

    5.递归搜索

      如果运营商服务器内也没有需要的数据时,就会开始消耗最大的递归搜索。

二、建立连接(TCP连接)

     http协议是经过TCP来传输的,所以产生一个http请求就会有TCP connect,但是依赖于长连接,不会产生这个过程。

三、发送请求

     从发送请求到开始响应的过程 request header:请求头信息,request body:请求体信息

四、接收数据

     从响应开始到数据传输完成的过程。response header:响应头信息。 response body:响应体信息。

五、解析DOM

    解析HTML结构 ,加载外部脚本和样式表文件,解析并执行脚本代码 ,构建与解析HTML DOM树,加载外部图片

六、DOM加载完成

页面加载完成,显示出来。

页面加载优化

     1、网页内容

          (1)减少http请求次数

          (2)减少DNS查询次数

          (3)避免页面跳转

          (4)缓存ajax

          (5)延迟加载

         (6)提前加载

         (7)减少dom元素数量

        (8)根据域名划分内容

        (9)减少iframe数量

        (10)避免404

     2、服务器

          (1)使用CDN

          (2)添加ExpiresCache-Control报文头

          (3)Gzip压缩传输文件

          (4)配置ETags

     3、cookie  

          (1)减少Cookie

          (2)页面内容使用无cookie域名

     4、css

          (1)将样式表置顶

          (2)避免css表达式

          (3)<link>代替@import

          (4)避免使用Filters

     5、javascript

          (1)将脚本置底

          (2)使用外部jscss文件

          (3)去除重复脚本

          (4)精简jscss

          (5)减少dom访问

          (6)使用智能事件处理

     6、图片

          (1)优化图像

          (2)优化Css Sprite

          (3)不要在HTML中缩放图片

          (4)使用小且缓存的favicon.ico

     7、移动客户端

(1)保持单个内容小于25KB

          (2)打包组件成符合文档

参考网址:

http://www.fly63.com/article/detial/3298

https://www.jianshu.com/p/e34cf19f9c7d

https://www.jianshu.com/p/e4e960e96105

原文地址:https://www.cnblogs.com/jian138/p/12436039.html