zoukankan      html  css  js  c++  java
  • Web前端性能优化

    Web前端性能优化,应该怎么做?

    0.5922019.08.09 19:17:36字数 890阅读 427

    想要成为一名合格的Web前端工程师,Web前端性能优化是一个必须要掌握的知识,那么应该怎么进行Web前端性能优化呢?

     

    1、CSS精灵

    CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

    2、代码压缩

    (1)将table改为div布局

    尽量将table标签布局HTML重构div布局,可以节约至少40%的代码量。由于div代码少于table布局的HTML网页,所以搜索引擎索引权重也优于table布局的HTML网页。

    (2)缩减精简div、span、ul、li等系列标签

    布局DIV+CSS网页时候,有时候可以节约一些DIV布局代码,减少代码量。

     

    (3)删除多余空格

    删除多余空格换行,可以有效地压缩HTML代码占用字节,一般在开发完成后可以对HTML中代码进行删除换行和空格内容。

    (4)表格类型布局时候适当使用table替代div布局

    如果是本身是表格数据列表排版,我们最好选择table,因为表格布局使用table优于div布局,使用table布局却比div布局节约HTML标签代码和节约CSS样式。

    (5)网页GZIP压缩

    自己的服务器推荐设置网页Gzip压缩功能。

    3、高质量的JS代码肯定能省很多事,封装JS以及重复调用方法能够减少很多操作。

     

    4、减少对DOM的操作

    (1)创建临时父元素。

    (2)创建子元素,并添加内容,设置属性。

    (3)把子元素加入到临时父元素中。

    (4)把临时父元素添加到DOM树。

    或:(1)找到要添加位置的元素。

    (2)改变该元素内容为需要的HTML。

    5、使用JSON格式来进行数据交换

    原理:JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

    6、高效使用HTML标签和CSS样式

    7、使用CDN加速(内容分发网络)

    CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

    8、精简CSS和JS文件

    9、注意控制Cookie大小和污染

      
     
  • 相关阅读:
    YARN的job提交流程
    shell脚本学习(二)
    解决document.getElementById("")在IE7中误读成name的bug
    类数组对象HTMLCollenction
    NodeList对象的特点
    复习周期不能太长!!!
    递归 / 前端零基础入门 2019版 / 步骤五 · 3-6 节点遍历案例
    节点查找以及节点遍历:两种方式
    判断是否是IE浏览器
    html5shiv主要解决IE6-8 无法识别HTML5的新标签,父节点不能包裹子元素,以及应用CSS样式
  • 原文地址:https://www.cnblogs.com/hbxylcy/p/11692800.html
Copyright © 2011-2022 走看看