zoukankan      html  css  js  c++  java
  • 前端优化技巧笔记

    首先,很明显,我都是在网上抄的...

    减少http请求数

    图片,css,script,flash,等等这些都会增加http请求数,减少这些元素的数量能减少响应时间。

     

    把样式表放到顶部

    我们发现把css放到文档头部会让网页加载得更快。因为这样可以让页面逐渐加载。把样式表放到接近底部的问题是它阻止了页面元素的逐渐

    显示。这样还会导致“flash of unstyled content” ,即在样式表加载之前页面内容是以没有样式的形式显示出来的,待加载完样式后,页面重绘,内容一闪即改变了样式表现。

     

    把脚本放到底部

    把脚本放到尽可能底部的地方,一个原因是让页面逐渐渲染,另一个是实现更好的并行下载。对于脚本,脚本以下的内容被阻止逐渐加载了,因为只有当下载完脚本以后才会下载下面的内容。

     

    避免 css expressions(CSS表达式)

    css expressions 是一个有力(和危险)的方式动态的改变css的属性。expressions的问题就在与它的计算频率绝对超出我们的想象,甚至当我们移动鼠标,都会引起页面的重绘!

     

    让脚本和样式外链

    Javascript和CSS应该是外部调用还是内嵌呢?用外部调用文件的方式更快,因为他们是可以被缓存的,如果是内嵌在页面中他们就无法被缓存了!

     

    减小脚本与样式文件体积

    对于脚本,有两个比较流行的工具是用来减小脚本的体积的–JSMin和YUI Compressor。而对于样式文件,则要靠作者培养良好的代码书写习惯了。

     

    减少DOM元素数量

    DOM元素越少,页面生成越快。具体方法则需要靠个人的总结和积累了。

     

    最小化 iframe 的数量

    熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处,也有其弊端,一分为二看问题吧。

     

    避免重定向

    不是绝对的避免,尽量减少。应该注意一些不必要的重定向。比如 http://www.dbanotes.net/arch 与 http://www.dbanotes.net/arch/ 二者之间是有差异的,对于以目录形式访问的HTTP链接,后面添加个 “/” ,就能有效避免一次重定向。

     

    关于 CSS Sprites 技巧

    就是"利用 background-position 进行背景图定位",把多次 HTTP 调用变为一次调用。把多个背景图片拼成一个,减少 HTTP 调用,这是一个很好的思路,但一定要记住这个大图片不能太"重"。

     

    Gzip压缩

    Gzip是现在最流行和最有效的压缩方式,它是GNU开发的,RFC1952标准化。(Gzip是在服务器端压缩图片,css,脚本等,传送到用户端的浏览器再解压,这样可以提高传输速度,不过对服务器的压力会增大,一般选择部分元素压缩比较合适。)


    javascript相关

    DOM操作应该是脚本中最耗性能的一类操作,例如增加、修改、删除DOM元素或者对DOM集合进行操作。如果脚本中包含了大量的DOM操作则需要注意:

    在脚本中document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合,在平时使用的时候大多将它作为数组来使用,因为它有length属性,也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多,原因是这个集合并不是一个静态的结果,它表示的仅仅是一个特定的查询,每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合”包括读取集合的length属性、访问集合中的元素。
    因此,当你需要遍历HTML Collection的时候,尽量将它转为数组后再访问,以提高性能。即使不转换为数组,也请尽可能少的访问它,例如在遍历的时候可以将length属性、成员保存到局部变量后再使用局部变量。

    尽量少使用全局变量,特别在循环里,将全局变量转为局部变量再使用显得尤其重要,因为全局变量处于作用域链的最顶端,访问时的查找次数是最多的。 

    Javascript中的数据访问包括直接量(字符串、正则表达式)、变量、对象属性以及数组,其中对直接量和局部变量的访问是最快的,对对象属性以及数组的访问需要更大的开销。当出现以下情况时,建议将数据放入局部变量:
    a. 对任何对象属性的访问超过1次
    b. 对任何数组成员的访问次数超过1次
    另外,还应当尽可能的减少对对象以及数组深度查找。

     

    CSS选择符

    在大多数人的观念中,都觉得浏览器对CSS选择符的解析式从左往右进行的,但实际上浏览器对选择符的解析是从右往左进行的。

    如:#toc A { color: #444; }

    浏览器必须遍历查找每一个A标签节点,再对其上一级元素做ID匹配,效率并不像之前想象的那样高。

    CSS属性

    尽量把属性写详细(写子属性)浏览器解析CSS属性时,如果该属性是复合属性,则会对它的每个属性值进行判断,判断属于哪一个子属性,再作渲染。

  • 相关阅读:
    前端工程师应该具备的三种思维
    7 个 Bootstrap 在线编辑器用于快速开发响应式网站
    js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交)
    JAVASCRIPT加密方法,JS加密解密综述(7种)
    JavaScript生成GUID的方法
    js判断是否为手机访问
    Jquery中parent()和parents()
    jQuery中ajax和post处理json的不同
    JQuery实现回车代替Tab键(按回车跳到下一栏)
    js中replace的用法
  • 原文地址:https://www.cnblogs.com/czf-zone/p/3202349.html
Copyright © 2011-2022 走看看