前端性能优化是指浏览器加载网页时,减少加载时间,提高网页运行速度,从而达到一个更好的用户体验。可是要做到前端性能优化这一点却并不容易,因为前端性能优化涉及多个方面,在html ,css ,js里面都可以做到前端性能优化。这里就从这三个方面来看一下怎么做到这方面。
做到前端性能优化首先就应该按照Web标准来写网页,
Web标准是指html, css, js, 各自分开独立实现。在引入css和js时,所放的位置是有讲究的,浏览器在加载网页时按照从上到下的顺序,如果引入的css放在body下面,在网速较慢的情况下就会出现,首先看到的是没有css样式的页面,如果放在上面,即使在网速较慢的情况下,也不会出现看不到css样式未显示的清况,在上面引入css时,浏览器首先加载了css,再加载html, 这样就到了一个正常的浏览效果,加载js时,不能加载其他内容,所以在下面引入js,是最为合适的。
在html里面,图片是加载时间较慢的一种。由于图片大小不一,数量众多,所以将图片合并是不错的一种方式。
图片和并是指在css里面使用背景进行裁剪的方式,使用background:position在设置一下x轴和y轴即可。Js. css合并压缩同样可以减少浏览器的加载时间,这里就要使用到一个叫grunt.js 的工具使用grunt.js工具首先需要安装node.js运行环境。使用字体图标,减少使用flash, 多使用css动画。
避免使用表达式。在css当中应避免使用@import导入css.避免使用滤镜(Filter)在使用颜色值时,如果出现相同的单个字母,可以缩写为3个,例如#ffffff,则可以写为#fff,#aabbcc,
可以写为#abc。css选择器匹配的规则越少越好,因为选择器在加载时,是做右到左的顺序,并减少使用属性选择器,减少使用后代选择器,多利用css继承属性。如font.color等属性。Js代码优化中应使用多线程,线程包含在进程当中,进程包含在系统当中。进程可以同时运行。使用定时器.setTimeout.setInterval。使用Google开发的插件Gear(采用Webwork技术,解决兼容性内存管理)。使用delete删除对象的属性,从dom节点中删除不必要的节点 添加节点应该使用apppendChlid或使用Jquieryde append方法,这有这样才不会影响到其他节点。批量操作dom,使用innerHTML开销小,数度快,同时让内存更加安全。如果循环增加节点应该采用临时变量进行存放,再一次性使用innerTHML添加。
删除节点前,一定要先删除事件在删除节点,否则节点所占的内存不会释放。为节点添加事件时,可以为父元素注册事件,由于浏览器有事件冒泡的行为,因此就不需要为每个子元素添加事件。在html里面添加图片可以降低图片的质量,因为图片的质量越高,加载时间越长,并使用恰当的格式,如.jpg. gif. png。也可以使用base64编码这种方式添加图片,但必须加上数据头。