文档章节

前端进阶篇——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
粉丝 6
博文 84
码字总数 143947
作品 0
私信 提问
前端学习之路(从入门到入坑...)

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

阿小庆
06/14
0
0
每个JavaScript工程师都应懂的33个概念

摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:stephentian Fundebug经授权转载,版权归原作者所有...

Fundebug
10/30
0
0
webpack1.x + ElementUI 初探

前言 ElementUI 目前版本是1.1,虽然还在1.x阶段,但是组件种类已经很丰富了,用来ElementUI 做管理页面,非常合适。本文介绍在真正开始使用ElementUI 之前的准备工作,适合第一次使用webpa...

力谱宿云
2016/12/21
1K
0
HTML 5视频教程系列之JavaScript学习篇-何韬-专题视频课程

HTML 5视频教程系列之JavaScript学习篇—52816人已学习 课程介绍 HTML 5视频教程系列中JavaScript开发的基础知识讲解及学习。 课程收益 通过自学视频掌握HTML 5开发手机应用和手机游戏的技能...

pkutao
2015/02/10
0
0
我是如何利用一个周末时间成为前端工程师的

2周前,我将 TravisLight 开源了,这是一个建立监控的工具,也是一个用于 Travis-CI 的构件监控工具。出于兴趣,我用了一个周末的时间做了这个项目,而且我是以一个真正的前端开发者的角色来...

oschina
2012/12/25
31.2K
36

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
47分钟前
3
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
6
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
6
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
5
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部