Web前端,高性能优化(转)

2021年10月12日 14:44:22 拜伦建站 172次

一、避免使用iframe
iframe也叫内联frame,可将一个HTML文档嵌入另一个HTML文档中。
iframe的好处是,嵌入的文档独立于父文档,通常也借此使浏览器模拟多线程。缺点是:

  ①虽然iframe能模拟多线程,但主流浏览器的同域名并行下载数是不变的,浏览器对同域名的链接总是共享浏览器级别的连接池,
即使是不同窗口或标签页的同域名网页。
②在页面加载时,iframe会阻塞父文档onload事件的触发。并且有些浏览器需在触发onload事件后才能被触发onunload事件。
故用户用onload事件长久未触发而离开页面时,不会触发onunload事件。
※不兼容IE6~8的解决方案:使用JavaScript动态加载iframe元素或动态设置其src属性。

<iframe id=ifr ></iframe> document.getElementById( ‘ifr’ ).setAttribute( ‘src’ , ‘url ’ );

  ③iframe是文档内最消耗支援的元素之一,即使是空iframe的开销也是昂贵的。【通过Steve Souders测试】

二、避免空连接属性
空连接指:img、link、script 和 iframe元素的src或href属性的值为空。(如src = ””)
设置了空连接后浏览器依然会以默认规则发送请求:
①IE6~8中只有img元素会出问题:IE会将img的空地址解析为当前页面地址的目录地址并请求。
如当前网页地址为,img的地址会被解析为
②早些版本的Webkit和Firefox会将空连接解析为当前页面的地址。在ios与android中此问题较严重。
如果页面有多个空连接属性元素,会增加服务器的请求次数。
③幸运的是,主流浏览器对iframe的src属性值为空时,会解析为about:blank地址,而不发送额外请求。

三、避免节点深层级嵌套
层级越深的节点在初始化构建时,所占内存越多。
通过浏览器HTML解析器会将整个HTML文档的结构存储为DOM树结构。当节点嵌套层次越深,构建的DOM书层次也越深。

四、缩减HTML文档大小
①删除对执行结果无影响的空格空行和注释;
②避免table布局;
③使用HTML5;

五。显式指定文档字符集
在HTML页面开时指定字符集有助于浏览器立即开始解析HTML代码。
HTML文档通常被解析为一序列的带字符集编码信息的字符串,通过Internet传送。
字符集编码在HTTP响应头中,或HTML标记中指定。浏览器通过指定的字符集,吧编码解析为可现实在屏幕上的字符。
若浏览器无法获知页面的编码字符集,一般会在执行脚本和渲染页面之前,先将字节流缓存,再搜索可进行解析的字符集 或 以默认字符集来解析。

六、显示设置图片的宽高
有时需要在页面加载完之前,就对页面布局进行定位。
若页面中的图片没指定尺寸,或尺寸与实际图片大小不符,浏览器会在图片下载完成后再”回溯”该图片并重新显示,从而浪费时间。
故最好为页面的图片设置指定尺寸(行内样式或CSS样式)。

<img src=”hello.png” width=”400″ height=”300″>

七、避免 脚本阻塞加载
浏览器在解析常规script标签时,会等待script下载完毕后,才解析执行,之后的HTML代码就只能等待。
故应该将脚本放在文档的末尾:

<script src=”example.js” ></script> </body>



高性能CSS

一、避免使用@import
CSS2.1加入的@import,会使页面在加载时添加额外延迟。
由于浏览器不能并行下载样式,会导致页面增添额外的往返耗时。而使用<link>能并行下载样式,但任然是多次请求。

二、避免AlphaImageLoader滤镜
此滤镜能解决IE6即一下版本显示PNG图片的半透明效果,但会在加载图片时终止内容的呈现,并冻结浏览器。
在每个元素(不仅仅是图片)都会运算一次,添加内存开支。
应使用PNG8格式来代替,或用下划线(_filter)只针对IE6。

三、避免CSS表达式
CSS表达式是设置动态CSS属性的即强调又危险的方法。IE5开始支持,IE独有。

//实现每隔一小时切换一次背景颜色background-color: expression((newDate()).getHours()%2?”#FFFFFF”: ”#000000″ );

  CSS表达式的缺点是技术频率极大,在页面显示、缩放、滚动 或 移动鼠标,都会重新计算一次。移动随便会达到1w次以上的计算量。
①使用一次性的表达式能减少计算次数,在第一次运行时将结果赋给指定样式属性,并用该属性代替CSS表达式。
②如果样式属性必须在页面周期内动态地改变,使用时间句柄代替CSS表达式是一个可行的办法。

四、避免通配选择器
优化选择器的原则是减少匹配时间。CSS选择器的匹配机制是:从右向左进行规制匹配的!
#header > a { font-weight:blod; }
上面这条规制实际是浏览器遍历页面所有a元素,并确定其父元素的id是否为header。
#header  a {…}
后代选择器开销更大,在遍历页面的所有a元素后,会需向上遍历直到根节点。

上一篇:web前端性能优化进阶路
下一篇:上海上弦科技seo

声明:本页内容由好推网络科技有限公司通过网络收集编辑所得,所有资料仅供用户参考;本站不拥有所有权,也不承认相关法律责任。如您认为本网页中有涉嫌抄写的内容,请及时与我们联系进行举报,并提供相关证据,工作人员会在5个工作日内联系您,一经查实,本站将立刻删除涉嫌侵权内容。

相关资讯 Releva ntnews
  1. 我们的承诺
  2. 我们的实力
  3. 我们的未来

站点地图

Copyright © 2002-2019 拜伦建站 sh-bilon.com 版权所有