RachelChen

2016年5月4日

摘要：现在让我们看看浏览器从网络上加载资源所耗费的时间（我们忽略从缓存以及从CDN等中间商网络上加载资源），我们首先要知道的是：现在让我们看看浏览器从网络上加载资源所耗费的时间（我们忽略从缓存以及从CDN等中间商网络上加载资源），我们首先要知道的是：一个到无服务的网路往返 (传播延迟) 大约100ms 阅读全文

posted @ 2016-05-04 15:13 RachelChen 阅读(475) 评论(0) 推荐(0) 编辑

计算渲染关键过程所花费的时间

摘要：你不可以优化你不能测量的事情。但是Navegation Timing API可以让我们测量关键的渲染过程时间！ Navigation Timing 为计算CRP提供了高精度的时间戳浏览器发送了一系列可测量的时间来捕捉CRP的各种状态 Navigation Timing 为计算CRP提供了高精度的时阅读全文

posted @ 2016-05-04 07:47 RachelChen 阅读(3794) 评论(0) 推荐(0) 编辑

2016年5月3日

使用media来加载css

摘要：默认的，css被当做渲染时候必须加载的资源. 设备类型和设备询问允许我们设置一些css资源编程可选的对于所有的css资源，无论是必须的还是可选的，都会被浏览器加载默认的，css被当做渲染时候必须加载的资源. 设备类型和设备询问允许我们设置一些css资源编程可选的对于所有的css资源，无论是必须阅读全文

posted @ 2016-05-03 22:44 RachelChen 阅读(405) 评论(0) 推荐(0) 编辑

异步执行js脚本——防止阻塞

摘要： JS允许我们修改页面中的所有方面：内容，样式和用户进行交互时的行为。但是js同样可以阻塞DOM树的形成并且延迟页面的渲染。让你的js变成异步执行，并且减少不必要的js文件从而提高性能。 JavaScript可以查询和修改DOM和CSSOM JavaScript的执行阻塞了CSSOM的执行 Jav 阅读全文

posted @ 2016-05-03 22:12 RachelChen 阅读(3551) 评论(0) 推荐(0) 编辑

渲染树render tree

摘要： CSSOM树和DOM树连接在一起形成一个render tree，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。 DOM树和CSSOM树连接在一起形成render tree . render tree只包含了用于渲染页面的节点布局计算了每一个对象的准确的位置以及大小绘画是最后阅读全文

posted @ 2016-05-03 21:32 RachelChen 阅读(13720) 评论(0) 推荐(0) 编辑

页面渲染1——创建对象模型

摘要： Before the browser can render the page it needs to construct the DOM and CSSOM trees. As a result, we need to ensure that we deliver both the HTML and 阅读全文

posted @ 2016-05-03 19:44 RachelChen 阅读(490) 评论(0) 推荐(0) 编辑

HTTP 缓存

摘要：从网络上加载资源是非常缓慢且浪费带宽的，所以，要是能将资源缓存起来就好了！幸运的是，所有的浏览器都实现了HTTP缓存，我们要做的只是设定服务器响应的头部就行了！当服务器响应的时候，总是包含HTTP头部，HTTP头部包含的信息有content-type, length, caching direc 阅读全文

posted @ 2016-05-03 18:26 RachelChen 阅读(258) 评论(0) 推荐(0) 编辑

2016年5月2日

web安全字体

摘要： webfont解剖 Unicode字体可以包含数以千计字形有四个字体格式： WOFF2, WOFF, EOT, TTF 一些字体格式需要使用GZIP压缩一个web字体是字形的集合，且每个字形是一个描述了一个字母亦或符号的矢量图。所以，一个字体文件的大小由两个因素决定：每个字形矢量路径的复杂程度阅读全文

posted @ 2016-05-02 19:08 RachelChen 阅读(1780) 评论(0) 推荐(0) 编辑

图片优化

摘要：减少和替代图片减少不必要的图片资源如果可以，使用css3的效果替代图片效果使用web fonts而不是用图片来显示文本信息减少不必要的图片资源如果可以，使用css3的效果替代图片效果使用web fonts而不是用图片来显示文本信息要记住，好的设计都是简单且性能很好的。减少图片资源可释放阅读全文

posted @ 2016-05-02 16:11 RachelChen 阅读(714) 评论(0) 推荐(0) 编辑

基于文本内容的压缩

摘要：数据压缩减少不必要的资源加载之后，我们将剩下的资源进行压缩。为了解释数据压缩的原则，我们创建一个txt文本，内容如下： # Below is a secret message, which consists of a set of headers in # key-value format fo 阅读全文

posted @ 2016-05-02 13:09 RachelChen 阅读(809) 评论(0) 推荐(0) 编辑

公告