关于前端的碎碎念5-web前端常见面试问题总结(1)

举报
花溪 发表于 2020/08/16 19:08:31 2020/08/16
【摘要】 本文主要介绍web前端常见面试问题总结。

1.web前端项目的结构是怎样的?文件有哪些命名规范?

项目结构规范

页面文件:以项目名命名,例如:shop

js文件:命名为js

css文件:命名为css

图片文件:命名为images

数据文件:命名为data

文件存储规范:按项目模块分类存储,例如:用户信息管理

页面文件存放: shop/userinfo/userlist.html

js文件:js/userinfo/userlist.js

css样式:css/userinfo/userlist.css

注意:图片的分类一般按照功能作用划分,比如: 小图标、动画图片

动画图片:images/gif/…

图标库:images/flags/…

项目文件命名规范

页面/js/css文件规范:项目名称-模块名称-页面名称,例如:shop-user-index.html用户模块的首页。

注意:js一般会包含 公共js 习惯命名commo.js;css样式会包含公共css,习惯命名为 common.css。

2.谈谈浏览器的兼容性 

这个问题是非常抽象的,越是抽象的问题越能表现出我们的表达能力,而面试官就喜欢根据你的回答来追问,不断地打断你的思路,这个时候不要慌,一定要坚信自己。
回答思路

我们在开发的时候会明确项目要兼容哪些浏览器的最低版本,我之前的项目要求兼容IE8.0以上的版本,Chrome 48以上,FireFox 44以上。有了这些最基本的要求,在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了

html部分
1.H5新标签在IE9以下的浏览器识别 

<!--[if lt IE 9]>

 <script type="text/javascript" src="js/html5shiv.js"></script>

<![endif]-->

2.ul标签内外边距问题ul标签在IE6\IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。解决方法:统一设置ul的内外边距为0

CSS样式的兼容性     

1.css的hack问题:主要针对IE的不同版本,不同的浏览器的写法不同      
 IE的条件注释hack:      
 <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->         
 <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

2.IE6双边距问题:IE6在浮动后,又有横向的margin,此时,该元素的外边距是其值的2倍      
 解决办法:display:block;

3.IE6下图片的下方有空隙      
 解决方法:给img设置display:block;

4.IE6下两个float之间会有个3px的bug      
 解决办法:给右边的元素也设置float:left;

5.IE6下没有min-width的概念,其默认的width就是min-width

6.IE6下在使用margin:0 auto;无法使其居中      
 解决办法:为其父容器设置text-align:center;
7.被点击过后的超链接不再具有hover和active属性      
 解决办法:按lvha的顺序书写css样式,
 ":link": a标签还未被访问的状态;
 ":visited": a标签已被访问过的状态;
 ":hover": 鼠标悬停在a标签上的状态;
 ":active": a标签被鼠标按着时的状态;
8.在使用绝对定位或者相对定位后,IE中设置z-index失效,原因是因为其元素依赖于父元素的z-index,但是父元素默认为0, 子高父低,所以不会改变显示的顺序

9.IE6下无法设置1px的行高,原因是由其默认行高引起的      
 解决办法:为期设置overflow:hidden;或者line-height:1px;

JavaScript的兼容性

1.标准的事件绑定方法函数为addEventListener,但IE下是attachEvent;
2.事件的捕获方式不一致,标准浏览器是由外至内,而IE是由内到外,但是最后的结果是将IE的标准定为标准
3.window.event获取的。并且获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement
4.在低版本的IE中获取的日期处理函数的值不是与1900的差值,但是在高版本的IE中和标准浏览器保持了一致,获取的值也是与1900的差值。         
比如:var year= new Date().getYear();
5.ajax的实现方式不同,这个我所理解的是获取XMLHttpRequest的不同,IE下是activeXObject
6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同
其他浏览器:parentNode  parentNode.childNodes      
IE:parentElement parentElement.children

3.页面优化有哪些方法

页面优化的方法非常多,最好能够对这些优化方案进行分类,这些方案最好能够结合实际开发遇到的问题来表述。

优化的方案

    减少操作量

  • 尽量减少 HTTP 请求
    1) 合并文件,比如把多个 CSS 文件合成一个; 
    2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位; 

  •  不要在 HTML 中使用缩放图片
    缩放图片并没有减少图片的容量,只是控制了图片的大小。

  • Image压缩
    使用工具对图片进行压缩,保证质量的同时减少了图片的大小。

  • 减少对DOM的操作
    减少对DOM的操作,减少页面的重绘。

    提前做加载操作

  • 对域名进行预解析
    例如京东的做法
    <link rel="dns-prefetch" href="//misc.360buyimg.com" />  

  • 预载入组件或延迟载入组件

  • 把 CSS 放到代码页上端 
    CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。

  • 使用 new Image对象,对图片进行缓存

    提升并行加载

    切分组件到多个域 ,提升服务器的响应能力

    JavaScript和CSS优化

  • 从页面中剥离 JavaScript 与 CSS
    剥离后,能够有针对性的对其进行单独的处理策略,比如压缩或者缓存策略。

  • 精简 JavaScript 与 CSS 
    使用工具压缩JavaScript和CSS文件

  • 脚本放到 HTML 代码页底部
    减少对页面的阻塞。

    异步加载

      使用Ajax实现异步加载,例如,滚动页面加载后面的内容,这种也比较常见。

4.页面渲染原理是什么?

这是一道纯理论的题目,只要能够将浏览器的渲染过程很专业的表述出来,一定会得到面试官的青睐,作为一枚前端人员确实有必要了解一下浏览器的渲染过程是怎样的,对于页面性能的提升是有帮助的。

解题思路

渲染引擎是干什么的
渲染引擎可以显示html、xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件可以显示PDF格式。

渲染引擎

不同的浏览器有不同的渲染引擎,对于渲染引擎的使用总结如下:
Trident(MSHTML)内核:IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上
Webkit内核:Safari,Chrome等

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
步骤详细解释
第一步:渲染引擎开始解析html,根据标签构建DOM节点
第二步:根据css样式构建渲染树,包括元素的大小、颜色,隐藏的元素不会被构建到该树中。
第三步:根据css样式构建布局树,主要是确定元素要显示的位置。
第四步:根据前面的信息,绘制渲染树。

5.什么是响应式开发?

响应式开发是前端开发工作比较常见的工作内容,随着移动互联网的发展,移动端设计越来越重要,很多项目都是移动端项目先开发,而后是PC端的开发,为了降低运营成本和开发成本,同一个网站要能兼容PC端和移动端显示呼之欲出,进而响应式开发成了前端开发人员必备的技能,所以响应式开发的技术必须掌握。

什么是响应式

顾名思义,同一个网站兼容不同的大小的设备。如PC端、移动端(平板、横屏、竖排)的显示风格。

需要用到的技术

1. Media Query(媒体查询)

用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸,是否可触摸,屏幕精度,横屏竖屏等信息。

2. 使用em或rem做尺寸单位

用于文字大小的响应和弹性布局。

3. 禁止页面缩放

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

4. 屏幕尺寸响应

a)  固定布局:页面居中,两边留白,他能适应大于某个值一定范围的宽度,但是如果太宽就会有很多留白,太窄会出现滚动条,在PC页面上很常见。

b)  流动布局:屏幕尺寸在一定范围内变化时,不改变模块布局,只改变模块尺寸比例。比固定布局更具响应能力,两边不留白,但是也只能适应有限的宽度变化范围,否则模块会被挤(拉)得不成样子。

c)  自定义布局:上面几种布局方式都无法跨域大尺寸变化,所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

d)  栅格布局:这种布局方式使得模块之间非常容易对齐,易于模块位置的改变用于辅助自定义布局。

响应式设计注意事项 

1.宽度不固定,可以使用百分比

    #head{width:100%;}  

    #content{width:50%;}  

2. 图片处理

   图片的宽度和高度设置等比缩放,可以设置图片的width为百分比,height:auto;

   背景图片可以使用background-size 指定背景图片的大小。

6.html5有哪些新特性、移除了那些元素?

题目涉及到范围非常的大,如果要面面俱到显然半天都答不完,可以先罗列出H5的一些新特性,不要回答那么具体,等面试官提具体的问题,所以在面试之前也要把这里的技术过一遍,至少每个技术也要做个小程序出来体验一下。

H5新特性

增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

 绘画 canvas;

类似windows自带的画图板,可绘制线、框、路径、图……,InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

画图需要的要素

a)   笔,用笔可以画线、圆、矩形、文本等

b)   颜色

c)   画板

由于画布案例比较多,代码比较复杂,可以在w3cschool上查看相关教程

2)  本地离线存储 localStorage

长期存储数据,浏览器关闭后数据不丢失;

1.特点

数据永久存储,没有时间限制;大小限制5M(够用了);只存储字符串。

2.数据存取方式

localStorage.a = 3;//设置a为"3"  
localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值  
localStorage.setItem("b","isaac");//设置b为"isaac"  
var a1 = localStorage["a"];//获取a的值  
var a2 = localStorage.a;//获取a的值  
var b = localStorage.getItem("b");//获取b的值  
var b2= localStorage.key(0);//获取第一个key的内容  
localStorage.removeItem("c");//清除c的值  
localStorage.clear();//清除所有的数据

推荐使用:

getItem()

setItem()

removeItem()

3.事件监听

if(window.addEventListener){  
 window.addEventListener("storage",handle_storage,false);//  
}else if(window.attachEvent){ //兼容IE  
 window.attachEvent("onstorage",handle_storage);  
}  
function handle_storage(e){  
 }

对象e为localStorage对象,Chrome、Firefox支持差,IE支持较好。

3)  sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage

4)  用于媒介回放的 video和 audio 元素;

5)  语意化更好的内容元素,比如article、footer、header、nav、section;

6)  表单控件,calendar、date、time、email、url、search;

7)  新的技术webworker(专用线程)

8)  websocketsocket通信

9)  Geolocation 地理定位

移除的元素

纯表现的元素

  •   <basefont> 默认字体,不设置字体,以此渲染

  •   <font> 字体标签

  •   <center> 水平居中

  •   <u> 下划线

  •   <big> 大字体

  •   <strike> 中横线

  •   <tt> 文本等宽

框架集

  •   <frameset>

  •   <noframes>

  •   <frame>

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200