文档章节

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

wlc534
 wlc534
发布于 2017/09/12 10:25
字数 886
阅读 3
收藏 0
点赞 0
评论 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
博文 31
码字总数 33237
作品 0
前端学习之路(从入门到入坑...)

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

阿小庆 ⋅ 06/14 ⋅ 0

五月前端知识集锦(每月不可错过的文章集锦)

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

夕阳 ⋅ 05/28 ⋅ 0

网易音乐前端实习程序员面试的10个问题,你会几个?

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

W3Cschool ⋅ 04/17 ⋅ 0

奇舞周刊第 259 期:数据驱动改进前端体验的 Guess.js

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

奇舞周刊 ⋅ 05/18 ⋅ 0

物联网学习笔记——构建RESTFul平台1

0.前言 前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我的PC)的互动。但是由于没...

thinkyoung ⋅ 2014/12/02 ⋅ 0

给Web前端初学者的一些建议和学习方法路线

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/24 ⋅ 0

前端要以正确的姿势学习编译原理(上篇)

前端要以正确的姿势学习编译原理(上篇) 发布于 02:05 文章被以下专栏收录

brambles ⋅ 05/22 ⋅ 0

5分钟,掌握9个风骚又简洁的JavaScript技巧

5分钟,掌握9个风骚又简洁的JavaScript技巧 编辑于 2018-05-08

优达学城(Udacity) ⋅ 05/16 ⋅ 0

JS实现HTML静态页传值的方法

JS实现HTML静态页传值的方法 作者:前端开发-武方博 发布:2012-10-29 分类:javascript 阅读:8,735次 此处使用JS方式实现静态页之间值传递,其实很简单,废话不多说,见代码,先看index.h...

thinkyoung ⋅ 2015/06/01 ⋅ 0

【CSS模块化之路2】webpack中的Local Scope

CSS是一门几十分钟就能入门,但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是,本身不具备真正的模块化能力。 1. 面临的问题 你可能会说,...

AlienZHOU ⋅ 06/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JAVA RMI

什么是JAVA RMI Java RMI (Remote Method Invocation) 远程方法调用,能够让客户端像使用本地调用一样调用服务端 Java 虚拟机中的对象方法。RMI 是面向对象语言领域对 RPC (Remote Proced...

saulc ⋅ 10分钟前 ⋅ 0

Linux系统工程狮养成记

如今的社会,随着时代的发展,出现了很多职业,像电子类,计算机类的专业,出现了各种各样的工程师,有算法工程师,java工程师,前端工程师,后台工程师,Linux工程师,运维工程师等等,不同...

linux-tao ⋅ 20分钟前 ⋅ 0

进入编辑模式 vim命令模式 vim实践

1.

oschina130111 ⋅ 20分钟前 ⋅ 0

mysql用户管理、常用sql语句、mysql数据库备份恢复

1. mysql用户管理 mysql默认有一个root超级管理员账户,实际工作环境中不可能每个人都用此root权限,防止误操作、误删除,可以给单独的用户进行授权。 Mysql创建用户以及授权: grant all on...

laoba ⋅ 21分钟前 ⋅ 0

类型后面三个点(String...)和数组(String[])的区别

类型后面三个点(String…),是从Java 5开始,Java语言对方法参数支持一种新写法,叫可变长度参数列表,其语法就是类型后跟…,表示此处接受的参数为0到多个Object类型的对象,或者是一个Obj...

流氓兔- ⋅ 26分钟前 ⋅ 0

JEPLUS表格组件之表格合并——JEPLUS软件快速开发平台

JEPLUS表格组件之表格合并 我们在列表配置时会遇见这样的一种情况,需要对个人的数据进行统一化,对一些数据进行归类,这样展示出来美观又直观,在这篇笔记中我来给大家介绍下如何配置出来专...

JEPLUS ⋅ 28分钟前 ⋅ 0

golang 并发中全局唯一操作

package main// go 携程共享 数据// 加锁解锁操作// 同步锁import ("sync""fmt")// 创建Once结构var once = sync.Once{}func computed(data *int, lock *sync.Mut...

304158 ⋅ 28分钟前 ⋅ 0

Mobx入门之二:asynchronous actions

这一节主要看mobx怎么实现asynchronous actions 1 要实现的demo功能 输入地名,查询天气,利用openweathermap api 2 思想 observable观察数据:location地点、temperature温度 observer响应式...

pengqinmm ⋅ 31分钟前 ⋅ 0

【2018.0620学习笔记】【linux高级知识 13.4-13.6】

13.4 mysql用户管理 创建用户并授权: grant all on *.* to '用户名'@'ip' identified by '密码' //all是操作权限,*.*是库.表,指定格式是'用户名'@'localhost'才能用socket登录本地 gra...

lgsxp ⋅ 52分钟前 ⋅ 0

Java强弱引用示例

package jdk;import java.lang.ref.PhantomReference;import java.lang.ref.ReferenceQueue;import java.lang.ref.SoftReference;import java.lang.ref.WeakReference;public ......

月下狼 ⋅ 58分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部