• 浏览器地址栏输入一个URL后回车,将会发生的事情


    1. 浏览器向DNS服务器查找输入URL对应的IP地址。
    2. DNS服务器返回网站的IP地址。
    3. 浏览器根据IP地址与目标web服务器在80端口上建立TCP连接
    4. 浏览器获取请求页面的html代码。
    5. 浏览器在显示窗口内渲染HTML。
    6. 窗口关闭时,浏览器终止与服务器的连接。

    这其中最有趣的是第1步和第2步(域名解析)。我们输入的网址(域名)是IP地址的一个别名, 在一个DNS内,一个域名对应一个IP地址。域名系统(DNS) 的工作就是将域名与它的IP地址对应起来。DNS是分布式的,同时也是具有层级关系的。

    一个域名服务器虽然只记录一个小的子网内的主机名和IP地址, 但所有的域名服务器联合起来工作,就能将全网内的域名与它们的IP地址对应起来。 这也就意味着,如果一个域名服务器无法找到某个请求域名所对应的IP地址, 它就会向其它的域名服务器发出请求进行寻找。

    WEB前台的优化规则

    一、尽量减少 HTTP 请求

    有几种常见的方法能切实减少 HTTP 请求:

    1、 合并脚本跟样式文件,如可以把多个 CSS 文件合成一个,把多个 JS 文件合成一个。

    2、 CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。

    二.使用浏览器缓存

           在用户浏览网站的不同页面时,很多内容是重复的,比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件,将大大降低页面产生的流量,从而降低页面载入时间。

       根据服务器端的响应header,一个文件对浏览器而言,有几级不同的缓存状态。

       1、服务器端告诉浏览器不要缓存此文件,每次都到服务器上更新文件。

       2、服务器端没有给浏览器任何指示。

       3、在上次传输中,服务器给浏览器发送了Last-Modified或Etag数据,再次浏览时浏览器将提交这些数据到服务器,验证本地版本是否最新的,如果为最新的则服务器返回304代码,告诉浏览器直接使用本地版本,否则下载新版本。一般来说,有且只有静态文件,服务器端才会给出这些数据。

       4、服务器强制要求浏览器缓存文件,并设置了过期时间。在缓存未到期之前,浏览器将直接使用本地缓存文件,不会与服务器端产生任何通信。

           我们要做的是尽量强制浏览器到第四种状态,特别是对于JS、CSS、图片等变动较少的文件。

    三.将脚本放在底部

    脚本放在顶部带来的问题,

    1、  使用脚本时,对于位于脚本以下的内容,逐步呈现将被阻塞

    2、  在下载脚本时会阻塞并行下载

    放在底部可能会出现JS错误问题,当脚本没加载进来,用户就触发脚本事件。

    要综合考虑情况。

    四.使用外部的JS和CSS

    将内联的JS和CSS做成外部的JS、CSS。减少重复下载内联的JS和CSS。

  • 相关阅读:
    grep
    Ubuntu配置sun jdk
    mysqldump导出数据库表结构与数据至本地
    checkbox前后台使用
    MAC OS X 命令行提交本地项目到git
    前端参数传递错误之中英文字符
    微信支付之扫码支付(java版 native原生支付)
    jquery 取消 radio checked 属性,重新选中的问题解决
    消除父级元素对子级元素的点击事件影响
    mysql 双机热备注意事项
  • 原文地址:https://www.cnblogs.com/cxy66/p/6083119.html
Copyright © 2020-2023  润新知