阻塞渲染的 CSS默认情况下，CSS 被视为阻塞渲染的资源，这意味着在 CSSOM 构建完成前，浏览器会暂停渲染任何已处理的内容。确保精减你的 CSS，尽快传送它，并使用媒体类型与媒体查询来解除阻塞。在上一节，我们看到了，关键渲染路径要求我们兼有 DOM 和 CSSOM 来构造渲染树，这就有一个重要...
分类：
其他好文 时间：
2015-09-16 19:59:23
阅读次数：
155
构建对象模型浏览器要在屏幕上渲染内容，需要先构建 DOM 与 CSSOM 树。因此，我们需要确保将 HTML 和 CSS 尽可能快地提供给浏览器。让我们从最简单的可能情况开始说：一个普通 HTML 网页，包含一些文字，一张图片。浏览器需要做什么才能处理这个简单页面呢？转换：浏览器从磁盘或网络读取 H...
分类：
其他好文 时间：
2015-09-16 19:26:27
阅读次数：
170
1.减少Http请求使用图片地图使用CSS Sprites合并JS和CSS文件这个是由于浏览器对同一个host有并行下载的限制,http请求越多,总体下载速度越慢2.使用CDN(内容发布网络):当页面中有很多资源的时候,可以从不同的服务中去读取,同时可以提高并行下载速度3.添加http Expire...
分类：
Web程序 时间：
2015-09-15 14:24:46
阅读次数：
183
Web前端性能优化WPO，相信大多数前端同学都不会陌生，在各自所负责的站点页面中，也都会或多或少的有过一定的技术实践。可以说，这个领域并不缺乏成熟技术理论和技术牛人：例如Yahoo的web站点性能优化黄金法则，以及大名鼎鼎的优化大师Steve Souders。本文并非一篇讨论性能优化技术方法的文章，...
分类：
Web程序 时间：
2015-09-15 14:23:39
阅读次数：
220
之前看过Yahoo团队写的一篇关于网站性能优化的文章，文章是2010年左右写的，虽然有点老，但是很多方面还是很有借鉴意义的。关于css的性能优化，他提到了如下几点：CSS性能优化1、把样式表置于顶部现把样式表放到文档的内部似乎会加快页面的下载速度。这是因为把样式表放到内会使页面有步骤的加载显示。注重...
分类：
编程语言 时间：
2015-09-06 06:22:44
阅读次数：
281
准则01：尽量减少http请求“只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上”1.图片地图的使用图片地图允许你在一个图片上关联多个URL。目标URL的选择取...
分类：
Web程序 时间：
2015-08-27 22:41:39
阅读次数：
245
在移动端，因手机的配置和3/4G网络的原因，从两个方面解决性能优化问题，1.加载不超过3秒，用loading或者资源不要超过1M。2.渲染速度。基于以上两个方面，所有影响首屏加载和渲染的代码应在处理逻辑中后置。加载优化：1.Http请求： 减少Http请求，手机浏览器同时响应请求为4个请求，所以，....
分类：
移动开发 时间：
2015-08-25 16:21:45
阅读次数：
204
先让我们看看一张网页是怎么来的，也就是从用户输入完一个网址点下“ENTER”键到整个页面加载出来中间发生了什么。首先我们了解下HTTP过程：一、寻找IP（每一步都是在上一步没找到的情况下进行的）本地阶段：1、浏览器搜索自身缓存；2、搜索操作系统自身的DNS缓存；3、地区本地HOST文件；4、浏览.....
分类：
其他好文 时间：
2015-08-13 21:50:12
阅读次数：
179
根据web访问流程的各个阶段进行总结： 1. 浏览器缓存 2.查询DNS 3.建立连接 4.发送请求 5.等待响应 6.接收数据 7.处理元素 8.渲染元素 1. 浏览器缓存 查询cache: 读取cache或发送304请求。 优化规则-- 添加Expire或Cache-Control 应用于不经常...
分类：
Web程序 时间：
2015-08-13 00:50:47
阅读次数：
215
SCRIPT标签的阻塞行为会对页面的性能产生影响，这是因为浏览器在下载脚本、解析、执行的过程中不会同时做其他事情，比如渲染页面、响应用户事件等。之所以这样做是因为正在执行的JavaScript代码可能会改变页面元素、修改样式、添加或者删除事件等各种操作，以及最关键的脚本之间的依赖性，浏览器必须等待当前执行的脚本执行完成之后再进行后续操作。脚本阻塞两种加载方式HTML页面中的JavaScript脚本有...
分类：
Web程序 时间：
2015-07-31 20:22:41
阅读次数：
128
