【前端重构技能天赋】（二）——Javascript、CSS篇
少叙闲言
承接上一篇，这篇是关于JS、CSS的一些优化，相信很多大家都非常了解了，并且实际上也都在这么做，但我想，很多人和我一样，只知道规范这么做，并不太了解到底为啥这么做，到底好处在哪了？
About JS、CSS
CSS：
- 样式表置于顶部
- 避免CSS表达式
- 使用外部JS、CSS
- 削减JS、CSS
- <link> ，@import
- 避免滤镜
JS：
- 脚本置于底部
- 使用外部JS、CSS
- 削减JS、CSS
- 不用重复脚本
- 减少访问和操作DOM
- 事件委托
1、样式表置顶，Why？
浏览器渲染页面都是自上而下的渲染，当在<body>里遇到<link>或是<style>时候会阻塞渲染页面，而且也有可能会造成页面重绘，就好像格子铺里，东西都按顺序摆好了，但是老板说，这个东西得这样、那样摆，又得挨个重新摆了。除此之外，加在<head>里是为了可以顺序加载所需的样式。
2、避免CSS表达式，Why？
很多人包括我在内，当学习到CSS表达式时候，都说避免或不要用它，所以都偷懒的不用看了，包括JS里的eval一样……
后来有一次项目我就偏偏用了一次，结果。。。它成为了最后查出来的BUG。。。（IE6下影响了页面样式）
其实CSS表达式最主要的弊端是它影响性能，要知道CSS是具有时效性的，也就是说，当你修改一下样式，它会马上生效，
而改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行频繁的求值，会严重影响，所以要尽量避免。
3、使用外部JS、CSS，Why？
我们都知道使用外部文件会增加HTTP请求，但是由于缓存的关系，当用户再次访问时，或者访问其它页面里相同的文件时候，页面会明显提升响应速度，而且，还有一点好处就是外部JSS、CSS可以减少页面内的文档大小。
4、削减JS、CSS，Why？
这个不用说了……你说为什么？
5、用<link>，@import，Why？
先来看看两者区别：
区别1：老祖宗的差别。@import完全是CSS提供的一种方式，link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：加载顺序的差别。link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：兼容性的差别。link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：使用dom控制样式时的差别。link支持使用Javascript控制DOM去改变样式；而@import不支持。
两者比较，@import明显弱爆了……
6、避免使用滤镜，Why？
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。
提供一篇：淘宝的《png的秘密》
7、脚本置于底部，Why？
脚本的问题就是当浏览器渲染时候遇到<script>，就会跑去下载，然后执行里面的JS，这期间页面就会阻塞，等待完事了再继续向下执行。所以，为了先将页面最快的呈现给用户，JS应放在</body>的上面。
关于async和defer，提供一篇：《Javascript 异步加载详解》
8、减少访问、操作DOM，Why？
在浏览器中，通常要求DOM实现和Javascript实现保持相互独立，例如IE的JScript的JS实现位于jscript.dll中，而DOM实现在mshtml.dll中，像chrome、safari、Firefox，它们的渲染引擎和JS引擎也都是分离开的，两个独立的部分以功能接口连接就会带来性能损耗。
访问：在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JS看成另一个岛屿，两者之间以一座收费桥连接”。
操作：修改和访问DOM元素会造成页面的Repaint和Reflow，也就是重绘和回流。
所以问题显而易见。
解决方案：缓存已经访问过的有关元素
更新完节点之后再将它们一次性添加到文档树中
9、事件委托，Why？
事件委托，也就是利用事件冒泡的机制，把事件绑定到元素对象的父元素上。
例如：一个多行的表格，含有经过提示行效果，并且表格会随着分页经行变化。
分析：鉴于上面的第7条，我们不能牺牲性能去为每个变化的行元素绑定事件。
解决方案：把事件绑定到table的父元素上，根据e.target(e.srcElement)的节点类型判断来进行操作
（内容篇至此，其他内容未完，待续……）
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
【前端重构技能天赋】（二）——Javascript、CSS篇相关推荐
- 【前端重构技能天赋】（一）——内容篇
少叙闲言 专业的页面重构师手下出产的页面应该是标准.合理.高效,易扩展,易维护的.为尽早奔向这一NB的方向,吾等前赴后继的前端码农们,升级所需的必要天赋之一:载入更快,更省带宽! 结合网上大量关于Ya ...
- 互联网公司2014前端笔试面试题：HTML/CSS篇
Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto ...
- 前端每周清单半年盘点之 CSS 篇
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID:front ...
- 前端代码标准最佳实践：CSS篇
上一篇<前端代码标准最佳实践:javascript>发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量 ...
- 前端知识杂烩（HTML[5]?+CSS篇）
1. CSS 优先级算法如何计算? 2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中? 3.用纯CSS创建一个三角形的原理是什么? 4. 如何解决inline-block元素的空白 ...
- 前端开发实习面试题（CSS篇）
目录 1.CSS3有哪些新特性? 2.介绍一下盒子模型(由什么组成)? 3.定位有哪些值,分别是相对谁定位? 4.如果我想给table表格的第一列内容添加样式,如何做? 5.浮动的作用,如何清除浮动? ...
- 〖大前端 - 基础入门三大核心之CSS篇④〗- CSS选择器之元素关系选择器、序号选择器与属性选择器
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
- 〖大前端 - 基础入门三大核心之CSS篇②〗- CSS选择器之标签选择器、id选择器、class选择器与原子类
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
- 〖大前端 - 基础入门三大核心之CSS篇③〗- CSS选择器之复合选择器与伪类
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
最新文章
- FPGA之道（27）VHDL的操作符号
- HDU 3874 Necklace (数状数组)
- android应用兼容报告,手机资讯导报：华为发布国内首份Android7.0应用兼容报告
- ML之MLiR：利用多元线性回归法，从大量数据(csv文件)中提取五个因变量(输入运输任务总里程数、运输次数、三种不同的车型，预测需要花费的小时数)来预测一个自变量
- eclipse开发cocos2dx 3.2环境搭建之二： cocos2dx 3.2安装及测试运行 （An internal error occurred during: “C/C++ Indexe）
- python 装饰器 三 （带有参数的装饰器）
- VMware 虚拟机如何连接网络，且远程可连接
- 常用排序算法(八)桶排序
- 暴力破解-----token验证
- eNSP网络类型实验报告
- 阿里研发三面,面试官一套组合拳让我当场懵逼
- JAVA对excle创建、读取、设置单元格颜色、背景色、跨行跨列
- 制作简单的星星评分案例
- ETL数据仓库工程师笔试题和面试题整理
- 第97篇学生端样式调整及不检测摄像头（一）
- 【广州数据报表中心怎么样】什么样的大数据
- asp.net获取URL和IP地址
- 【vijos】1006 晴天小猪历险记之Hill（dijkstra）
- Python入门-多线程
- FX3U PLC源代码，stm32芯片。 全套硬件，软件源码，可以直接用GX Works2编程直接写入