前言
在上一篇文章《我的css架构理念》中，承蒙园内的朋友们抬爱，竟然一路被推荐，让我这小小一枚前端攻城狮既意外又兴奋进而惶恐。惶恐的是资历实在有限，知识实在匮乏，相当害怕误人子弟。此真心话！但接下来我依然会坚持有时间就写写文章，既能总结，又能学到新知识，还能分享给诸位，我认为，分享---是件功德无量的事，互联网不就是因此而绚丽多彩嘛！
上篇文章的留言里有好多朋友是对我css架构就http请求的问题提出质疑，我本想回答的，但不知道从何说起。前端性能方面的知识我了解得并不深入，囫囵吞枣地看过一两本重构的书、喜欢查查资料，看看一些大牛写的文章，觉得人家那么做有道理了，就搬过来用，林林总总的做些总结，于是有了此文。都不是什么新东西，但是因为小知识点太多，希望这里面的东西有你想要的答案吧。
前端性能优化--前端工程师不得不说的痛
1.html、css、js三者相分离。分离得彻底点！为什么这三者要分离，相信大家都明白，不多说。
2.css的导入方式。css用link而不用@import，因为在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部，延长css的载入时间，还可能出现文件下载次序被更改的情况。
3.理性对待jquery。jquery让我们“write less,do more”，它有太多优势：强大的选择器、DOM操作的完美封装、完善的Ajax、良好的兼容性处理。但是，我们是否就此离不开它呢？我觉得应该根据需求，根据业务逻辑来。一个页面如果只需要几行或几十行js代码可以搞定的效果，为什么要用jquery？让页面先加载个jquery.js，再书写自己的代码？没必要吧。
4.合理布局页面的内容。DOM的加载顺序是由上而下的，遇到css，加载css，遇到js，停滞下来，加载并解析js。在布局页面的时候，把主体内容优先显示，把重要内容靠上布局，让浏览器优先解析，是种较好的方案。
5.js的导入方式。《javascript王者归来》里有对js的导入方式进行优劣对比。我个人认为，在不考虑js代码重用及维护的前提下(但是往往这点成为我最重要的衡量指标)，把具有重要业务模块的js代码置于title里，把次要的具有操作效果的js代码置于DOM相对应的对象之后。而这样做的理论依据即DOM的加载顺序。上面那话不好理解，举例来说：
上图是QQ音乐首页的导航，主导航的重要作用不言而喻，如下是两段相应的代码：
复制代码代码如下:
test--js导入方式1
复制代码代码如下:
test--js导入方式1
两段代码的js效果为鼠标移到MV菜单项时显示子菜单选项。第一段代码中，当浏览器解析到
在上一篇文章《我的css架构理念》中，承蒙园内的朋友们抬爱，竟然一路被推荐，让我这小小一枚前端攻城狮既意外又兴奋进而惶恐。惶恐的是资历实在有限，知识实在匮乏，相当害怕误人子弟。此真心话！但接下来我依然会坚持有时间就写写文章，既能总结，又能学到新知识，还能分享给诸位，我认为，分享---是件功德无量的事，互联网不就是因此而绚丽多彩嘛！
上篇文章的留言里有好多朋友是对我css架构就http请求的问题提出质疑，我本想回答的，但不知道从何说起。前端性能方面的知识我了解得并不深入，囫囵吞枣地看过一两本重构的书、喜欢查查资料，看看一些大牛写的文章，觉得人家那么做有道理了，就搬过来用，林林总总的做些总结，于是有了此文。都不是什么新东西，但是因为小知识点太多，希望这里面的东西有你想要的答案吧。
前端性能优化--前端工程师不得不说的痛
1.html、css、js三者相分离。分离得彻底点！为什么这三者要分离，相信大家都明白，不多说。
2.css的导入方式。css用link而不用@import，因为在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部，延长css的载入时间，还可能出现文件下载次序被更改的情况。
3.理性对待jquery。jquery让我们“write less,do more”，它有太多优势：强大的选择器、DOM操作的完美封装、完善的Ajax、良好的兼容性处理。但是，我们是否就此离不开它呢？我觉得应该根据需求，根据业务逻辑来。一个页面如果只需要几行或几十行js代码可以搞定的效果，为什么要用jquery？让页面先加载个jquery.js，再书写自己的代码？没必要吧。
4.合理布局页面的内容。DOM的加载顺序是由上而下的，遇到css，加载css，遇到js，停滞下来，加载并解析js。在布局页面的时候，把主体内容优先显示，把重要内容靠上布局，让浏览器优先解析，是种较好的方案。
5.js的导入方式。《javascript王者归来》里有对js的导入方式进行优劣对比。我个人认为，在不考虑js代码重用及维护的前提下(但是往往这点成为我最重要的衡量指标)，把具有重要业务模块的js代码置于title里，把次要的具有操作效果的js代码置于DOM相对应的对象之后。而这样做的理论依据即DOM的加载顺序。上面那话不好理解，举例来说：
上图是QQ音乐首页的导航，主导航的重要作用不言而喻，如下是两段相应的代码：
复制代码代码如下:
复制代码代码如下:
两段代码的js效果为鼠标移到MV菜单项时显示子菜单选项。第一段代码中，当浏览器解析到
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/xinde/79164.html
