twtiqfn 2019-11-03
作为前端工程师,拥有巨大的能力和责任,是用户的最后一道防线,前端直接决定用户的体验
事实上,只有10%--20%的最终用户响应时间是花在从web服务器获取html文档并传送到浏览器中的。如果希望有效减少页面响应时间,就必须关注剩余80%--90%的最终用户体验
了解用户时间都花在等待哪些地方?
因此,改善响应时间的最简单途径就是减少组件的数量,并由此减少http请求的数量
map,area 标签
将多个图片合并到一个单独的图片中
利用background-image,background-position将html元素放到背景图片中的期望位置上
内容发布网络(CDN)是一组分布在多个不同地理位置的web服务器,用于更加有效地向用户发布内容
如何配置组件,最大化利用浏览器缓存改善页面性能
1996 http 1.0 expires 日期
1999 http 1.1 cache-control:max-age=484200 时间数
header 里面设置'Cache-Control':'max-age=600', 来对请求进行缓存。
2015 http 2.0
缓存文档过期之前,缓存可以以任意频率使用这些副本,无需与服务器联系
3.1 条件再验证
只有自某个日期之后资源发生了变化之后,才会指示服务器执行请求
3.2控制缓存的能力
cache-control:no-store
cache-control:no-cache
强制请求新资源,防止缓存提供未经证实的已缓存对象
减小http响应的大小来减少响应时间。如果http请求产生的响应包很小,传输时间就会减少,因为只需要将很小的包从服务器传送到客户端,这以效果对速度较慢的带宽尤其明显
content-encoding:gzip,default
压缩成本
服务端会花费额外的cpu周期来完成压缩,客户端要对压缩文件进行解压缩,要检测收益是否大于开销。经验是对大于1kb或2kb的文件压缩
使用link标签将样式表放在文档的head中,样式表在页面中的位置不影响下载时间,但是会影响页面的呈现
白屏:浏览器在等待所有样式表下载完成,反之浏览器可以逐步呈现,但要承担闪烁的风险
将脚本从页面的顶部移到底部,页面可以逐步呈现,也可以提高下载的并行度
css表达式是动态设置css的一种强大(并且危险)的方式
操作系统会缓存DNS
从代码中移除不必要的字符,优化css,合并相同的类,移除不使用的类
重定向会使得页面变慢
浏览器渲染的重排与重绘
浏览器渲染html
html解析成DomTree,css解析cssDomTree
DOM Tree和CSSOM Tree解析完成后,被附加到一起,形成渲染树(Render Tree)。
节点信息计算(重排),这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息。
渲染绘制(重绘),这个过程被叫做(Painting 或者 Repaint)。即根据计算好的信息绘制整个页面。
实际上是根据渲染树中每个渲染对象的信息,计算出各自渲染对象的几何信息(DOM对象的位置和尺寸大小),并将其安置在界面中的正确位置。
相比重排,重绘就简单多了,所谓重绘,就是当页面中元素样式的改变并不影响它在文档流中的位置时,例如更改了字体颜色,浏览器会将新样式赋予给元素并重新绘制的过程称。
position属性,最好是设为absoulte或fixed,这样不会影响其他元素的布局