Skip to content
1StepEngineer edited this page Jun 17, 2019 · 23 revisions

键入url浏览器发生了什么

URL:统一资源定位符(Uniform Resource Locator)是对可以从互联网上得到的资源位置访问方法的一种唯一表示。
URL先转换成了对应的ip(Remote Address)进行访问

概念

reflow:回流。
某个元素的改变影响了布局,浏览器重新渲染DOM的过程。reflow 会从 这个 root frame 开始递归往下,依次计算所有的结点几何尺寸和位置。reflow 无法避免,举例出现情况如下:

  • 树状目录的折叠、展开(实质上是元素的显 示与隐藏)
  • margin padding等边距发生变化,定位位置的变化 上述行为引起页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

repaint:重绘
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

ip跳转到url的时候状态码301和302的区别

301:Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能,拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定,否则这个响应也是可缓存的。
302:Found 请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下,这个响应才是可缓存的。

为什么首次加载和后面加载速度差很多?

因为浏览器首次加载之后,访问资源和文档都被浏览器缓存了

浏览器并发请求数

浏览器并发请求数首先是针对同一域名下的资源。

yahoo军规

1. 尽可能减少HTTP请求数

HTTP请求

  • 官方: 从客户端到服务器端的请求消息。包括消息首行中,对资源的请求方法资源的标识符及使用的协议。
  • 形象: 打开网页,所看到的文字、图片、多媒体等,这所有内容都是从服务器获取的,每个内容的获取都是http请求。

2. 使用CDN(内容分发网络)

CDN 在离你最近的地方,放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容。

3. 添加expire/Cache-Control头

4. 启动Gzip压缩

5. 将CSS放在页面最上面

低网速的情况下,如果不是放在最上面IE下可能造成页面呈现空白页面,firefox下页面会造成页面第一次样式错误

6. 将Script放在页面最下面

7. 避免在CSS中使用Expressions

css expressions是css表达式。它的计算频率很高。在页面显示和缩放/页面滚动/移动鼠标这些情况下都会重新计算一次。

<style type="text/css">
ul a{width:expression(this.offsetWidth > 750 ? scare() : scare() )}
</style>

这种写法好像几乎没用过

8. 把Javascript和css都放到外部文件中

单独提取 写在页面内
提高了js/css复用性
减小页面体积
提高了js和css可维护性
减少页面请求
提升页面渲染速度

9. 减少DNS查询

avatar
DNS查找的过程就是把域名转换成ip地址,再找到ip地址对应的主机。

avatar 不是把资源放在越多的域名下越好,这也是要根据实际情况看的

10. 压缩js和css

11. 避免重定向

12. 移除重复的脚本

13. 配置实体标签(ETags)

14. 使用AJAX缓存

性能优化

  1. js放置在index.html中的底部
  2. 减少请求数,主要是指将css的图片使用css sprite的方式进行合并

浏览器渲染过程