-
Notifications
You must be signed in to change notification settings - Fork 3
前端性能优化
URL
:统一资源定位符(Uniform Resource Locator)是对可以从互联网上得到的资源位置
和访问方法
的一种唯一表示。
URL先转换成了对应的ip(Remote Address)进行访问
概念
reflow
:回流。
某个元素的改变影响了布局,浏览器重新渲染DOM的过程。reflow 会从 这个 root frame 开始递归往下,依次计算所有的结点几何尺寸和位置。reflow 无法避免,举例出现情况如下:
- 树状目录的折叠、展开(实质上是元素的显 示与隐藏)
- margin padding等边距发生变化,定位位置的变化 上述行为引起页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。
repaint
:重绘
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。
301
:Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能,拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定,否则这个响应也是可缓存的。
302
:Found 请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下,这个响应才是可缓存的。
因为浏览器首次加载之后,访问资源和文档都被浏览器缓存了
浏览器并发请求数
首先是针对同一域名下的资源。
HTTP请求
- 官方: 从客户端到服务器端的请求消息。包括消息首行中,对资源的请求方法资源的标识符及使用的协议。
- 形象: 打开网页,所看到的文字、图片、多媒体等,这所有内容都是从服务器获取的,每个内容的获取都是http请求。
CDN
在离你最近的地方,放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容。
低网速的情况下,如果不是放在最上面IE下可能造成页面呈现空白页面,firefox下页面会造成页面第一次样式错误
css expressions是css表达式。它的计算频率很高。在页面显示和缩放/页面滚动/移动鼠标这些情况下都会重新计算一次。
<style type="text/css">
ul a{width:expression(this.offsetWidth > 750 ? scare() : scare() )}
</style>
这种写法好像几乎没用过
单独提取 | 写在页面内 |
---|---|
提高了js/css复用性 减小页面体积 提高了js和css可维护性 |
减少页面请求 提升页面渲染速度 |
DNS查找的过程就是把域名转换成ip地址,再找到ip地址对应的主机。
不是把资源放在越多的域名下越好,这也是要根据实际情况看的
- js放置在index.html中的底部
- 减少请求数,主要是指将css的图片使用css sprite的方式进行合并