搜档网
当前位置:搜档网 › html5面试题大全汇总

html5面试题大全汇总

html5面试题大全汇总
html5面试题大全汇总

html5面试题大全汇总

基础强化

1. 聊一聊前端存储。

(1)cookie

(2)短暂的sessionStorage

(3)简易强大的localStorage

(4)websql与indexeddb

详细参见:https://https://www.sodocs.net/doc/5111876165.html,/a/1190000005927232

2. BFC

(1) w3c规范中的BFC定义:

浮动元素和绝对定位元素,非块级盒子的块级容器(例如inline-blocks, table-cells, 和table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。

在BFC中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。

(2) BFC的通俗理解:

首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。)并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

详细参见:

https://www.sodocs.net/doc/5111876165.html,/css/understanding-bfc-and-margin-collapse.html

https://https://www.sodocs.net/doc/5111876165.html,/question/28433480

前端工程化

3. 场景:你是第一天来公司上班的,项目代码托管在GitLab,项目地址:

git@https://www.sodocs.net/doc/5111876165.html,:org/project.git,现在有一处代码需要你修改。请下完成此项任务中,与git/gitlab 相关的操作步骤。

第一步:$> ssh-keygen -t rss -C zhangsan@https://www.sodocs.net/doc/5111876165.html,

第二步:拷贝公钥到gitlab

第三步:

$> git config —global https://www.sodocs.net/doc/5111876165.html, zhangsan

$> git config —global user.email zhangsan@https://www.sodocs.net/doc/5111876165.html,

第四步:$> git clone git@https://www.sodocs.net/doc/5111876165.html,:org/project.git

第五步:$> git checkout -b project-20170227-zhangsan-bugfix

第六步:修改代码

第七步:git status

第八步:git add .

第九不:git commit -am ‘bugfix’

第八步:git push --set-upstream origin project-20170227-zhangsan-bugfix

4. CSS,JS代码压缩,以及代码CDN托管,图片整合。

(1)CSS,JS 代码压缩:

可以应用gulp的gulp-uglify,gulp-minify-css模块完成;可以应用webpack的UglifyJsPlugin压缩插件完成。

(2)CDN:

内容分发网络(CDN)是一个经策略性部署的整体系统,包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。主要特点有:本地Cache加速,镜像服务,远程加速,带宽优化。关键技术有:内容发布,内容路由,内容交换,性能管理。CDN网站加速适合以咨询为主的网站。CDN是对域名加速不是对网站服务器加速。CDN和镜像站比较不需要访客手动选择要访问的镜像站。CDN使用后网站无需任何修改即可使用CDN获得加速效果。如果通过CDN后看到的网页还是旧网页,可以通过URL推送服务解决,新增的网页和图片不需要URL推送。使用动态网页可以不缓存即时性要求很高的网页和图片。CDN可以通过git或SVN来管理。

(3)图片整合

减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS来定位。缺点是可维护性差。可以使用百度的fis/webpack来自动化管理sprite。

5. 如何利用webpack把代码上传服务器以及转码测试?

(1)代码上传:

可以使用sftp-webpack-plugin,但是会把子文件夹给提取出来,不优雅。可以使用gulp+webpack来实现。

(2)转码测试

webpack应用babel来对ES6转码,开启devtool: “source-map" 来进行浏览器测试。应用karma 或mocha来做单元测试。

6. 项目上线流程是怎样的?

(1)流程建议

- 模拟线上的开发环境

本地反向代理线上真实环境开发即可。(apache,nginx,nodejs均可实现)

- 模拟线上的测试环境

模拟线上的测试环境,其实是需要一台有真实数据的测试机,建议没条件搭daily的,就直接用线上数据测好了,只不过程序部分走你们的测试环境而已,有条件搭daily最好。

- 可连调的测试环境

可连调的测试环境,分为2种。一种是开发测试都在一个局域网段,直接绑hosts即可,不在一个网段,就每人分配一台虚拟的测试机,放在大家都可以访问到的公司内网,代码直接往上布即可。

- 自动化的上线系统

自动化的上线系统,可以采用Jenkins。如果没有,可以自行搭建一个简易的上线系统,原理是每次上线时都抽取最新的trunk或master,做一个tag,再打一个时间戳的标记,然后分发到cdn就行了。界面里就2个功能,打tag,回滚到某tag,部署。

- 适合前后端的开发流程

开发流程依据公司所用到的工具,构建,框架。原则就是分散独立开发,互相不干扰,连调时有hosts可绑即可。

(2)简单的可操作流程

- 代码通过git管理,新需求创建新分支,分支开发,主干发布

- 上线走简易上线系统,参见上一节

- 通过gulp+webpack连到发布系统,一键集成,本地只关心原码开发

- 本地环境通过webpack反向代理的server

- 搭建基于linux的本地测试机,自动完成build+push功能

7. 工程化怎么管理的?

gulp和webpack

8. git常用命令

Workspace:工作区

Index / Stage:暂存区

Repository:仓库区(或本地仓库)

Remote:远程仓库

详细参见:https://www.sodocs.net/doc/5111876165.html,/blog/2015/12/git-cheat-sheet.html

9. webpack 和gulp对比

Gulp 就是为了规范前端开发流程,实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock 数据等功能的一个前端自动化构建工具。说的形象点,“Gulp就像是一个产品的流水线,整个产品从无到有,都要受流水线的控制,在流水线上我们可以对产品进行管理。”另外,Gulp是通过task对整个开发过程进行构建。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过loader的转换,任何形式的资源都可以视作模块,比如CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。

Gulp和Webpack功能实现对比:从基本概念、启动本地Server、sass/less预编译、模块化开发、文件合并与压缩、mock数据、版本控制、组件控制八个方面对Gulp和Webpack进行对比。

详细参见:https://www.sodocs.net/doc/5111876165.html,/articles/e632EbA

10. webpack打包文件太大怎么办?

webpack 把我们所有的文件都打包成一个JS 文件,这样即使你是小项目,打包后的文件也会非常大。可以从去除不必要的插件,提取第三方库,代码压缩,代码分割,设置缓存几个方面着手优化。

详细参见:https://www.sodocs.net/doc/5111876165.html,/p/a64735eb0e2b

11. 不想让别人盗用你的图片,访问你的服务器资源该怎么处理?

目前常用的防盗链方法主要有两种:

(1)设置Referer:适合不想写代码的用户,也适合喜欢开发的用户

(2)签名URL:适合喜欢开发的用户

详细参见:https://https://www.sodocs.net/doc/5111876165.html,/articles/57931

12. 精灵图和base64如何选择?

css精灵,用于一些小的图标不是特别多,一个的体积也稍大,比如大于10K(这个没有严格的界定)。

base64,用于小图标体积较小(相对于css精灵),多少都无所谓。字体图标,用于一些别人做好的图标库(也有少数自己去做的)用起来比较方便,他的图标只能用于单色,图标用只能于一种颜色。

13. webpack怎么引入第三方的库?

拿jQuery为例:

entry: {

page: 'path/to/page.js',

jquery: 'node_modules/jquery/dist/jquery.min.js'

}

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true,

chunks: ['jquery', 'page'] // 按照先后顺序插入script标签})

14. 如果线上出现bug git怎么操作?

参见第1题。

15. 用过Nginx吗?都用过哪些?

nginx是一个高性能的HTTP和反向代理服务器。

常使用场景:

(1)反向代理

(2)网站负载均衡

详细参见:https://www.sodocs.net/doc/5111876165.html,/hobinly/p/6023883.html

Web前端开发笔试题集锦(已读)

Web前端开发笔试题集锦 HTML/CSS篇 1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a__a1a__a1a__a1a__"); 2,截取字符串abcdefg的efg var str = "abcdefg"; if (/efg/.test(str)) { var efg = str.substr(str.indexOf("efg"), 3); alert(efg); } 3,判断一个字符串中出现次数最多的字符,统计这个次数 //将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数 var str = "abcdefgaddda"; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } } /*遍历这个hash table,获取value最大的key和value*/ var max = -1; var max_key = ""; var key; for (key in obj) { if (max < obj[key]) { max = obj[key]; max_key = key; } } alert("max:"+max+" max_key:"+max_key); 4,IE与FF脚本兼容性问题 (1) window.event: 表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 (2) 获取事件源

最新web前端面试题(及答案)

1、常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2) 内核:Trident,Gecko,Presto,Webkit。 2、说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)答: (Q1) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。 (Q2) 兼容性:display:inline-block;*display:inline;*zoom:1; 3、清除浮动有哪些方式?比较好的方式是哪一种? 答: (Q1) (1)父级div定义height。 (2)结尾处加空div标签clear:both。 (3)父级div定义伪类:after和zoom。 (4)父级div定义overflow:hidden。 (5)父级div定义overflow:auto。 (6)父级div也浮动,需要定义宽度。 (7)父级div定义display:table。 (8)结尾处加br标签clear:both。 (Q2) 比较好的是第3种方式,好多网站都这么用。 4、box-sizing常用的属性有哪些?分别有什么作用? 答: (Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度 之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内 进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的 宽度和高度。 5、Doctype作用?标准模式与兼容模式各有什么区别? 答: (Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不 存在或格式不正确会导致文档以兼容模式呈现。 (Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防 止站点无法工作。 6、HTML5 为什么只需要写?

前端面试题大全(html篇)

HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言。最主要的不同: (1)XHTML元素必须被正确地嵌套 (2)XHTML元素必须被关闭 (3)XHTML标签名必须用小写字母 (4)XHTML文档必须拥有根元素 2.什么是语义化的HTML html5的语义化是指用正确的标签包含正确的容,比如nav标签就应该包含导航条容 (1)直观的认识标签对于搜索引擎的抓取有好处,用正确的标签做正确的事情! (2)html语义化就是让页面的容结构化,便于对浏览器、搜索引擎解析 (3)在没有CCS样式情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重,利于SEO。 (4)使阅读源代码的人更容易将分块,便于阅读维护理解。 写一段语义的html代码(HTML5中新增加的很多标签如: