怎么确定电商网站建设的目标,整合wordpress,外包项目平台,个性个人网站模板一. 写出下面程序的运行结果for结果#xff1a;1秒后一下子打印出5个5。当循环完成时才会轮到setTimeout异步执行其回调函数function#xff0c;此时i已经变成5#xff0c;故5个console.log(i)里的i全使用的是5。易错点#xff1a;千万别写成“打印5个4”啊#xff01;暴风… 一. 写出下面程序的运行结果for结果1秒后一下子打印出5个5。当循环完成时才会轮到setTimeout异步执行其回调函数function此时i已经变成5故5个console.log(i)里的i全使用的是5。易错点千万别写成“打印5个4”啊暴风哭泣_二. 请列举至少8种jQuery中的DOM节点操作并说明用途。1.查找节点使用jQuery在文档树上查找节点非常容易。可以通过jQuery选择器(见第3题)来完成。用jQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点然后可以用attr()方法来获取元素的各种属性的值。 1.1查找元素节点var 1.2查找属性节点var 2.创建节点$(html)方法会根据传入的HTML标记字符串创建一个 DOM对象并将这个DOM对象包装成一个jQuery对象后返回。要想将新创建的元素插入文档可以使用jQuery中的append()等方法。 2.1创建元素节点 var 2.2创建文本节点 创建文本节点就是在创建元素节点时直接把文本内容写出来然后使用append()等方法将它们添加到文档中就可以了。var 2.3创建属性节点 创建属性节点与创建文本节点类似也是直接在创建元素节点时一起创建。var 3.插入节点 动态创建HTML元素并没有实际用处还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单地办法是让它成为这个文档的某个节点的子节点。 3.1 append() 向每个匹配的元素内部追加内容$(p).append(b你好/b) // 结果是p我说b你好/b/p 3.2 appendTo() 将所有匹配的元素追加到指定的元素中$(b你好/b).appendTo(p) // 结果是p我说b你好/b/p 3.3 prepend() 向每个匹配的元素内部前置内容$(p).prepend(b你好/b) // 结果是pb你好/b我说/p 3.4 prependTo() 将所有匹配的元素前置到指定的元素中$(b你好/b).prependTo(p) // 结果是pb你好/b我说/p 3.5 after() 在每个匹配的元素之后插入内容$(p).after(b你好/b) // 结果是p我说/pb你好/b 3.6 insertAfter() 将所有匹配的元素插入到指定元素的后面$(b你好/b).insertAfter(p) // 结果是p我说/pb你好/b 3.7 before() 在每个匹配的元素之前插入内容$(p).before(b你好/b) // 结果是b你好/bp我说/p 3.8 insertBefore() 将所有匹配的元素插入到指定的元素的前面$(b你好/b).insertBefore(p) // 结果是b你好/bp我说/p4.删除节点 如果文档中某一个元素多余那么应将其删除。 4.1 remove()方法 作用是从DOM中删除所有匹配的元素传入的参数用于根据jQuery表达式来筛选元素 $(ul li:eq(1)).remove() // 获取ul节点中的第2个li元素节点后将它从网页中删除 $(ul li).remove(li[title!菠萝])// 将li元素中属性title不等于“菠萝”的li元素删除 4.2 detach()方法 detach()和remove()一样也是从DOM中去掉所有匹配的元素。但这个方法不会把匹配的元素从jQuery对象中删除因而可以在将来再使用这些匹配的元素。与remove()不用的是所有绑定的事件、附加的数据等都会保留下来。$ 4.3 empty()方法 empty()方法并不是删除节点而是清空节点它能清空元素中的所有后代节点。$(ul li:eq(1)).empty() // 获取第2个li元素节点后清空此元素里的内容注意是元素里。当运行代码后第2个li元素的内容被清空了只剩下li标签默认的符号“.”5.复制节点clone()方法$复制节点后被复制的新元素并不具有任何行为。若需要新元素也具有复制功能上例是单击事件可使用如下jQuery代码$6.替换节点 6.1 replaceWith() replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者 DOM元素例如要将网页中p title选择你喜欢你喜欢的蔬果/p替换成strong你讨厌的蔬果/strong$ 6.2 replaceAll()该方法与replaceWith()作用相同只是颠倒了replaceWith()操作可使用如下代码实现上例同样的功能$注意若在替换之前已经给元素绑定事件替换后原先绑定的事件将会与被替换的元素一起消失需要在新元素上重新绑定事件。7.包裹节点wrap()将某个节点用其他标记包裹起来该方法对于需要在文档中插入额外的结构化标记非常有用而且它不会破坏原始文档的语义。$得到的结果是bstrong title选择你喜欢的你最喜欢的水果/strong/bwrapAll()方法会将所有匹配的元素用一个元素来包裹它不同于wrap()方法wrap()方法是将所有的元素进行单独的包裹。wrapInner()方法将每一个匹配的元素的子内容包括文本节点用其他结构化的标记包裹起来。例如可使用它来包裹strong标签的子内容$8.属性操作 jQuery中用attr()方法来获取和设置元素属性removeAttr()方法来删除元素属性。9.样式操作 9.1 获取样式和设置样式 获取class和设置class都可以使用attr()方法来完成。上面的代码中class也是p元素的属性因此获取和设置class都可以使用attr()方法来完成var 9.2 追加样式 addClass()方法专门用来追加样式。 9.3 移除样式 removeClass()方法用来删除class的某个值作用是从匹配的元素中删除全部或者指定的class。如$(p).removeClass(high another) // 把p元素的两个class都删除也可以写成$(p).removeClass() // 移除p元素的所有class 9.4 切换样式 toggle()方法$toggleBtntoggle()方法此时主要是控制行为上的重复切换交替执行代码3和代码4两个函数如果元素原来是显示的则隐藏它如果元素原来是隐藏的则显示它。 toggleClass()方法控制样式上的重复切换。如果类名存在则删除它如果类名不存在则添加它。 9.5 判断是否含有某个样式 hasClass()可以用来判断元素中是否含有某个class如果有则返回true否则返回false。10.设置和获取HTML、文本和值 10.1 html()方法 此方法类似于JavaScript中的innerHTML属性可用来读取或者设置某个元素中的HTML内容。 10.2 text()方法 此方法类似于JavaScript中的innerText属性可用来读取或者设置某个元素中的文本内容。 10.3 val()方法 此方法类似于JavaScript中的value属性可用来设置和获取元素的值。无论元素是文本框、下拉列表还是单选框它都可以返回元素的值。如果元素为多选则返回一个包含所有选择的值的数组。11.遍历节点 11.1 children()方法 该方法用于取得匹配元素的子元素集合。 注意children()方法只考虑子元素而不考虑其他后代元素。 11.2 next()方法 该方法用于取得匹配元素后面紧邻的同辈元素。 11.3 prev()方法 该方法用于取得匹配元素前面紧邻的同辈元素。 11.4 siblings()方法 该方法用于取得匹配元素前后所有的同辈元素。 11.5 closest()方法 该方法用于取得最近的匹配元素。 首先检查当前元素是否匹配若匹配则直接返回元素本身若不匹配则向上查找父元素逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。 11.6 parent()parents()与closest()区别 parent() 获取集合中每个匹配元素的父级元素 parents() 获取集合中每个匹配元素的祖先元素 closest() 从元素本身开始逐级向上级元素匹配并返回最先匹配的祖先元素。它只返回匹配的第一个元素节点 11.7 find()filter()nextAll()和prevAll()等遍历节点的方法都可以使用jQuery表达式来作为它们的参数来筛选元素。12.CSS-DOM操作 CSS-DOM技术简单来说就是读取和设置style对象的各种属性。 12.1 jQuery可以直接利用css()方法获取元素的样式属性也可以直接利用css()方法设置某个元素的单个样式。$ height()获取匹配元素当前计算的高度值(px)$ width()可以取得匹配元素的宽度值(px)或者设置元素的宽度。 12.2 关于元素定位 12.2.1 offset()方法 作用是获取元素在当前视窗的相对偏移其中返回的对象包含两个属性即top和left它只对可见元素有效。 12.2.2 position()方法 作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移与offset()一样返回的对象也包括两个属性即top和left。 12.2.3 scrollTop()方法和scrollLeft()方法 这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。还可以为这两个方法指定一个参数控制元素的滚动条滚动到指定位置。$(textarea).scrollTop(300) // 元素的垂直滚动条滚动到指定的位置
$(textarea).scrollLeft(300) // 元素的横向滚动条滚动到指定的位置var $p $(p)
var scrollTop $p.scrollTop // 获取元素的滚动条距顶端的距离
var scrollLeft $p.scrollLeft // 获取元素的滚动条距左侧的距离var position $(p).position() // 获取p元素的position()
var left position.left // 获取左偏移
var top position.top // 获取上偏移var offset $(p).offset() // 获取p元素的offset()
var left offset.left // 获取左偏移
var top offset.top // 获取上偏移三. 请列举jQuery中常用的选择器有哪几种至少说明3种并每种列举3个。jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。基本选择器基本选择器是jQuery中最常用的选择器也是最简单的选择器它通过元素id、class和标签名等来查找DOM元素。(1) #id 根据给定的id匹配一个元素如$(#test)选取id为test的元素(2) .class 根据给定的类名匹配元素如$(.test)选取所有class为test的元素(3) element 根据给定的元素名匹配元素如$(p)选取所有的p元素(4) * 匹配所有元素如$(*)选取所有的元素(5) selector1, selector2, ... , selectorN 将每一个选择器匹配到的元素合并后一起返回如$(div,span,p.myClass)选取所有div,span和拥有class为myClass的p标签的一组元素层次选择器通过DOM元素之间的层次关系来获取特定元素例如后代元素、子元素、相邻元素和同辈元素等。(1)$(ancestor descendant) 选取ancestor元素里所有的descendant即后代元素如$(div span)选取div里的所有的span元素(2)$(parent child) 选取parent元素下的child即子元素与$(ancestor descendant)有区别$(ancestor descendant)选择的是后代元素如$(div span)选取div元素下的元素名是span的子元素(3) $(prev next) 选取紧接在prev元素后的next元素如$(.one div)选取class为one的下一个div同辈元素(4) $(prev ~ siblings) 选取prev元素之后的所有siblings元素如$(#two~div)选取id为two的元素后面的所有div同辈元素(3)(4)有更简单的替代方案可以用next()方法来代替$(prev next)选择器如$(.one).next(div)等价于$(.one div)可以使用nextAll()方法来代替$(prev~siblings)选择器如$(#prev).nextAll(div)等价于$(#prev~div)$(#prev~div)选择器只能选择prev元素后面的div元素而siblings()方法与前后位置无关只要是同辈节点就都能匹配。// 选取#prev之后的所有同辈div元素
过滤选择器过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素过滤规则与CSS中的伪类选择器语法相同即选择器都以一个冒号开头。按照不同的过滤规则过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。基本过滤选择器(1) :first 选取第1个元素如$(div:first)选取所有div元素中第1个div元素(2) :last 选取最后1个元素如$(div:last)选取所有div元素中的最后一个div元素(3) :not(selector) 去除所有与给定选择器匹配的元素如$(input:not(.myClass))选取class不是myClass的input元素(4) :even 选取索引是偶数的所有元素索引从0开始如$(input:even)选取索引是偶数的input元素(5) :odd 选取索引是奇数的所有元素索引从0开始如$(input:odd)选取索引是奇数的input元素(6) :eq(index) 选取索引等于index的元素(index从0开始)如$(input:eq(1))选取索引等于1的input元素(7) :gt(index) 选取索引大于index的元素(index从0开始)如$(input:gt(1))选取索引大于1的input元素注大于1而不包括1(8) :lt(index) 选取索引小于index的元素(index从0开始) 如$(input:lt(1))选取索引小于1的input元素注小于1而不包括1(9) :header 选取所有的标题元素例如h1,h2,h3等等如$(:header)选取网页中的所有的h1,h2,h3...(10) :animated 选取当前正在执行动画的所有元素如$(div:animated)选取正在执行动画的div元素(11) :focus 选取当前获取焦点的元素如$(:focus)选取当前获取焦点的元素内容过滤选择器内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。(1) :contains(text) 选取含有文本内容为text的元素如$(div:contains(我))选取含有文本“我”的div元素(2) :empty 选取不包含子元素或者文本的空元素如$(div:empty)选取不包含子元素(包括文本元素)的div空元素(3) :has(selector) 选取含有选择器所匹配的元素的元素如$(div:has(p))选取含有p元素的div元素(4) :parent 选取含有子元素或者文本元素的元素如$(div:parent)选取拥有子元素包括文本元素的div元素可见性过滤选择器(1) :hidden 选取所有不可见的元素如$(:hidden)选取所有不可见的元素。包括input typehidden/,div styledisplay:none;和div stylevisibility:hidden;等元素。如果只想选取input元素可以使用$(input:hidden)(2) :visible 选取所有可见的元素如$(div:visible)选取所有可见的div元素属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。(1) [attribute] 选取拥有此属性的元素如$(div[id])选取拥有属性id的元素(2) [attributevalue] 选取属性的值为value的元素如$(div[titletest])选取属性title为test的div元素(3) [attribute!value] 选取属性的值不等于value的元素如$(div[title!test])选取属性title不为test的div元素注意没有属性title的div元素也会被选取(4) [attribute^value] 选取属性的值以value开始的元素如$(div[title^test])选取属性title以test开始的div元素(5) [attribute$value] 选取属性的值以value结束的元素如$(div[title$test])选取属性title以test结束的div元素(6) [attribute*value] 选取属性的值含有value的元素如$(div[title*test])选取属性title含有test的div元素(7) [attribute|value] 选取属性等于给定字符串或以该字符串为前缀该字符串后跟一个连字符“-”的元素如$(div[title|en])选取属性title等于en或以en为前缀该字符串后跟一个连字符-的元素(8) [attribute~value] 选取属性用空格分隔的值中包含一个给定值的元素如$(div[title~uk])选取属性title用空格分隔的值中包含字符uk的元素(9) [attribute1][attribute2][attributeN] 用属性选择器合并成一个复合属性选择器满足多个条件。每选择一次缩小一次范围如$(div[id][title$test])选取拥有属性id并且属性title以test结束的div元素子元素过滤选择器(1) :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素。index从1算起如注意:eq(index)只匹配一个元素而:nth-child将为每一个父元素匹配子元素并且:nth-child(index)是从1开始的而:eq(index)是从0算起的。(2) :first-child 选取每个父元素的第1个子元素如注意:first只返回单个元素而:first-child选择符将为每个父元素匹配第1个子元素例如$(ul li:first-child)选取每个ul中第1个li元素(3) :last-child 选取每个父元素的最后一个子元素同样:last只返回单个元素而:last-child选择符将为每个父元素匹配最后一个子元素(4) :only-child 如果某个元素是它父元素中惟一的子元素那么将会被匹配。如果父元素中含有其他元素则不会被匹配如$(ul li:only-child)在ul中选取是唯一子元素的li元素表单对象属性过滤选择器(1) :enabled 选取所有可用元素如$(#form1 :enabled) 选取id为form1的表单内的所有可用元素(2) :disabled 选取所有不可用元素如$(#form2 :disabled) 选取id为form2的表单内的所有不可用元素(3) :checked 选取所有被选中的元素单选框复选框如$(input:checked) 选取所有被选中的input元素(4) :selected 选取所有被选中的选项元素下拉列表如$(select option:selected) 选取所有被选中的选项元素表单选择器表单选择器能极其方便地获取到表单的某个或某类型的元素。(1) :input 选取所有的input、textarea、select和button元素如$(:input)获取所有的input、textarea、select和button元素(2) :text 选取所有的单行文本框如$(:text)选取所有的单行文本框(3) :password 选取所有的密码框 如$(:password)选取所有的密码框(4) :radio 选取所有的单选框如$(:radio)选取所有的单选框(5) :checkbox 选取所有的多选框如$(:checkbox)选取所有的复选框(6) :submit 选取所有的提交按钮如$(:submit)选取所有的提交按钮(7) :image 选取所有的图像按钮如$(:image)选取所有的图像按钮(8) :reset 选取所有的重置按钮如$(:reset)选取所有的重置按钮(9) :button 选取所有的按钮如$(:button)选取所有的按钮(10) :file 选取所有的上传域如$(:file)选取所有的上传域(11) :hidden 选取所有不可见元素如$(:hidden)选取所有不可见元素已经在不可见性过滤选择器中讲解过四. 请用jQuery手写一段代码实现当按钮被点击时以卷帘效果消失。jQuery slideUp() 方法用于向上滑动元素。$可选的 speed 参数规定效果的时长。它可以取以下值slow、fast 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。下面的例子演示了 slideUp() 方法$五. 请写出一个简单地$.ajax()的请求方式至少5个参数。$$var 六. 请写出至少4种vue中的指令和它的用法。七. 路由之间跳转有哪些方式八. 请举例说明axios的四种常用方法请求方式九. 请详细说明对vue生命周期的理解十. 请简述封装vue组件的过程。十一. window中的onload与jQuery中的ready有什么区别1执行时间不同一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片媒体内容以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间就会导致页面无响应或者用户做了其它操作了。缺点如果加载图片和媒体内容花费了大量时间用户就会感受到定义在window.onload事件上的代码在执行时有明显的延迟影响用户体验。故load()一般不建议使用jQuery中的ready函数只须等待DOM加载完毕无须等待图像或外部资源的加载执行起来更快。2执行次数不同window.onload()只能执行一次如果第二次那么第一次的执行会被覆盖;$(document).ready()可以执行多次第N次都不会被上一次覆盖。window.onload function() { alert(“text1”) }window.onload function() { alert(“text2”) } // 结果只输出text2$(document).ready(function(){alert(“Hello1”)})$(document).ready(function(){alert(“Hello2”)}) // 结果两个都会执行输出Hello1和Hello23简化写法不同window.onload()无简写$(document).ready(function(){})可简写为$(function(){})十二. window.onload 和 document.onDOMContentLoaded区别触发的时机不同window.onload是在DOM树构建完成、外部的js、css 、图片、flash等资源都加载完成后再触发document.onDOMContentLoaded是在DOM树构建完成后触发。此机制更合理因为我们可以容忍图片、flash等延迟加载却不可以容忍看见内容后页面不可交互——影响用户体验。附关于js为什么放到/body的最后部分因为浏览器的加载和渲染过程中script放在前面而后续的DOM结构还没有渲染加载出来所以获取不到故最好放到/body最后部分。例如https://jsbin.com/tacugeleva/edit?html,console,output但如果非要放进head里的话必须写成这样document十三. JavaScript中的事件处理如何运行事件流就是描述了页面中接受事件的顺序在浏览器发展的初期两大浏览器厂商IE和Netscape互掐他们对事件流的解释出现了两中截然相反的定义。也就是我们所熟悉的IE的事件冒泡向上传递Netscape的事件捕获向下传递。事件冒泡即事件最开始由最具体的元素文档中嵌套层次最深的那个节点接收然后逐级向上传播至最不具体的节点文档。事件捕获即事件最早由不太具体的节点接收而最具体的节点最后接收到事件。1.注册事件处理程序的方式有3种1设置HTML标签属性为事件处理程序文档元素的事件处理程序属性其名字由“on”后面跟着事件名组成例如onclick、onmouseover。当然了这种形式只能为DOM元素注册事件处理程序。例如①因为HTML里面不区分大小写所以这里事件处理程序属性名大写、小写、大小混写均可属性值就是相应事件处理程序的JavaScript代码②若给同一元素写多个onclick事件处理属性浏览器只执行第一个onclick里面的代码后面的会被忽略③这种形式是在事件冒泡过程中注册事件处理程序的2DOM0级事件处理程序设置JavaScript对象属性为事件处理程序可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成例如onclick、onmouseover。①因为JavaScript是严格区分大小写的所以这种形式下属性名只能按规定小写②若给同一元素对象写多个onclick事件处理属性后面写的会覆盖前面的ps这就是在修改一个对象属性的值属性的值是唯一确定的③这种形式也是在事件冒泡过程中注册事件处理程序的!DOCTYPE HTML
3DOM2级事件处理程序addEventListener()前两种方式出现在Web初期众多浏览器都有实现。而addEventListener()方法是标准事件模型中定义的。任何能成为事件目标的对象——这些对象包括Window对象、Document对象和所有文档元素等——都定义了一个名叫addEventListener()的方法使用这个方法可以为事件目标注册事件处理程序。addEventListener()接受三个参数第一个参数是要注册处理程序的事件类型其值是字符串但并不包括前缀“on”第二个参数是指当指定类型的事件发生时应该调用的函数第三个参数是布尔值其可以忽略某些旧的浏览器上不能忽略这个参数默认值为false这种情况是在事件冒泡过程中注册事件处理程序当其为true时就是在事件捕获过程中注册事件处理程序。①通过addEventListener()方法给同一对象注册多个同类型的事件并不会发生忽略或覆盖而是会按顺序依次执行②相对addEventListener()的是removeEventListener()方法它表示从对象中删除某个事件处理函数。它同样有三个参数前两个参数自然跟addEventListener()的意义一样而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可同样可以省略默认值为false。DOM2级事件规定事件包括三个阶段事件捕获阶段-处于目标阶段-事件冒泡阶段 。!DOCTYPE HTML
4attachEvent()但是IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获只支持事件冒泡所以attachEvent()并不能注册捕获过程中的事件处理函数。因此attachEvent()和detachEvent()要求只有两个参数事件类型和事件处理函数。而且它们的第一个参数使用了带“on”前缀的事件处理程序属性名。var 2. 事件处理程序调用时的一些问题 (1)事件处理程序的参数通常事件对象作为参数传递给事件处理函数但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以我们在写相关代码时应该注意兼容性问题。!DOCTYPE HTML
2事件处理程序的运行环境事件处理程序的运行环境也就是在事件处理程序中调用上下文this值的指向问题3.多个事件处理程序调用规则如下:(1)通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用;(即方法1和方法2)(2)使用addEventListener()注册的处理程序按照它们的注册顺序依次调用;(即方法3)(3)使用attachEvent()注册的处理程序可能按照任何顺序调用所以代码不应该依赖于调用顺序;(即方法4)十四. vue-webpack中并没有scss我们要在vue中使用sass需要怎么配置1、安装sass的依赖包cnpm install --save-dev sass-loader // sass-loader依赖于node-sasscnpm install --save-dev node-sass2、在build文件夹下的webpack.base.conf.js找到module.exports里的modulerules里面添加如下配置{ 3、在APP.vue中修改style标签stylelangscss十五. 请说出至少3种减少页面加载时间的方法①减少HTTP请求合并图片合并文件②优化图片减小其尺寸③选择合适的图像格式gif可用于颜色要求不高的地方④压缩JSCSS代码把CSS放在顶部把JS放在底部最好把CSS和JS放到外部文件⑤服务器启用gzip功能将要传输的文件压缩后传输到客户端再解压在网络传输数据量会大幅减小。在服务器上的Apache、Nginx可直接启用也可用代码直接设置传输文件头增加gzip的设置也可从负载均衡设备直接设置。不过需要留意的是这个设置会略微增加服务器的负担。服务器性能不是很好的网站要慎重考虑。⑥标明宽度及高度标明高度和宽度如果浏览器没有找到这两个参数它需要一边下载图片一边计算大小如果图片很多浏览器需要不断地调整页面。这不但影响速度也影响浏览体验。 当浏览器知道了高度和宽度参数后即使图片暂时无法显示页面上也会腾出图片的空位然后继续加载后面的内容。从而加载时间快了浏览体验也更好了 ⑦网址后面加斜杠“/”(加了斜杠会减少一次判断过程直接返回网站设置的存放在网站根目录下的默认页面)如http://www.campr.com/目录会判断这个目录是什么文件类型或者是目录。⑧避免空的src和href⑨避免跳转⑩尽量采用GET方法调用⑪使用CDN(Content Delivery Network)网络加速简单讲就是将你的图片、视频扩散到CDN网络所能到达之处让用户访问时能就近下载到这些文件从而达到网络提速的目的这样做同时能减轻你自己网站的负载。本文引用参考webpackvue 构建项目步骤并且使用sass 安装配置blog.csdn.netwindow的onload事件与jQuery中的ready事件有什么不同blog.csdn.netjquery 的ready() 与window.onload()的区别www.cnblogs.com请说明JavaScript中处理事件的步骤_百度知道zhidao.baidu.comJavaScript事件处理的方式(三种)blog.csdn.net请说出三种减少页面加载时间的方法__牛客网www.nowcoder.comHTML减少页面加载时间的方法 - CuriousZero - 博客园www.cnblogs.com请说出三种减少页面加载时间的方法www.jianshu.com
