网站建设合同是否缴纳印花税,wordpress divi 2.7,单位网站建设内容,南通网站设计(1) 如何加载JS#xff0c;JS文件应放在什么位置 外部JS的阻塞下载 所有浏览器在下载JS的时候#xff0c;会阻止一切其他活动#xff0c;比如其他资源的下载#xff0c;内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。 有人…(1) 如何加载JSJS文件应放在什么位置 外部JS的阻塞下载 所有浏览器在下载JS的时候会阻止一切其他活动比如其他资源的下载内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。 有人会问为什么JS不能像CSS、image一样并行下载了这里需要简单介绍一下浏览器构造页面的原理 当 浏览器从服务器接收到了HTML文档并把HTML在内存中转换成DOM树在转换的过程中如果发现某个节点(node)上引用了CSS或 者 IMAGE就会再发1个request去请求CSS或image,然后继续执行下面的转换而不需要等待request的返回当request返 回后只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候浏览器发送1个js request就会一直等待该request的 返回。因为浏览器需要1个稳定的DOM树结构而JS中很有可能有代码直接改变了DOM树结构比如使 用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转浏览器为了防止出现JS修改 DOM树需要重新构建DOM树的情况所以就会阻塞其他的下载和呈现. 嵌入JS是指直接写在HTML文档中的JS代码。上面说了引用外 部的JS会阻塞其后的资源下载和其后的内容呈现哪嵌入的JS又会是怎样阻塞的了拿两段代码运行后对比。会发现代码1中在前5秒中页面上是一篇空 白5秒中后页面全部显示。 代码2中前5秒中blogjava,csdn等先显示出来5秒后MSN才显示出来。 可以看出嵌入JS会阻塞所有内容的呈现而外部JS只会阻塞其后内容的显示2种方式都会阻塞其后资源的下载。 根本原因因为浏览器会维持html中css和js的顺序样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载所以就会出现上面CSS阻塞下载的情况。 嵌入JS应该放在什么位置 1、放在底部虽然放在底部照样会阻塞所有呈现但不会阻塞资源下载。 2、如果嵌入JS放在head中请把嵌入JS放在CSS头部。 3、使用defer 4、不要在嵌入的JS中调用运行时间较长的函数如果一定要用可以用setTimeout来调用 (2) 为什么要减少请求数如何减少请求数! http连接的开销 相比request头部多余的数据http连接的开销则更加严重。先看看从用户输入1个URL到下载内容到客户端需要经过哪些阶段 1. 域名解析 2. 开启TCP连接 3. 发送请求 4. 等待(主要包括网络延迟和服务器处理时间) 5. 下载资源 可能很多人认为每次请求大部分时间都花在下载资源上让我们看看blogjava资源下载瀑布图(每种颜色代表的阶段与上面5个阶段对应) 如何减少请求数 1、合并文件 合并文件就是把很多JS文件合并成1个文件很多CSS文件合并成1个文件这种方法应该很多人用到过这里不做详细介绍 只推荐1个合并的工具yuiCompressor 这个工具yahoo提供的。 http://developer.yahoo.com/yui/compressor/ 2、合并图片 这是利用css sprite通过控制背景图片的位置来显示不同的图片。这种技术也是大家都用过的不做详细介绍推荐1个在线合并图片的网站:http://csssprites.com/ 3、把JS、CSS合并到1个文件 上面第1种方法说的只是把几个JS文件合并成1个JS文件几个CSS文件合并成1个CSS文件哪如何把CSS和JS都合并到1个文件中. 4、使用Image maps Image maps 是把多个图片合并成1个图片然后使用html中的map标签连接图片并实现点击图片不同的区域执行不同的动作image map在导航条中比较容易使用到。 image map的使用方法见 http://www.w3.org/TR/html401/struct/objects.html#h-13.6 5、data嵌入图片 项目中的处理方案 为了解决上面讨论过的问题在下写了1个如下的组件组件中根据我们自己的实际情况使用了文件大小来做为文件的版本号虽然在文件修改很小(比如把字符a改成b)可能文件大小并没有变导致版本号也不会变。 但这种机率还是非常低的。当然如果你觉的使用文件修改时间作为版本号适合你只需要修改一行代码就行下面看下这个组件的处理流程(本来想用流程图表达最后还是觉的文字来的直白写) 1. 程序启动(contextInitialized) 2. 搜索程序目录下的所有merge.txt文件根据merge.txt文件的配置合并文件, merge.txt文件实例如下 # 文件合并配置文件,多个文件以|隔开以/开头的表示从根目录开始, # 空格之后的文件名表示合并之后的文件名 # 把1,2,3合并到all文件中 1.js|2.js|3.js all.js #合并CSS /css/mian.css|/css/common.css all.css 3. 搜索程序目录下所有JSCSS文件(包括合并后的)每个文件都压缩后生成对应的1个新文件。 4. 搜索程序目录下所有JSP,html文件把所有JS,css的引用代码改成压缩后并加了版本号的引用。 (3) 减少请求响应的数据量 如何减少请求、响应的数据量(即在网络中传输的数据量)减少传输的数据量不仅仅可以加快页面加载速度更可以节约服务器带宽为你剩不少钱(好像很多机房托管都是按流量算钱的)。 GZIP压缩 gzip是目前所有浏览器都支持的一种压缩格式IE6需要SP1及以上才支持(别说你还在用IE5,~_~)。gzip可以说是最方便而且也是最大减少响应数据量的1种方法。 说它方便是因为你不需要为它写任何额外的代码只需要在http服务器上加上配置都行了现在主流的http服务器都支持gzip各种服务器的配置这里就不一一介绍(其实是我不知道怎么配) 别对图片启用gzip 在知道了gzip强大的压缩能力后你是否想对服务器上的所有文件启用gzip了先让我们看看图片中启用gzip后会是什么情况。 比较适合启用gzip压缩的文件有如下这些 1. javascript 2. CSS 3. HTMLxml 4、plain text 别乱用cookie 现 在几乎没有哪个网站不使用cookie了可是该怎么使用cookie比较合适了cookie有几个重要的属性:path(路 径),domain(域),expires(过期时间)。浏览器就是根据这3个属性来判断在发送请求的时候是否需要带上这个cookie。 cookie使用最好的方式就是当请求的资源需要cookie的时候才带上该cookie。其他任何请求都不带上cookie。妙用204状态 http 中200,404,500状态大家都很清楚但204状态大家可能用的比较少204状态是指服务器成功处理了客户端请求但服务器无返回内容。204是 HTTP中数据量最少的响应状态204的响应中没有body而且Content-Length0。很多人在使用ajax提交一些数据给服务器而不 需要服务器返回的时候常常在服务端使用下面的代码response.getWriter().print()这是返回1个空白的页面是1个 200请求。它还是有body而且Content-Length不会等于0。其实这个时候你完全可以直接返回1个204状 态 (response.setStatus(204))。 (4) 如何加载google-analytics(或其他第三方)的JS 很 多网站为了获取用户访问网站的统计信息使用了google-analytics或其他分析网站(下面的讨论中只提google- analytics, 简称ga)。注册ga后ga就会生成一段js脚本很多人直接把这段js复制到body的最后面就完事(包 括 博客园、CSDN、BlogJava)。可是ga自动生成的这段JS真的就是最合理的吗 哪怎么样才算是合理怎样才是不合理了因ga只是1个分析工具它的使用绝对不能影响到我们的程序如果影响了则是不合理的。不影响则是合理的。 使用document.write来加载JS注意了这样加载js是阻塞加载的就是这个js没加载完后面的所有资源和JS都不能下载和执行。可能你会觉的这段代码在body的最后面后没已经没内容没什么会阻塞的了。 还 有一些你忽略了相信很多人在写JS的时候需要在页面加载完毕后执行一些JS或AJAX一般写在window.onload 事件或者写入 jquery的$(document).ready()方法中。这些JS就会被阻塞。如果我们的页面上很多数据在 window.onload中使用 AJAX加载而偏偏这个时候ga因为某些原因(和谐和谐)不能访问或者访问很慢的时候。问题就来我们自己的JS一直在等待ga的JS加载完只有等 ga的js加载超时后才会执行我们的JS。 (5) 疯狂的HTML压缩 (6) 页面呈现、重绘、回流。 页面呈现流程 在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解页面是怎么把html结合css等显示到浏览器上的下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 1. 浏 览器把获取到的html代码解析成1个Dom树html中的每个tag都是Dom树中的1个节点根节点就是我们常用的document对 象 (html tag)。dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构 里面包含了所有的html tag包括display:none隐藏还有用JS动态添加的元素等。 2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体在解析的过程中会去掉浏览器不能识别的样式比如IE会去掉-moz开头的样式而firefox会去掉_开头的样式。 3、 dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree但其实区别有很 大render tree能识别样式render tree中每个node都有自己的style而且render tree不包含隐藏的节点(比如 display:none的节点还有head节点)因为这些节点不会用于呈现而且不会影响呈现的所以就不会包含到 render tree中。注 意 visibility:hidden隐藏的元素还是会包含到render tree中的因为visibility:hidden 会影响布局 (layout)会占有空间。根据css2的标准render tree中的每个节点都称为box(Box dimensions)box所有属 性width,height,margin,padding,left,top,border等。 4. 一旦render tree构建完毕后浏览器就可以根据render tree来绘制页面了。 回流与重绘 1. 当render tree中的一部分(或全部)因为元素的规模尺寸布局隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流就是在页面第一次加载的时候。 2. 当render tree中的一些元素需要更新属性而这些属性只是影响元素的外观风格而不会影响布局的比如background-color。则就叫称为重绘。 注从上面可以看出回流必将引起重绘而重绘不一定会引起回流。 什么操作会引起重绘、回流 其实任何对render tree中元素的操作都会引起回流或者重绘比如 1. 添加、删除元素(回流重绘) 2. 隐藏元素display:none(回流重绘)visibility:hidden(只重绘不回流) 3. 移动元素比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)或者移动元素到另外1个父元素中。(重绘回流) 4. 对style的操作(对不同的属性操作影响不一样) 5. 还有一种是用户的操作比如改变浏览器大小改变浏览器的字体大小等(回流重绘) 如何减少回流、重绘 减少回流、重绘其实就是需要减少对render tree的操作并减少对一些style信息的请求尽量利用好浏览器的优化策略。具体方法有 1. 不要1个1个改变元素的样式属性最好直接改变className但className是预先定义好的样式不是动态的如果你要动态改变一些样式则使用cssText来改变 2. 让要操作的元素进行离线处理处理完后一起更新这里所谓的离线处理即让元素不存在于render tree中比如 a) 使用documentFragment或div等元素进行缓存操作这个主要用于添加元素的时候大家应该都用过就是先把所有要添加到元素添加到1个div(这个div也是新加的) 最后才把这个div append到body中。 b) 先display:none 隐藏元素然后对该元素进行所有的操作最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。所以只要操作只会有2次回流。 3 不要经常访问会引起浏览器flush队列的属性如果你确实要访问就先读取到变量中进行缓存以后用的时候直接读取变量就可以了 4. 考虑你的操作会影响到render tree中的多少节点以及影响的方式影响越多花费肯定就越多。 (6) 了解CSS的查找匹配原理让CSS更简洁、高效 匹配原理 浏览器CSS匹配不是从左到右进行查找而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;}浏览器的查找顺序如下 先查找html中所有classred的span元素找到后再查找其父辈元素中是否有p元素再判断p的父元素中是否有id为divBox的div元素如果都存在则匹配上。 简洁、高效的CSS: 所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误还老以为这样写才是高效的) 1.不要在ID选择器前使用标签名 一般写法DIV#divBox 更好写法#divBox 解释 因为ID选择器是唯一的加上div反而增加不必要的匹配。 2.不要再class选择器前使用标签名 一般写法span.red 更好写法.red 解释 同第一条但如果你定义了多个.red而且在不同的元素下是样式不一样则不能去掉比如你css文件中定义如下 p.red{color:red;} span.red{color:#ff00ff} 如果是这样定义的就不要去掉去掉后就会混淆不过建议最好不要这样写 3.尽量少使用层级关系 一般写法#divBox p .red{color:red;} 更好写法.red{..} 4.使用class代替层级关系 一般写法#divBox ul li a{display:block;} 更好写法.block{display:block;} 感觉可以值得学习一下就转了。转自www.zhihaijiangku.com 转载于:https://www.cnblogs.com/zhilelele/p/8026585.html
