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

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/3298482/blog/1535665

前端进阶篇——02、CSS和JS相关推荐

【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
[前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标前言一. ...
＜＜前端进阶篇＞＞ PDF 出炉了 — 「阿宝哥」，精心准备的 6 万多字 170 页的前端进阶资料
一.前言大家好,我是阿宝哥.首先简单介绍下我自己,2017 年 3 月份开始在思否写 Angular 修仙之路专栏,目前已输出 138 篇原创文章.曾获得思否年度优秀文章作者及两季 Top Writ ...
css就近原则_「Web前端开发进阶篇」CSS优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个"规则"就是重点. [引言] 讲解完这篇CSS优先级的文章 ...
【组件化开发】前端进阶篇之如何编写可维护可升级的代码
前言我还在携程的做业务的时候,每个看似简单的移动页面背后往往会隐藏5个以上的数据请求,其中最过复杂的当属机票与酒店的订单填写业务代码这里先看看比较"简单"的机票代码: 然后看看 ...
python 阮一峰_阮一峰：前端框架 React 及 CSS in JS
作者: 阮一峰 1. 以前,网页开发有一个原则,叫做"关注点分离"(separation of concerns). 它的意思是,各种技术只负责自己的领域,不要混合在一起,形成耦合 ...
【前端】HTML、CSS、JS、PHP 的学习顺序
原文地址:http://www.th7.cn/web/html-css/201404/29642.shtml 侵删如果你有耐心坚持一年以上的话, 我会推荐HTML->CSS->JS-&g ...
前端学习笔记（CSS、JS基础篇）
CSS篇注意:css注释使用/ /,而不是或者//,否则很容易导致不明错误!!! div padding:内边距.盒子内容与盒子边框的距离设置,相当于给盒子加了厚度,使用 ...
前端提高篇（十一）JS进阶8函数参数及arguments
形参与实参基础点可以看这篇文章获取形参个数:函数名.length function add(a,b,c,d,e){console.log('形参个数:' + add.length);} 运行效果: ...
web项目：智能出行规划网站——爬虫+flask+echarts+基础前端（html、css、js、jq）
目录项目简介一.项目名称: 二.项目背景: 三.项目核心: 四.项目要求: 技术说明代码展示一.前端部分: 二.爬虫部分: 三.后端部分: 网页展示总结分析一.遇到的问题: 二.解决方法: ...
MySQL进阶篇(02)：索引体系划分，B-Tree结构说明
本文源码:GitHub·点这里 || GitEE·点这里一.索引简介 1.基本概念首先要明确索引是什么:索引是一种数据结构,数据结构是计算机存储.组织数据的方式,是指相互之间存在一种或多种特定关系 ...

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

前端进阶篇——02、CSS和JS相关推荐

最新文章

热门文章