前端入门篇(四十)JS基础7浏览器原理和BOM(1),十大前端开发框架

23 阅读5分钟

总结一下

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。

万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。

为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

开源分享:docs.qq.com/doc/DSmRnRG…

6.html文件解析完成后,渲染页面,下载页面需要的图片视频等

7.载入阶段完成

代码验证:

html文件:

浏览器原理和BOM操作
aaa
bbb

js文件:

//第一阶段为同步阶段的演示

var n = document.getElementById('div1')

console.log(n)

n = document.getElementById('div2')

console.log(n)

结果:都是null

原因:

document.getElementById()是获取DOM树节点的方法,当DOM树解析到script时,进入同步任务,需要完成js解析才会继续生成DOM树,才能解析到body部分,而js文件就提出要获取body中的标签,构成资源被锁住的局面(资本家筷子问题),因此输出的结果是null

解决方法:

1.如果将script放在body最下方,在解析到div后才进入同步任务,就能获取到结果:

js文件不变,html文件改动:

浏览器原理和BOM操作
aaa
bbb

控制台输出:

aaa
bbb

如果把script放在div1后面,div2前面,则只有显示出div1

2.延迟加载:虽然script放在head里,但效果和放在body最下方一致

3.异步加载

BOM操作:浏览器弹窗


浏览器弹窗相当于是同步任务,当弹窗没有得到回应时,页面是不会加载后面的内容的

html文件:

aaa

1.方式一:alert弹窗

js文件:

//方式一

alert('alert 弹窗')

会弹出一个弹窗,只能点击确定,点击之后,显示aaa(script写在head里,按从上到下的顺序,应先弹窗再执行到body里的内容)

alert没有返回值

在这里插入图片描述

2.方式二:

//方式二

var bfs = confirm('confirm 弹窗');

console.log('confirm结果:' + bfs);

页面会弹出一个弹窗,可以点击确定或取消,当点击确定时,返回true;当点击取消时,返回false

在这里插入图片描述

3.方式三

//方式三

var rs = prompt('prompt 弹窗','ccy');

console.log(rs);

页面会弹出一个弹窗,可以输入文字,此处设置了默认值’ccy’,则弹窗的输入框会自动有’ccy’;

点击确定,就会返回对应值;

如果没有填数据,返回就是空;

点击取消,返回null

在这里插入图片描述

BOM操作:获取导航栏信息


使用window.location对象进行操作,可以详细看url各个属性

其中pathname:/,指的是网址中域名端口之后剩余的部分

1.使用window.location.href或者

window.location.toString()都可以获得网址信息,window是全局对象,可省略不写

2.使用location.reload()可以刷新页面;

3.使用location.replace(‘新网址’)可以加载另一个页面;

案例:

var bfs = confirm('confirm 弹窗');

if (bfs){

location.replace('www.baidu.com/');

}else{

location.reload();

}

BOM版本、前进后退、屏幕大小


1.前进与后退:

history.back();//后退一步

history.forward();//前进一步

history.go(-1);//后退一步

history.go(-2);//后退两步

history.go(1);//前进一步

history.go(2);前进两步

//history.go();支持正负整数,代表前进或后退几步;

2.获取浏览器信息、版本:

在console中输入navigator,里面的userAgent属性可以得知操作系统、内核、浏览器版本

使用navigator.userAgent获得该字符串

3.屏幕大小、浏览器大小:

在console输入screen,里面的height和width是指屏幕的大小;availheight和availwidth指的是浏览器大小;

两者区别在于,浏览器大小不包含任务栏,所以可能比屏幕大小要小;

浏览器可占大小不随浏览器的缩放而改变(available);

在这里插入图片描述

BOM计时器:循环执行vs一次执行


var num = 0;

function add (){

console.log('num = ' + ++num);

}

var sil = setInterval(add, 1000);

function end(){

console.log('clearTimeout!');

clearTimeout(sil);

}

setTimeout(end, 10000);

1.var sil = setInterval(add, 1000);循环执行,每隔1000毫秒执行一次add()函数;
2.setTimeout(end, 10000);一次执行,间隔10s后执行一次end()函数
在这里插入图片描述

结尾

学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

html5