如何优化网页css js抓取工具从dom css js

来源：蜘蛛抓取(WebSpider) 时间：2016-07-20 04:44 标签： js dom优化
君，已阅读到文档的结尾了呢~~
利用Javascript DOM创建并优化网页图片库
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
利用Javascript DOM创建并优化网页图片库
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&posts - 3,&
comments - 3,&
trackbacks - 0
作者：野次链接：/question//answer/来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
1. 减少HTTP请求次数
尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发出5次http请求，这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。
2. 使用CDN
网站上静态资源即css、js全都使用cdn分发，图片亦然。
3. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。
4. 为文件头指定Expires
Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。 他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：新浪微博的这个css文件的Expires时间是 09:14:14.
5. 使用gzip压缩内容
gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。
6. 把CSS放到顶部
网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。
7. 把JS放到底部
加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件 ，所以就把js放在页面底部最后加载。
8. 避免使用CSS表达式
举个css表达式的例子font-color: expression( (new Date()).getHours()%3 ? &#FFFFFF" : &#AAAAAA" );这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。
9. 将CSS和JS放到外部文件中
目的是缓存文件，可以参考原则4。 但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。
10. 权衡DNS查找次数
减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。
11. 精简CSS和JS
这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等。
12. 避免跳转
有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问&时，实际上返回的是一个包含301代码的跳转，它指向的是（注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。
另一种是不用域名之间的跳转， 比如访问&&跳转到。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。
13. 删除重复的JS和CSS
重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。
14. 配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载
15. 可缓存的AJAX
异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存
url : 'url',
dataType : "json",
cache: true,
success : function(son, status){
16. 使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是一个&两步走&的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担
18. 避免404
比如外链的css或者js文件出现问题返回404时，会破坏浏览器对文件的并行加载。并且浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。
19. 减少Cookie的大小
Cookie里面别塞那么多东西，因为每个请求都得带着他跑
20. 使用无cookie的域
比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。
21. 不要使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。
22. 不要在HTML中缩放图片
比如你需要的图片尺寸是50* 50
&img width=&50&P height=&50&P src=&hahah.jpg& alt=&hahaha& /&
那就不用用一张500*500的大尺寸图片，影响加载
23. 缩小favicon.ico并缓存
以上是Yslow的23个优化原则，基本可以涵盖现在前端大部分的性能优化原则了，很多更加geek和精细优化方法都是从这些原则里面延伸出来的。 具体想了解更多优化细则的童鞋建议去看看下面的一本书，毕竟页数多讲的也细嘛：《》，这里面其实就是细化的讲解了上面的23原则。
阅读(...) 评论()这些是我写代码时的一些经验，总结了一下分想给大家，没啥顺序，想到就写上了
1.使用局部变量避免使用全局变量比如
function test(){&&&&&&&&&&&&&&& var s = document.getElementById('aaa');&&&&&&&&&&&&&&& s.innerHTML = document.body.clientH&&&&&&& }&改成
function test(){&&&&&&&&&&&&&&& var d =&&&&&&&&&&&&&&&&&&&&&&& s = d.getElementById('aaa');&&&&&&&&&&&&&&& s.innerHTML = d.body.clientH&&&&&&& }局部变量的好处就是减少了作用域链的查找我建议要是有两次的引用就用局部变量
2.避免使用with（这个估计地球人都知道）
我理解原因就是with会创建自己的作用域，这样就加长了原来的作用域链，使得在with块中执行的代码反而变慢了，在书写上好像省了代码，其实在访问上反而变长变繁琐了，性能下降了例子&&&&&&& 使用with
function test(){&&&&&&&&&&&&&&&&&&&&&&& with(document.body){&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& clientHeight = '200px';&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& clientWidth = '200px'&&&&&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& }
&&&&&&& 其实都可以写成
function test(){&&&&&&&&&&&&&&&&&&&&&&& var ds = document.&&&&&&&&&&&&&&&&&&&&&&& ds.clientHeight = '200px';&&&&&&&&&&&&&&&&&&&&&&& ds.clientWidth = '200px'&&&&&&&&&&&&&&& }
3. 遍历nodelist的方式
&一般的方式都是
var as = document.getElementsByTagName('div');&&&&&&& for(var i=0,l&as.i&l;i++){//只计算一次长度}&&&&&&& 我的方式一次都不用&&&&&&& for(var i=0,ci=as[i++];){}当nodeList完结时就为false就结束了&&&&&&& 好处，没计算长度，省了在循环里赋值，代码更加少了,i++到了判断里（注意：这个方式用在nodelist里可以，如果你用到array里，可会有问题的，数组里有个0后者null什么的就瞎了)
4.别用那么多个var，一个加逗号就搞定了
var a =1;&&&&&&& var b = 1;&&&&&&& var c =1;&&&&&&& 代码长，性能差&&&&&&& 拆成&&&&&&& var a=1,&&&&&&&&&&&&&&& b=1,&&&&&&&&&&&&&&& c=1;
&5.innerHTML是最好的选择
往元素添加元素时，最好用innerHTML
6.ie的removeChild不好用
一般咱们删除一个元素会用
elm.removeChild(subElm)
这个在ie下不好用，因为在ie下这个只是把这个元素从dom树中断开了，但并没用真正删除，它现在变成了孤立的节点了，要想真正删除，可以这样
var ryc = document.createElement('div');&&&&&&& div.appendChild(subElm);&&&&&&& div.innerHTML = '';&&&&&&& div =
这样就真的删除了，除了ie外别的都可以用removeChild达到效果
7.为多个同级元素绑定事件时，不用为每个都绑定，为他们的父级绑定就行了比如
&ul id="a"&&&&&&&&&&&&&&&& &li&sdf&/li&&li&sdf&/li&&li&sdf&/li&&li&sdf&/li&&li&sdf&/li&&li&sdf&/li&&&&&&&& &/ul&可能你要为每个li添加click
为每个添加那可繁琐且容易出现溢出(ie）
其实只要为 ul一个添加就行了,因为事件是冒泡向上的
var ul = document.getElementById('a');&&&&&&& ul.onclick = function (e){&&&&&&&&&&&&&&& !e&&(e=event);&&&&&&&&&&&&&&& var target = e.srcElement||e.&&&&&&&&&&&&&&& if(target.tagName=='LI'){&&&&&&&&&&&&&&&&&&&&&&& //your code &&&&&&&&&&&&&&& }&&&&&&& }
8.尽量用原生的方法，因为原生的都是用c/c++编译而成的他们执行的要比用js写的方法快多了 9.appendChild用的多时一定要用docuemntfragment
比如&&&&&&& for(var i=0;i&1000;i++){&&&&&&&&&&&&&&& var o = document.createElement('div');&&&&&&&&&&&&&&& document.body.appendChild(o);&&&&&&& }用documentFragment
var f = document.createDocumentFragment();&&&&&&& for(var i=0;i&1000;i++){&&&&&&&&&&&&&&& var o = document.createElement('div');&&&&&&&&&&&&&&& f.appendChild(o);&&&&&&& }&&&&&&& document.body.appendChild(f);10. if else用的&=3个了，那用switch吧，好阅读，性能好
11. if&=3,别用if了，用3元表达式吧
12. if==1，if改&&
if(a==1)a=2&&&&&&& 改&&&&&&& a==1&&(a=2);13.计算元素位置，while()offsetParent
这个方式是老方式了，现在的浏览器ie6以上，ff3.1以上,chrome,opera(我只测了最新的)都支持这个el.getBoundingClientRect返回一个对像，分别是top,left,right,bottom的值
14.正则的查找没有indexOf快
var s= 'sdfsdfsdfAAAsdfdsfs';for(var i=0;i&1000;i++){&&&&&&& s.indexOf('AAA')}比这个快
var s= 'sdfsdfsdfAAAsdfdsfs';for(var i=0;i&1000;i++){&&&&&&& /AAA/.test(s)}15.在正则中多用非捕获(?:)这样快
16.设置某个元素的style时用cssText简单些
el.style.cssText +=";postion:"（注意:position前;不能去了,因为ie没有这个;position认不出来了就，比的浏览器没这个毛病)
17.在new 时,没有参数时函数名后边的括号可以去了
new fn()==&new fnnew Image()==&new Image
先想到这么多，再想到时在补偿，认为不对的提啊，别客气
??????????????二次元同好交流新大陆
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(2689)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'高性能js：浏览器中DOM操作的性能优化',
blogAbstract:'　频繁地对于DOM进行操作的很是损耗性能，但在富网页应用中我们编写脚本无可避免地要跟DOM打交道，到底怎么才能优化这个性能瓶颈呢，大致从以下三种情况去考虑： 访问和修改DOM元素修改DOM样式，会造成页面的重绘和重新排版通过DOM事件处理程序来响应用户
　　访问和修改DOM元素
　　在浏览器中，DOM的实现和Javascript的实现通常是保持相互独立的。下面了解一下主流浏览器的渲染引擎和JS引擎：
　　浏览器　　
　　渲染引擎(内核)　　
　　JS引擎　　
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:0,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}

我要回帖

更多关于 js dom优化 的文章

 

随机推荐