少叙闲言

承接上一篇，这篇是关于JS、CSS的一些优化，相信很多大家都非常了解了，并且实际上也都在这么做，但我想，很多人和我一样，只知道规范这么做，并不太了解到底为啥这么做，到底好处在哪了？

About JS、CSS

CSS：

  1. 样式表置于顶部
  2. 避免CSS表达式
  3. 使用外部JS、CSS
  4. 削减JS、CSS
  5. <link> ，@import
  6. 避免滤镜

JS：

  1. 脚本置于底部
  2. 使用外部JS、CSS
  3. 削减JS、CSS
  4. 不用重复脚本
  5. 减少访问和操作DOM
  6. 事件委托

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篇相关推荐

  1. 【前端重构技能天赋】（一）——内容篇

    少叙闲言 专业的页面重构师手下出产的页面应该是标准.合理.高效,易扩展,易维护的.为尽早奔向这一NB的方向,吾等前赴后继的前端码农们,升级所需的必要天赋之一:载入更快,更省带宽! 结合网上大量关于Ya ...

  2. 互联网公司2014前端笔试面试题：HTML/CSS篇

    Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto ...

  3. 前端每周清单半年盘点之 CSS 篇

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID:front ...

  4. 前端代码标准最佳实践：CSS篇

    上一篇<前端代码标准最佳实践:javascript>发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量 ...

  5. 前端知识杂烩（HTML[5]?+CSS篇）

    1. CSS 优先级算法如何计算? 2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中? 3.用纯CSS创建一个三角形的原理是什么? 4. 如何解决inline-block元素的空白 ...

  6. 前端开发实习面试题（CSS篇）

    目录 1.CSS3有哪些新特性? 2.介绍一下盒子模型(由什么组成)? 3.定位有哪些值,分别是相对谁定位? 4.如果我想给table表格的第一列内容添加样式,如何做? 5.浮动的作用,如何清除浮动? ...

  7. 〖大前端 - 基础入门三大核心之CSS篇④〗- CSS选择器之元素关系选择器、序号选择器与属性选择器

    说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...

  8. 〖大前端 - 基础入门三大核心之CSS篇②〗- CSS选择器之标签选择器、id选择器、class选择器与原子类

    说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...

  9. 〖大前端 - 基础入门三大核心之CSS篇③〗- CSS选择器之复合选择器与伪类

    说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...

最新文章

  1. android 编译之后黑屏_android 模拟器用3.18的内核无法启动，一直黑屏。
  2. jQuery :nth-child前有无空格的区别
  3. NLP技术路线详解：这是从数学到算法的艺术
  4. redis session共享中的序列化问题
  5. #窗体整人小程序_Excel VBA和文件夹-1.8通过对话框灵活选定文件的小技巧
  6. json_decode用法
  7. bzoj 4031 [HEOI2015]小Z的房间
  8. SQL Server中的动态数据屏蔽
  9. maven -- 解决“Could not calculate build plan”问题
  10. python简述程序的ipo结构_python程序流程图
  11. 关于百度地图海量打点的问题
  12. 使用BootStrap制作网页页面
  13. drupal主题_50个精心挑选的美丽Drupal 6个主题
  14. stm32实现波形发生器
  15. Paper reading (九十一)：Bifidobacterium breve Bif195 Protects Against Small-Intestinal Damage
  16. Ubuntu安装Caffe .build_release/tools/caffe: error while loading shared libraries: libcudnn.so.5
  17. RT-Thread--片上 flash作 U 盘
  18. 小学学计算机应该学什么礼物,小学毕业礼物排行榜，运动学习两不耽误
  19. java 生鲜在线购买网站 ssm生鲜商城
  20. mysql某一列 赋值_[MySQL]定时把某一列值赋值给另一列

热门文章

  1. OpenCV（C++） 使用stereoRectify()、initUndistortRectifyMap()、remap()函数，验证双目标定效果。
  2. 神州数码在武汉建第二总部
  3. 西数硬盘linux,SMR硬盘可靠性不再是问题 西数神油ZoneFS系统纳入Linux中
  4. 9. nio实现一个多人聊天室
  5. ns3中first.cc~fourth.cc代码注释
  6. springBoot+mybatisPlus+springMvc+activiti6整合 Eclipse
  7. IT男的”幸福”生活续9
  8. 互联网大厂中职级、薪资、股权是怎么划分的？带你走进阿里 P10、腾讯 T4、华为 18的神秘职阶
  9. Uranusring的美剧时代——看美剧的八大理由
  10. 一位大学老师写给大学生的100条肺腑之言