前端性能优化

减少HTTP请求(CSS Sprites、内联图片和脚本、样式表合并)

只有10%~20%的最终用户响应时间花在了下载HTML文档商,其余80%~90%时间花在了下载页面的所有组件上。

CSS Sprites:

CSS Sprites也可以合并图片,但是更为灵活。CSS Sprites是将多个图片合并到一个图片中,CSS Sprites适用于任何支持背景图片的HTML标签中。通过使用CSS的background-position属性可以将元素放置到图片中期望的位置上面。

内联图片:

通过使用data:URL模式可以在Web页面包含图片但无需任何额外的HTTP请求。data:URL模式在1995年提议的,对它描述为:允许将小块数据内联为‘立即数’,数据就在URL自身中。其它类似的模式包括:ftp:、file:和mailto:。除此之外还有很多模式,smtp:、pop:、dns:等等。

合并脚本和样式表

将样式表放在顶部

将样式表放于文档底部会导致在浏览器中阻止内容逐步呈现。为了避免当样式变化时重绘页面的元素,浏览器会阻止内容的逐步呈现,也就出现了白屏 。白屏是对无样式内容闪烁的弥补,浏览器可以延迟呈现,知道所有的样式表都下载完成后。

将脚本放在底部

前面使用样式表的时候,页面逐步呈现会阻止,因此建议将样式表置于HEAD中,使用脚本时,脚本会阻止并行下载,脚本后面的内容,逐步呈现都被阻塞了,后面的组件下载都被阻塞了,将脚本放在页面越靠下的地方,意味着越多的内容能够逐步的呈现。

CSS的优化手段

由于在解析 CSS 选择器的时候是从右往左解析的,所以这种解析顺序决定了我们在写选择器的时候就可以有一些优化操作:

根据上面的代码,可以总结以下几点

1.尽量避免使用通配符 *,尽可能的只对用到的元素去匹配

2.少使用标签选择器,如果可以的话可以利用类来代替,例如上面的 1 和 2 的写法

3.对于嵌套较深的元素,在利用 CSS 匹配的时候尽可能的少嵌套,因为后代选择器的消耗是很高的。

4.对于 p.name 这种写法,如果只用一个 .name 就可以的话,那么就没必要写前面的 p,这样也可以减轻检索的消耗

JS 的优化手段

浏览器在遇到 script 标签的时候,会停止对 HTML 和 CSS 的解析,这是因为我们可以用 JS 修改 DOM,也可以修改样式,对于浏览器来说,它并不知道我们在 JS 里面做了什么操作,所以干脆就停止解析 HTML和 CSS,直接去下载执行 JS,省的会造成一些错误。

在浏览器遇到第一段 script 的时候,此时拿不到 div ,正是因为渲染 HTML 停止了,证明了 JS 可以阻塞 HTML 的解析

浏览器遇到第二段 script 的时候,此时已经解析完了 body 部分的 HTML 代码,所以可以拿到 div,但是因为 style 是在这个 script 后面执行的,所以此时拿到的 color 是默认颜色 rgb(0, 0, 0) ,也就是黑色。所以证明了 JS 可以阻塞 CSS 的解析。

最后一段,CSS 解析完了以后,就拿到了设置的颜色,红色,没有任何问题。

优化 JS 的建议

.删除不必要的注释和空格

我们尽量把操作 DOM 相关的 JS 文件放到 body 后面,这样不会阻塞 HTML 和 CSS 的解析,毕竟,最快解析出来 HTML 和 CSS,呈现出一个页面给用户,是最主要的,就算此时只是一个静态的页面。



©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目录 一、总结一句话总结1、JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本身之内呢?2、为...
    Zal哥哥阅读 723评论 0 0
  • 什么是前端性能优化(what)? 从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每...
    我性本傲阅读 3,541评论 0 3
  • 你愿意为打开一个网页等待多长时间?我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人...
    前端杨肖阅读 600评论 0 0
  • 日常工作和生活中,我们经常利用浏览器去打开一些URL来获取我们所需的资源,那么作为一个开发者或者性能测试工程师,如...
    七月鎏金阅读 768评论 0 0
  • 简介 前端优化的目的是什么 ? 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供...
    JuanitaLee阅读 840评论 0 5