深圳网站建设、深圳建网站、网站建设公司定制属于您的高端个性化网站!

搜索深圳网站建设相关案例及相关信息 服务热线:13530005572/15112579390
首页 > 独占观点 > 【深圳做网站】HTML5的前端性能优化文档分享

【深圳做网站】HTML5的前端性能优化文档分享

  • 所属分类:独占观点
  • 作者: 独占网络
  • 更新时间: 2015-11-20 9:51:41
  • 返回列表
       对于HTML5的技术优化,可能很多人都有从各方面有所了解,HTML5的出现对于FLASH网站来说是一个灾难,因为HTML5取代了FLASH网站的效果而且又保留了正常网站的可优化性。同时HTML5的出现与正常网站的优化相对也是有一定的优势的,下面深圳网站建设就跟大分简单说一下HTMl5前端性能优化的一些知识:

        加载优化具体体现在
        1、合并CSS样式、JavaScript效果;
        2、合并小图片,使用雪碧图;
       3、缓存一切可缓存的资源;
       4、使用长Cache;
       5、压缩HTML、Css、JavaScript;
       6、使用按需加载、滚屏加载、屏加载;
       7、通过Media Query加载;
       8、增加Loading进度条;
       9、异步加载第三方资源;


        CSS优化具体体现在
        1、Css写在头部,JavaScript写在尾部或异步;
        2、避免图片和iFrame等空Src;
        3、尽量避免重设图片大小、避免使用DataUrl;
        4、尽量避免写在HTML标签中写Style属性;
        5、避免Css表达式、移除空的Css规则;
        6、正确使用Display的属性;
        7、不滥用Float、Web字体;
        8、标准化各种浏览器前缀;

       图片优化具体体现在
       1、使用(Css3、SVG、IconFont)代替图片;
       2、使用Srcset;
       3、图片Webp优于Jpg,Png8优于Gif;     
  
        脚本优化具体体现在
       1、减少重绘和回流;
       2、缓存Dom选择与计算;
       3、缓存列表Length;
       4、尽量使用事件代理、避免批量绑定事件、尽量使用ID选择器;
       5、使用Touchstart、touchend代替Click;    

        渲染优化具体体现在
        1、HTML使用Viewport;
        2、减少Dom节点;
        3、尽量使用Css3动画;
        4、适当使用Canvas动画;
        5、Touchmove、Scroll事件会导致多次渲染;
        6、使用(Css3 Transitions,Css3 3D Transforms,Opacity,Canvas,WebGl,Video)来触发GPU渲染;

        HTMl5是当前比较前沿的网站开发技术,虽然功能很好的但是在浏览的兼容上暂时还不是很理想,所以在使用的时候还是要根据具体的实际情况来说。对于网站来说并不是功能好的的好,而是适合自己的才是好。
     
        深圳网站制作公司独占网络是你不错的选择,网址:http://www.sz886.com

相关推荐

您值得信任的网站建设专家!

为其提供系统的基于互联网的品牌行销策略 、 创意执行 、 追踪运营服务 。