前端面试总结

浪花一片天就是我
144 阅读4分钟

HTML篇

在 HTML 中如何做 SEO 优化？

  • <!--页面注解--> 这个标签是用来做HTML代码注解的，很多站在这里会写上关键词，这种形式的注解在浏览器中是不会显示的，而搜索引擎可以读到。所以这个标签有的时候会成为作弊的一种形式，不要过多的用这种标签到来注明你的关键词，否则如果搜索引擎认为你是作弊的话，就惨了。
  • < title >网站SEO标题</ title >、< meta name=“descriptiion” content=“网站描述”/>和< meta name=“keywords” content=“网站关键词/”>，这是SEO的重点。
  • h标签的使用，h1标签只能出现一次，它是当前页面的主标题，对蜘蛛的吸引力是最强的。strong标签的使用，strong标签对关键词的强调作用仅次于h标签，用于加粗段落标题或是重点关键词。
  • < a href=“链接地址” title=“链接说明”>链接关键词< /a>，站内丰富的超链接会方便蜘蛛爬行，体现网站的深度和广度，这点在SEO中至关重要。
  • < img src=“图片链接地址” alt=“图片说明”/>，这是针对网页中图片的，当然也可以写成<img src="图片链接地址"title=“图片说明”/>。

首屏和白屏时间如何计算？参考链接

  • 白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。
  • 白屏时间 = 地址栏输入网址后回车 - 浏览器出现第一个元素(head标签结束，body标签开始)
  • 首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。
  • 首屏时间 = 地址栏输入网址后回车 - 浏览器第一屏渲染完成(图片加载完成、iframe加载完成，可认为是结束); HTML按照次数加载，从上到下，在需要的地方加入script统计时间

css篇

说下对flex布局的理解 参考链接

  • 概念：Flex容器（flex container）(主轴、交叉轴) Flex项目(flex item)
  • Flex容器属性：flex-direction、flex-wrap、flex-flow、align-content、justify-content、align-items
  • Flex项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

flex布局中对于左右二列，一列宽度固定，一列flex:1，flex：1区域内容过多时，固定列宽度缩小，什么原因造成的,如何解决

<div class='container'>
  <div class='item-left'></div>	
  <div class='item-right'></div>	
</div>

.container{
  display: flex;
}
.item-left{
  width: 100px;
}
.item-right{
  flex: 1	
}
  • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

清除浮动方案

  • 兄弟元素增加clear:both
  • 父元素增加oveflow:hidden (通过触发BFC方式，实现清除浮动) BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
  • 伪类
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
  • 使用before和after双伪元素清除浮动
.clearfix:after, .clearfix:before{
  content: "";
  display: table;
}
.clearfix:after{
  clear: both;
}
.clearfix{
  *zoom: 1;
}

如何实现左侧宽度固定，右侧宽度自适应

DOM结构

<div class='container'>
  <div class='left'></div>
  <div class='right'></div>	
</div>
  • float + margin
.left{
  width:200px;
  float:left;
}
.right{
  margin-left:200px;
}
  • float + overflow (BFC)
.left{
  width:200px;
  float:left;
}
.right{
  overflow:hidden;
}
  • 利用calc计算
.left{
  width:200px;
  float:left;
}
.right{
  flot:right;
  width:calc(100% - 200px);
}
  • flex
.container{
  display:flex;
}
.left{
  width:200px;
}
.right{
  flex:1;
  overflow:hidden
}

JavaScript篇

你知道哪些项目优化方案

  • Vue-Router路由懒加载（利用Webpack的代码切割）
  • 使用CDN加速，将通用的库从vendor进行抽离，减少vendor体积，加快响应速度
  • Nginx的gzip压缩
  • Vue异步组件
  • 服务端渲染SSR
  • 如果使用了一些UI库，采用按需加载
  • Webpack开启gzip压缩
  • 如果首屏为登录页，可以做成多入口
  • Service Worker缓存文件处理
  • 使用link标签的rel属性设置 prefetch（这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低，prefetch通常用于加速下一次导航）、preload（preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度）
avatar
文章
阅读
粉丝