页面加载及优化

页面加载过程

 一、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)添加Expires或Cache-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)使用外部js和css文件

          (3)去除重复脚本

          (4)精简js和css

          (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