文档章节

前端进阶篇——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
博文 53
码字总数 50096
作品 0
前端学习之路(从入门到入坑...)

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

阿小庆
06/14
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
奇舞周刊第 259 期:数据驱动改进前端体验的 Guess.js

记得点击文章末尾的“阅读原文”查看哟~ 下面先一起看下本期周刊摘要吧~ 时间过得好快,转眼又到周五~ 上穷碧落下黄泉,周刊君从数十篇文章中,为你挑选了本期的九篇文章,愿你有(gei)所(...

奇舞周刊
05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring加载properties文件的两种方式

在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取properties里面的配置,这样后期只需要改动properties文件即可,不需要修...

架构师springboot
24分钟前
0
0
分布式事务,原来可以这么玩?

多个数据要同时操作,如何保证数据的完整性,以及一致性? 答 : 事务 ,是常见的做法。 举个栗子: 用户下了一个订单,需要修改 余额表 , 订单 表 , 流水 表 ,于是会有类似的伪代码: st...

微笑向暖wx
26分钟前
2
0
IE6兼容PNG32图片显示PNG8图片

IE6并不是不支持PNG图片,只是不支持半透明通道。 是支持PNG8色表引索全透明的。 以往都是通过滤镜或统统使用PNG8实现兼容。 但是我发现twitter的png图标可以在chrome中显示png32,在IE6显示...

linsk1998
38分钟前
0
0
linux运维需要掌握的基础知识

踏入linux运维工程师这一职业,其实有很多工具技能需要掌握,下面我来给大家一一介绍。 1、shell脚本和另一个脚本语言,shell是运维人员必须具备的,不懂这个连入职都不行,至少也要写出一些...

linuxprobe16
40分钟前
0
0
《netty入门与实战》笔记-03:数据传输载体 ByteBuf 介绍

ByteBuf结构 首先,我们先来了解一下 ByteBuf 的结构 以上就是一个 ByteBuf 的结构图,从上面这幅图可以看到: ByteBuf 是一个字节容器,容器里面的的数据分为三个部分,第一个部分是已经丢弃...

Funcy1122
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部