文档章节

前端进阶篇——02、CSS和JS

wlc534
 wlc534
发布于 2017/09/12 10:25
字数 886
阅读 3
收藏 0

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谢谢

© 著作权归作者所有

共有 人打赏支持
wlc534
粉丝 4
博文 40
码字总数 37684
作品 0
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0
盘点JavaScript和CSS交互的方法

随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技 术,它们需要相互密切的合作。我们的网页中都有.js文件和...

kouxunli1
2014/12/03
0
0
五月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳
05/28
0
0
网易音乐前端实习程序员面试的10个问题,你会几个?

近日,w3cschool app开发者头条上分享了网易音乐前端实习程序员面经,引来了不少程序员粉丝们的围观。 在分享网易音乐前端实习面试问题之前,w3cschool先跟小伙伴们分享前端学习干货: 0、h...

W3Cschool
04/17
0
0
用js来实现那些数据结构及算法—目录

  首先,有一点要声明,下面所有文章的所有内容的代码,都不是我一个人独立完成的,它们来自于一本叫做《学习JavaScript数据结构和算法》(第二版),人民邮电出版社出版的这本书。github代...

zaking
05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

内存模型是怎么解决缓存一致性的?

在再有人问你Java内存模型是什么,就把这篇文章发给他。这篇文章中,我们介绍过关于Java内容模型的来龙去脉。 我们在文章中提到过,由于CPU和主存的处理速度上存在一定差别,为了匹配这种差距...

Java填坑之路
12分钟前
1
0
vue-cli 3.0 初体验

最近复习了下vue,突然发现vue-cli已经更新到3.0版本了,并且变化蛮大,看来要不停的学习,真是一入前端深似海。 安装步骤: 1、全局安装 npm install -g @vue/cli Vue CLI 的包名称由 vue-...

tianyawhl
14分钟前
0
0
Angular进阶之路

【初级】会写页面,能出东西。 给定环境和 rest API,不用第三方库,能在十分钟内完成一个 master/detail 结构的带路由的应用(可以不管美观)。 知识点:Angular CLI、组件、路由、HTTP 服务...

陆小七的主页
16分钟前
0
0
Redis缓存数据库安全加固指导(一)

背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一位,但是原生...

中间件小哥
16分钟前
0
0
百万级数据mysql分区

1. 什么是表分区? 表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分。从逻辑上看,只有一张表,但是底层却是由多个物理分区组成。 2. 表分区与分表的区别 分表...

罗文浩
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部