web前端开发href和src 如何对前端性能进行优化

今天我爱编程网小编整理了web前端开发href和src 如何对前端性能进行优化相关信息，希望在这方面能够更好的大家。

你遇到的前端面试题都有什么？

大家好，我是王我。

随着春节的结束，各个行业也普遍开始了上班的节奏， 不过本人17号才上班。为什么？因为长得帅的都上班比较晚。 当然，每到新年结束，又迎来了一批招聘者与面试者，我来说说作为一年工作经验应该知道的面试题。

HTML篇

1.doctype是什么？有哪些类型？

2.input有哪些新类型？简要说明其8用法。

3.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

4.bootstrap响应式的原理是什么？

5.多移动终端页面适配是如何实现的？

CSS篇

1.如何实现两列布局，左边自适应，右边固定宽度？

2.用CSS画一个三角形

3.CSS实现字体大写

4.display有哪些常用的属性值？分别是什么意思？

5.position为absolute，relative，fixed的定点位置

6.用三种方法清除浮动

7.请介绍一下margin塌陷问题

js篇

1.什么是事件冒泡和捕获？如何阻止事件冒泡？(分别用原生和jquery实现)

2.js创建对象，至少使用三种方法

3.简述一下事件穿透以及解决办法

4.用三种方式判断变量类型是否是数组

5.如何实现对象的拷贝？

6.什么是闭包？闭包的优缺点。

7.简述一下ajax请求的过程。

8.简述一下new一个人构造函数的人过程。

9.为什么会有跨域？是怎么解决跨域问题的？简述一下原理。

10.js原始数据类型有哪些？

11.学一个函数，判断一个变量是否是字符串

12.typeof有哪些结果？

13.剪头函数和普通函数有什么区别？

14.请用三种方法实现数组去重

15.href和src有什么区别？

jquery篇

1.attr()和prop()有什么区别？

2.on和bind有什么区别？js动态添加的dom元素是通过on还是bind？

3.touch和click有什么区别？

4.window.onload和jquery的ready有什么区别？

vue篇

1.简述一下vue的生命周期及其特点

2.vue双向绑定的原理是什么？

3.vue的特点有哪些？和jquery有什么区别？

4.父子组件之间传递数据的方法

5.子组件如何共享数据？

6.一般有什么工具进行数据交互？

7.webpack的原理是什么？

8.简述一下$nextTick的用法

浏览器篇

1.cookie、sessionStorage、localStorage的区别是什么？

2.有用过浏览器缓存吗？简述一下基本的缓存机制

网络篇

1.http和https之间的区别

2.从服务器的安全考虑，是使用get请求还是post请求？

3.URL请求的过程有哪些？

项目经验篇

1.项目中遇到的最大挑战以及解决办法

2.常见的网页优化有哪些？

作为一个面试一年以内工作经验的前端程序员来说，以上的问题能够倒答如流月薪6k应该不成问题啦。这些面试题也是我在很多面试中感觉经常被问到的题目。 我爱编程网

希望大家年后找工作能够顺顺利利， 千万不要跟我一样哦，只有帅气就一无所有了。

大家好，我是王我，中国最帅的前端程序员。

前几次都是各种培训公司，各种忽悠就不提了，说说后面4次面试的经历。

第一次是面一个小公司，不过他们好像没有厉害的前端，来面我的是个后端，一来没有问我关于js的知识，直接问我以前做过什么，有没有经验，我本人不会吹牛，简历也没怎么包装，就是自己把自学的知识和做的几个小demo弄在上面，也用github挂在页面上了，不过他根本不点开看，也不问，问我会不会vue，我当时对框架还不了解，他就说他们需要能直接上手开始写的，所以我第一个就直接挂了。

第二次面试是一个国企，这个问了很多问题，都很基础，js数据类型，数组操作，事件，大概就是高程的前面几章看看就差不多都能答到，然后因为他们主要用jq，所以问了很多jq的操作，关于节点的，动画的，我看锋利的jq大概看了3遍，也练过多次，所以我答的很熟。然后问了些布局方面的，bootstrap我了解过，又看过css3，所以这方面也没啥问题，最后在现场做了个题目，主要就是布局然后通过ajax呈现数据。后面听介绍我面试的说面试官比较满意，说我jq很熟，一面就过了。可惜后面电话面试不知怎么回事可能表现的不够自信，虽然没问技术，但是我没啥自信，把没项目经验什么的也不知怎么就一五一十交代了，估计因为这个挂掉了。

第三次没问问题，直接就是一套题开做，我在那做了一个多小时。题目就是按照要求一步一步做一个页面出来，我也搞忘了我当时卡在哪个地方了，坐在那得时候就是做不出来，没有设计图，要根据他的描述自己找个设计图然后做，我第一次遇到这个有点懵，虽然当时没做出来，不过回来我自己花了几个小时把它做了。所以这个也是凉了。

第四个问的比较多，数据类型，数组操作，跨域，ajax，闭包，原型链，继承，深拷贝，浅拷贝，模块amd cmd，基本都是问的js。然后问了html5的新特性 css3 的新特性，遇到过什么浏览器的兼容性问题，怎么解决的，以后想往什么方面发展。这个时候我已经会点vue了，照着做了个小demo，不过后来知道公司用的angularjs，面试官也没看我做的，问也没问。。以前听网上说要带上自己的项目去面试感觉没起多大效果。

最后总结下如果面的比较初级的岗位，应该主要问js，原型链，继承，闭包，深浅拷贝，ajax，跨域，然后js的基础知识，对了还有apply和call也问了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一点的，暂时还没面过，等以后面过在来回答

1. cookie session 的用途和区别，以及有效期

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能

考虑到减轻服务器性能方面，应当使用COOKIE。

4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

2. vue的数据绑定原理，mvvm与mvc的区别

MVVM：

m:model数据模型层 v:view视图层 vm:ViewModel
vue中采用的是mvvm模式，这是从mvc衍生过来的
MVVM让视图与viewmodel直接的关系特别的紧密，就是为了解决mvc反馈不及时的问题

图片说明一下：

说到MVVM就要说一下双向绑定和数据劫持的原理，

MVC：

m:model数据模型层 v:view视图层 c:controller控制器

原理： c层需要控制model层的数据在view层进行显示

MVC两种方式，图片说明：

总结：

mvvm与mvc最大的区别：
MVVM实现了view与model的自动同步，也就是model属性改变的时候， 我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。

不懂得可以复制链接查看：

3. storage 的区别 sessionStorage localStorage

localStorage 的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的

4.v-model双向数据原理

有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性
传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性
但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值
所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可

【数据为尊 ----数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 ----映射关系统称】

5.keepAlive用过吗？什么作用？

缓存路由组件

使用的是vue的一个组件，参考vue的官方文档

使用这个东西可以保证我们在切换组件的时候，原来显示的组件不被销毁

-----【保障组件的数据不会被切换路由而销毁数据】

Home是对应的组件对象的名字，不是路由的名字

6.多维数组拍平

数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组

一红六种方法吧……

了解的请看：

7.跨域的原因 解决方案

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

这样就可以说同源策略----协议---端口---域名

原生的src和href可以解决跨域

代理可以解决

请求头也可以携带浏览器提示的也可以解决

一般都是后端解决跨域问题

【别的需要了解看下方链接】

8.uniApp兼容问题

§ 如果你使用cli创建项目（即项目根目录是package.json），不管用什么ide，即便是用HBuilderX，切记cli项目的编译器是在项目下的，HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npm update来升级编译器。以及如果你想要安装less、scss等预编译器，也需要自己npm安装在项目下，而不是在HBuilderX的插件管理里安装。

§ 如果你使用离线打包，请注意HBuilderX升级后，真机运行基座和云打包对应引擎跟随HBuilderX升级，而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。

§ 如果你使用自定义基座，之前制作的自定义基座是不会跟随HBuilderX升级的，升级HBuilderX后你应该重新制作新版自定义基座。

§ 如果你使用wgt升级，新版HBuilderX编译的wgt，运行到之前的runtime上，一定要先测试好，看有没有兼容性问题。如果有问题，就不要wgt升级，整包升级。

§ 考虑到向下兼容，uni-app编译器在升级为新的自定义组件模式后，同时保留了对老编译模式的向下兼容。
在HBuilderX alpha版中，App端一定会使用新编译器，不理会manifest配置。
在HBuilderX 正式版中，新创建的项目会使用新编译器，老项目不会强制使用，而是开发者自己在manifest里配置开启。

§ 如果你使用其他ide开发uni-app，会经常因为拼错单词而运行失败，因为经过webpack编译一道，很多错误反应的不够直观，排错时间很长，不如从开始就依赖有良好提示的HBuilderX，避免敲错单词。

§ 云打包的引擎版本说明
HBuilderX Alpha，只有1套云打包机，不管你的HBuilderX alpha版本多少，对应的打包机一定是最新的alpha版的客户端引擎。
HBuilderX正式版，有2套打包机，一个是最新正式版，一个是次新正式版。
中间的紧急更新版本没有独立打包机。
举个例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。
那么当前可用的打包机有1.9.1和1.8.2这2台。（即每个大版本的最后一个版本）
除了这2个HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版对应的打包机。（即只保留2个大版本的云打包机）

【详情请看】

一、HTML

HTML书写规范

H5新增标签

HTML渲染过程

二、CSS

css盒子模型概念

css弹性布局概念

三、JavaScript

事件模型

DOM2级事件模型

闭包

原型链

四、移动Web开发

常见的布局方案

移动端前端常见的触摸相关事件touch、tap、swipe等整理

移动端前端手势事件

移动端页面渲染优化

GPU渲染

GPU核心渲染过程

五、调试

常用的调试工具

Chrome控制台调试js使用

移动端测试

六、HTTP网络知识

常见的HTTP状态码

不同请求类型的区别

WEB缓存方案

——————————

牛客网（www.nowcoder.com）

- 专业IT笔试面试备考平台

- 最全C++JAVA前端等互联网技术求职题库

- 全面提升IT编程能力

- 程序员交友圣地

分享了一些Web前端的面试题，限时一小时，你看看自己能够答出多少道！

放心，这些面试题都是一些非常基础的知识，只要你在平时认真听课、学习了，那么这些面试题肯定不会难道你。

建议：虽然没有人监督你，但还是希望你不要去寻找答案，脱离百度，拿起纸笔，你试一下自己究竟能够答出个什么水平！有没有真本领？答案尽在这些面试题里！那么，你准备好了吗？OK！计时开始！

一、HTML常见题目

01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

02、HTML5为什么只需要写？

03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

04、页面导入样式时，使用link和@import有什么区别？

05、介绍一下你对浏览器内核的理解？

06、常见的浏览器内核有哪些？

07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

08、如何区分HTML和HTML5？

09、简述一下你对HTML语义化的理解？

10、HTML5的离线储存怎么使用，工作原理能不能解释一下？

二、CSS类的题目

01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

02、CSS选择符有哪些？哪些属性可以继承？

03、CSS优先级算法如何计算？

04、CSS3新增伪类有那些？

05、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？

06、display有哪些值？说明他们的作用。

07、position的值relative和absolute定位原点是？

08、CSS3有哪些新特性？

09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？

10、用纯CSS创建一个三角形的原理是什么？

三、Java类的题目

01、介绍Java的基本数据类型。

02、说说写Java的基本规范？

03、Java原型，原型链？有什么特点？

04、Java有几种类型的值？(堆：原始数据类型和栈：引用数据类型)，你能画一下他们的内存图吗？

05、Java如何实现继承？

06、Java创建对象的几种方式？

07、Java作用链域？

08、谈谈This对象的理解。

09、eval是做什么的？

10、什么是window对象？什么是document对象？

OK，一小时到了，这个时间可不算短了，那么这些面试题你答出了几道呢？你写的答案正确了吗？现在你可以去翻看答案了。

如果你答出了绝大多数的或者是全部的题，并且答案也正确了，那么恭喜你……

你这时心里是不是有点小窃喜，认为自己有能力拿高薪了？虽然我也很想这么告诉你，但事实上这只能表明你的基础扎实，毕竟这只是一些非常基础的面试题。骚年~继续努力吧！

如果你只答出了小部分或者答出了大部分题但答案不正确，那么我只想说：“骚年，你的水平还差的远呢。”连这么基础的题你都打不出来，还想拿高薪？回去再练一段时间吧！

扎实的基础是你拿高薪的重要武器，如果你连基础都不扎实，那么想要攻克“高薪”这个厚实的堡垒，那只是痴人说梦罢了。

1.前端框架类问题，问你会不会用vue react啊

2.语言类，问你一些JavaScript语言的问题

3.项目经验，让你讲讲做过的项目，遇到的问题和解决之道

如何对前端性能进行优化

前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发，最常遇见的前端优化问题。前端性能进行优化规则，基本可以涵盖现在前端大部分的性能优化原则了，很多更加geek和精细优化方法都是从这些原则里面延伸出来的。

前端性能进行优化都有哪些规则

1. 减少HTTP请求次数

   尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话，把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。
   

2. 使用CDN

网站上静态资源即css、js全都使用cdn分发，包括图片

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

4. 为文件头指定Expires

Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。 他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：

新浪微博的这个css文件的Expires时间是2016-5-04 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本该有斜杠（/）却被忽略掉时。例如，当我们要访问  baidu.com 时，实际上返回的是一个包含301代码的跳转，它指向的是  baidu.com/ （注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

另一种是不用域名之间的跳转， 比如访问  baidu.com/bbs 跳转到  bbs.baidu.com/ 。那么可以通过使用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就是显式的要求如果当前请求有缓存的话，直接使用缓存

$.ajax({      url : 'url',      dataType : "json",      cache: true,      success : function(son, status){                  }

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担。

18. 避免404

比如外链的css、js文件出现问题返回404时，会破坏浏览器的并行加载。

19. 减少Cookie的大小

Cookie里面别塞那么多东西，因为每个请求都得带着他跑。

20. 使用无cookie的域

比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

22. 不要在HTML中缩放图片

比如你需要的图片尺寸是50* 50

那就不用用一张500*500的大尺寸图片，影响加载

23. 缩小favicon.ico并缓存

Web前端中关于url、href、src的知识汇总

今天小编要跟大家分享的文章是Web前端中关于url、href、src的知识汇总。熟悉web前端的小伙伴们一定不会对这三个内容陌生。但是对于刚刚接触web的小伙伴肯定不是很了解，今天小编就为大家准备了这篇文章让我们一起来看一看关于url、href、src的知识汇总。





一、URL的概念


统一资源定位符(或称统一资源定位器/定位地址、URL地址等，英语：UniformResource
Locator，常缩写为URL)，有时也被俗称为网页地址(网址)。如同在网络上的门牌，是因特网上标准的资源的地址(Address)。


二、URL的格式


2.1标准格式


协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询


2.2完整格式


协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询


其中【访问凭证信息@;:端口号;?查询;#片段ID】都属于选填项。


三、URL的语法规则


比如网址#/html/index.asp，必须遵守以下的语法规则：


scheme://host.domain:port/path/filename


3.1说明


(1)scheme-定义因特网服务的类型。最常见的类型是http(2)host-定义域主机(http的默认主机是www)
(3)domain-定义因特网域名，比如w3school.com.cn(4):port-定义主机上的端口号(http的默认端口号是80)
(5)path-定义服务器上的路径(如果省略，则文档必须位于网站的根目录中)。(6)filename-定义文档/资源的名称


3.2URLSchemes


以下是其中一些最流行的scheme：


Scheme访问用于...


http超文本传输协议以开头的普通网页。不加密。


https安全超文本传输协议安全网页。加密所有信息交换。


ftp文件传输协议用于将文件下载或上传至网站。


file您计算机上的文件。


四、URL的类型


4.1绝对URL


绝对URL(absoluteURL)显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。


4.2相对URL


相对URL(relativeURL)以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。


一般来说，对于同一服务器上的文件，应该总是使用相对URL，它们更容易输入，而且在将页面从本地系统转移到服务器上时更方便，只要每个文件的相对位置保持不变，链接就仍然是有效地。


以下为建立路径所使用的几个特殊符号，及其所代表的意义。


(1).：代表目前所在的目录，相对路径。如： 文本 或 />


(2)..：代表上一层目录，相对路径。如： 文本 或 />


(3)../../：代表的是上一层目录的上一层目录，相对路径。如：


(4)/：代表根目录，绝对路径。如：[文本](/abc)或


五、href的概念


5.1规范解释


href(Hypertext
Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。


5.2通俗理解


href目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。


六、src的概念


source(缩写)，指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。


七、href和src的区别


7.1请求资源类型不同


(1)href指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的联系。


(2)在请求src资源时会将其指向的资源下载并应用到文档中，比如JavaScript脚本，img图片;


7.2作用结果不同


(1)href用于在当前文档和引用资源之间确立联系;


(2)src用于替换当前内容;


7.3浏览器解析方式不同


(1)若在文档中添加，浏览器会识别该文档为CSS文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式加载
CSS，而不是使用@import方式。


(2)当浏览器解析到
，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把js
脚本放在底部而不是头部的原因。


八、link和@import的区别


两者都是外部引用CSS的方式，但是存在一定的区别：


(1)link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务;而@import属于CSS范畴，只可以加载CSS。


(2)link引用CSS时，在页面载入时同时加载;@import需要页面完全载入以后再加载。


(3)link是XHTML标签，无兼容问题;@import则是在CSS2.1提出的，低版本的浏览器不支持。


(4)link支持使用Javascript控制DOM改变样式;而@import不支持。


以上就是小编今天为大家分享的关于Web前端中关于url、href、src的知识汇总的文章，希望本篇文章能够对正在从事web学习和工作的小伙伴们有所帮助，想要了解更多web相关知识记得关注北大青鸟web培训官网哦~


作者：WEBING


#/a/1190000013845173


*声明：内容与图片均来源于网络(部分内容有修改)，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。

以上就是我爱编程网小编给大家带来的web前端开发href和src 如何对前端性能进行优化全部内容，希望对大家有所帮助！