zoukankan      html  css  js  c++  java
  • 性能测试—前端性能1

    不同的浏览器工作的方式是不一样的,大体上浏览器的核心是浏览器引擎:IE是Trident、Firefox是Gecko、safari和chrome则是webkit。

    一、浏览器打开URL的过程

    当我们输入一个URL,到页面的展现,这个过程中都发生了什么呢?

    1、输入网址www.baidu.com

    2、检查缓存——有可用缓存就呈现页面

    3、如果没有缓存则DNS解析——获得URL所在网站的IP地址

    4、发起TCP连接,建立连接

    5、发送请求

    6、等待响应

    7、接受请求

    8、关闭连接

    9、检查状态码

    10、呈现页面(HTML文档)

    可以用前端性能工具查看页面:Firebug、Httpwatch等等。简单上一个图

    二、提高前端性能的方法

    1、减少HTTP请求数量

    每一个请求都要经过“建立连接—发送数据—断开连接”的过程,所以减少请求数可提高性能。

    避免重定向

    2、用好浏览器的缓存机制

    以下技术可有助于利用缓存:

    (1)保证服务端返回资源的响应头带有Expires信息,使得资源可以缓存

    (2)用引用方式使用样式表和JS脚本。

    3、利用GZIP压缩机制

    只针对文本类资源有效

    使用合并的图片文件

    4、提高浏览器的下载的并发度

    把CSS文件放在HTML文档开头

    这样做的目的是提高用户的感官,让页面尽早的开始显示。将样式表放在开头,一开始就下载下来,避免新样式带来的重绘和新渲染。

    把JS放在HTML文档最后

     在某些浏览器上,JS文件的下载和执行会阻止其他页面资源文件的下载和执行,所以把JS文件放在最后,保证JS文件不会阻止其他元素的下载,从用户感官来说,JS文件的下载和执行时间用户不会感觉到。

    5、使用Ajax请求:页面刷新(应该是需要什么请求什么,不知道这样理解对不对?)

    6、使用多个域名

    浏览器对服务器的连接是基于域名的,比如一个服务器拥有二个域名A和B,在浏览器限定一个域名只能建立二个连接的情况下,浏览器实际上是与服务器建立了4个连接。

    7、使用CDN:内容分发网

    第一次发个博客O(∩_∩)O哈哈~

  • 相关阅读:
    路由器竟装有隐藏摄像头!游客青岛民宿上演教科书式反偷拍
    21天单词速记训练营 第1天~ 21天 加油! (雅途右脑单词速记)
    词汇速记训练营
    词汇速记训练营
    词汇速记训练营
    Windows下解决github push failed (remote: Permission to userA/XXXX.git denied to userB.) 上传gitHub失败报错
    WMITools修复wmi劫持--hao643.com/jtsh123劫持(修改快捷方式跳转至hao123.com)
    Ubuntu下载gitea
    go+cookie+angular踩过的坑
    golang中创建logger时候踩过的坑
  • 原文地址:https://www.cnblogs.com/bell1991/p/6037941.html
Copyright © 2011-2022 走看看