浅析一下网页的前端优化

1) HTML部分

语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发;

减少DOM节点:加速页面渲染;

给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放;

防止src属性和link的href属性为空:当值为空时,浏览器很可能会把当前页面当成其属性值加载;

正确的闭合标签:如避免使用,浏览器会多一个将它解析成的过程;

链接为目录或首页的地址后面加”/”,如http://www.5icool.org/;

用LINK而不用@import方式导入样式;

样式放在页头,JS放在页尾;

缩小favicon.ico并缓存;

2) CSS部分

避免使用CSS Expressions(CSS表达式):如background-color: expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;

避免使用CSS Filter(CSS滤镜);

精简压缩CSS代码,减少文件大小;

CSS Sprites 图片尽量采取聚合技术减少图片请求;

减少查询层级:如.header .logo要好过.header .top .logo;

减少查询范围:如.header>li要好过.header li;

避免TAG标签与CLASS或ID并存:如a.top、button#submit;

3) Javscript部分

尽量少用全局变量;

使用事件代理绑定事件,如将事件绑定在body上进行代理;

避免频繁操作DOM节点;

不使用EVAL;

减少对象查找,如a.b.c.d这种查找方式非常耗性能,尽可能把它定义在变量里;

类型转换:把数字转换成字符串使用”” + 1,浮点数转换成整型使用Math.floor()或者Math.round();

对字符串进行循环操作,譬如替换、查找,应使用正则表达式;

精简压缩JS代码,减少文件大小;

资源文件按模块进行放置,有利于团队开发

类库、媒体使用CDN加速,减轻服务器压力

综合:

(1)减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

(2)前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

(3)用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

(4)当需要设置的样式很多时设置className而不是直接操作style。

(5)少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

(6)避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

(7)图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

(8)避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

应用:

添加网页图标

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180828A1W1I500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券