Recommended
More Related Content
Viewers also liked
Similar to 如何提高网站性能之Css篇
Similar to 如何提高网站性能之Css篇 (20)
如何提高网站性能之Css篇
- 1. 如何提高网站性能之CSS篇 ——在不影响用户的正常浏览下，提高网站的速度 Author: felicia Blog.LoveAll.us
- 2. CSS Sprites Author: felicia Blog.LoveAll.us
- 3. 雪碧（CSS Sprites） 减少HTTP请求，是提高网站性能的一条重要准则 图片地图、雪碧和内联图片都有利于减少HTTP请求 然而，应用最广泛的便是雪碧 雪碧是用合并后的图片作为标签的背景，利用background-position定位的方法 Author: felicia Blog.LoveAll.us
- 4. 雪碧（CSS Sprites） 合并图片，明显减少了HTTP请求 虽然图片合并了，但合并后的图片比分离的图片的总和小 使用比图片地图更灵活 因此，雪碧是一种用很少的图片来减少响应时间的优秀方案 使用雪碧的HTML文档的标签也比图片地图的简洁。 Author: felicia Blog.LoveAll.us
- 5. 精简CSS ——就是从代码中移除不必要的字符以减小其大小，从而改善加载时间的实践。 Author: felicia Blog.LoveAll.us
- 6. 精简CSS 方法： 1.移除注释和不必要的空白字符 2.使用模块化的思想，提高代码重用率 3.移除不必要的字符，例如margin: 0代替margin: 0px 4.缩写CSS，例如margin: 0代替margin: 0 0 0 0 Author: felicia Blog.LoveAll.us
- 7. 避免CSS表达式 Author: felicia Blog.LoveAll.us
- 8. 避免 CSS 表达式 CSS表达式举例： P { width: expression( setCntr(),document.body.clientWidth<600? ”600px”:”auto”); min-width: 600px; } 只有IE支持CSS表达式 而各种事情都可能会产生求值，从而占用很多内存 因此，CSS变得十分危险了，甚至可能锁死浏览器 Author: felicia Blog.LoveAll.us
- 9. 把CSS样式放在顶部 ——给于需要下载很多内容的页面或网速很慢的用户有逐步呈现的体验 Author: felicia Blog.LoveAll.us
- 10. 把CSS样式放在顶部 等待是令人烦躁的，如果样式放在底部，浏览器就会延迟显示任何可视化组件 浏览器正在加载，但用户可能对页面加载毫无感觉 Author: felicia Blog.LoveAll.us
- 11. 把CSS样式放在顶部 逐步呈现，为用户提供了视觉反馈，用户体验更好 Author: felicia Blog.LoveAll.us
- 12. 把CSS样式放在顶部 样式表在页面中的位置并不影响下载时间，但会影响页面的呈现 若样式放在底部，在Internet Explorer中， 页面可能会完全空白，直到页面所有的内容同时涌上屏幕， 这个现象叫做白屏 因为没有任何进度反馈的信息，因此用户可能会选择放弃或者不断地按刷新 Author: felicia Blog.LoveAll.us
- 13. 把CSS样式放在顶部 在Internet Explorer中，导致白屏问题的情形： 1.在新窗口打开时 2.重新加载时 3.作为主页 Author: felicia Blog.LoveAll.us
- 14. 把CSS样式放在顶部 把样式放在底部，还可能会导致一种现象， 那就是无样式内容的闪烁（FOUC）： 当页面逐步加载时，文字首先显示，然后是图片。 当正确地下载和解释样式表后，已经呈现的文字和图片会用新的样式重绘。 在Internet Explorer中，导致FOUC的情形： 1.单击连接；2.使用书签；3.键入URL 而FF总会导致FOUC。 Author: felicia Blog.LoveAll.us
- 15. 把CSS样式放在顶部 因此，在HTML规范中规定 <link>只能出现在文档的<head>中 但其出现的次数是任意的 Author: felicia Blog.LoveAll.us
- 16. 使用外部CSS Author: felicia Blog.LoveAll.us
- 17. 使用外部CSS 在不考虑其他情况下，内联CSS比外部CSS有更快的响应速度。 因为外部CSS会增加HTTP请求 但独立的CSS文件有机会被浏览器缓存起来 而包含动态内容的HTML文档是通常不会被配置为可以进行缓存 此外，外部文件可以提高重用率 一般情况下，优先选择使用外部CSS Author: felicia Blog.LoveAll.us
- 18. 使用 <link> 而不是@import Author: felicia Blog.LoveAll.us
- 19. 使用 <link> 而不是@import @import的缺点： 1.必须放在所有其他规则之前，否则可能会加载不了样式表。 2.即使放在顶部，也可能会导致白屏现象。 3.会导致组件下载时的无序性 而<link>不但语法更简单，而且还能带来性能上的收益。 Author: felicia Blog.LoveAll.us
- 20. 避免使用Filter Author: felicia Blog.LoveAll.us
- 21. 避免使用Filter 在IE中使用filter改变元素的透明度，浏览器占用的内存会增加5M左右。 为了避免这个问题最好使用透明图片替代。 Author: felicia Blog.LoveAll.us
- 22. Over 谢谢观看 如果有更多的意见或想法，请与我联系 QQ：36115409 Author: felicia Blog.LoveAll.us