前端进阶篇——02、CSS和JS
博客专区 > wlc534 的博客 > 博客详情
前端进阶篇——02、CSS和JS
wlc534 发表于3个月前
前端进阶篇——02、CSS和JS
  • 发表于 3个月前
  • 阅读 1
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

1)将CSS样式表放在顶部(使用Link标签将样式表放在文档head中)

CSS的效果:将样式表放在文档底部会导致在浏览器中阻止内容逐步呈现。为避免当样式变化时重绘页面中的元素,浏览器会阻塞内容逐步呈现。

    这里只推荐 link标签      <link rel="stylesheet" href="style.css">

因为@import规则可能会导致白屏,或组件下载时的无序性。
 

 

2)将脚本放在底部

JS脚本底部的效果:

在这里我们要提到前端开发中经常会遇到的——使用并行下载:要考虑带宽和CPU速度。

脚本阻塞下载:然而,在加载脚本时不可以使用并行下载。这是为了保证脚本能够按照正确的顺序执行。


 

上述两个特点是现在主流前端开源代码的结构都基本遵循的,这样的结构主要的原因就是为了优化网站的加载


 

3)CSS表达式(适用于ie5及之后的版本)

background-color: expression( (newDate()).getHours()%2 ? "#B8D4FF" : "#F08A00");  //ie

这个CSS使用技巧比较少,但是也存在,其问题在于:

  表达式的求值频率太高了。它们不止在页面呈现和大小改变时求值,当页面滚动、甚至鼠标拖拽都要求值。

所以一般来说,有两种方法可以选择:一次性表达式 和 事件处理器




 

4)代码精简

精简(Minification):

  是从代码中移除不必要的字符以减小其大小,进而改善加载时间的实践。在代码被精简后,所以的注释以及不必要的空白字符(空格,换行和制表符)都将被移除。对js而言,这可以改善响应时间效率,因为需要下载的文件大大减小了。比如日常开发中所用的大多都是xxx.min.js,一般来说,可以使用Gulp、minifier这类工具简化代码

内联脚本(也需精简)

优化css——合并相同的类,移除不使用的类等。

移除注释和空白:比如使用缩写(“#666”代替“#666666”)和不必要的字符串(“0”代替“0px”)

 

另外,在模板系统中实现脚本管理模块,避免重复脚本

 

Watch.png

上图是在对页面加载的时候,浏览器内存消耗和脚本加载的监控统计信息,开发时所作的优化可以直观的反应到这个监控页面



 

CPU.png

上图是在页面加载时,对于浏览器的运行环境进行的监控统计,注意,这里是精确到具体函数的性能消耗,当然也可以查询具体的堆栈调用



 

Optimize.png

上图是chrome浏览器自带的Audits功能,该功能于前年上线,对于制定网页的代码和代码库进行扫描,并给出页面可优化意见,对于未使用的CSS样式和JS代码都有标注,从上图中可以看出,作为新手的我只是把jquery-mobile-1.3.2.min.js/css导入,但是对于jquery-mobile库中的样式和代码仍有大部分未曾触碰


 

CSS和JS作为H5开发中的利器和基本,还有很多精髓仍未普遍皆知,在前端开发的技术领域,笔者还只是个新人,希望前端的技术大能和对前端有热情的朋友多多交流,O(∩_∩)O谢谢

共有 人打赏支持
粉丝 2
博文 28
码字总数 26726
×
wlc534
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: