• 页面加载及优化


    页面加载过程

     一、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

  • 相关阅读:
    【小程序】文本超出则省略号
    【wx小程序】读懂app.js
    【js】某字符串多次替换
    【小程序】本地资源图片无法通过 WXSS 获取
    【小程序】(一)注册开始小程序开发
    【小程序】配置本地接口开发
    【css】文本超出行数以省略号显示
    【webstorm】project目录树显示不出
    【Nodejs】Browsersync同步浏览器测试
    获取指定包名下继承或者实现某接口的所有类(扫描文件目录和所有jar)
  • 原文地址:https://www.cnblogs.com/jian138/p/12436039.html
Copyright © 2020-2023  润新知