笔试

卷菜包
149 阅读12分钟

1、块级元素和行内元素都有哪些？

块级元素：<div>、<p>、<h1>~<h6>、<hr>、<form>、<table>、<pre>、<ul>、<ol>
行内元素：<span>、<i>、<img>、<br>、<input>、<sub>、<sup>、<select>、<textarea>、<a>、<b>
新特性中：<label>
相互转换：
块转行：display:inline
行转块：display:inline-block\

2、什么是盒子模型?

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
一个盒模型包含了padding（内边距）、margin（外边距）、border（边框）、内容（content）
标准盒模型：一个盒子的宽度是：margin(左右外边距)+padding(左右内边距)+border(左右边框)+内容的(width)
IE盒模型中：一个盒子的宽度=内容的(width)+margin(左右)（这里的内容width包含了padding(左右内边距)+border(左右边框))
当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
当设置box-sizing:border-box时，采用IE模式进行计算；

3、px, em和 rem的区别?vw,vh是什么?

任意浏览器的默认字体高都是16px,1em=16px
px表示像素，是相对长度单位，是相对于显示器屏幕分辨率来设置字体大小的，不支持IE的缩放；如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破，就要em来解决
em是相对长度单位，是相对于其父元素来设置字体大小的，支持IE的缩放；
rem是相对长度单位，是相对HTML根元素来设置字体大小的。它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

4、CSS居中的方法?

<div id = "c">a</div>
//公共样式
#c{
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

image.png

1.水平居中

#c{
    text-align: center;
    line-height: 100px;
}

2.table-cell

#c{
    display: table-cell;
    vertical-align: middle;/*垂直居中*/
    text-align: center;/*水平居中*/
}

3. flex布局

#c{
    display: flex;
    justify-content: center;
    align-items: center;
}

4.定位

#c{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        position: relative;
}
#d{
        position: absolute;
        top: 40%;
        transform: translate(48px);
}
<div id = "c">
        <div id = "d">a</div>
</div>

5.grid布局

#c{
     display: grid;
     place-items: center;
}

5、CSS 引入的方式有哪些?link和@import 的区别是?

1.行内样式 style

<div style="">div</div>

2.内嵌式 <style> </style>

<style> 
    div { } 
</style>

3.外链式

必须加rel="stylesheet"

<link rel="stylesheet" href="url">

4.导入式

<style> 
    @import url("test.01.css");
 </style>

以上四种优先级：行内样式>内嵌式div{}>导入式import>外链式<link>

link和@import 的区别是?

  • link属于html标签，而@import是css提供的。
  • 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载的。
  • 兼容性问题：@import只在IE5以上才能识别，而link是html标签，无兼容性问题。
  • 权重问题:@import的权重要高于link。
  • DOM操作:DOM可以操作link中的样式，而不可以操作@import中的样式。

6、说明 CSS 优先级顺序;

1.样式优先级

行内样式>内嵌式div{}>导入式import>外链式<link>

2.选择器优先级

* > #id > .class

7、简述CSS hack，写法举例;

Hack就是针对不同的浏览器去写不同的HTML、CSS样式，从而让各浏览器能达到一致的渲染效果。

Hack分为两大类︰HTML hack和CSS hack

<![if-lte IE9]>内容<![endif]-->

表示Hack符里面的内容只在IE9及以下的浏览器内显示，IE10及以上或者高级浏览器会认为这是注释。if是如果，lte小于或者等于，IE浏览器，9代表版本。

IE6：hack符号：_、- 不认识子级选择器 > , 不兼容交集选择器

IE6/7: hack符号：! $ & * () = % + @ , ./ ` [] # ~ ? : <> |

IE6以下： *html .selector{}

IE7以下： .selector,{}

8、都知道哪些CSS浏览器兼容性问题?

第一代浏览器：网景，IE
第二代浏览器：火狐，欧朋，谷歌，Safari
第三代浏览器：360，qq，12345，猎豹

8.1 margin都有8px的边距

火狐、谷歌、edge、ie8及以上都有，设置*{margin：0；padding：0}

8.2 a 标签中插入图片

ie11不显示，其他浏览器正常

8.3 块元素中插入图片

图片下面会有个4px边距 ，img{display: block;}

8.4浏览器私有属性

在某个CSS的属性前添加一些前缀，比如-webkit-，-moz- ，-ms-，这些就是浏览器的私有属性。

  • -moz代表firefox
  • -ms代表IE浏览器
  • -webkit代表chrome、safari
  • -o代表opera

8.5 hack

9、 Javascript 的常用数据类型有哪些?并举例说明。

Number,String,Boolean,Object(Array、Function),Symbol,

10. Javascript 的常用数组和字符串常用函数?

js数组及原型上的方法 - 掘金 (juejin.cn)
js || 字符串原型上方法 - 掘金 (juejin.cn)

11、什么是重构?

在不改变软件可观察行为的前提下，通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更趋合理，提高软件的扩展性和维护性。

12、浏览器的内核分别是什么?

内核浏览器优劣
Trident内核（IE内核）IE、百度用于Windows平台，不开源
Chromium内核（IE内核）Chrome、EdgeJS引擎——V8，开源，运算速度快
Gecko内核（Firefox内核）火狐、Edge跨平台，在Microsoft Windows、Linux、MacOs X等主要操作系统中使用
Webkit内核Safari不受IE、Firefox等内核的约束，比较安全
Presto内核Opera(加入谷歌)渲染速度快

360浏览器、猎豹浏览器内核： IE+Chrome双内核

搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）

13、简述一下src 与href的区别?

1. 请求资源类型不同

(1) href 是指定超链接目标的URL。href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。
常用link, a标签。
作用:主要用来建立当前元素和href引用元素的链接关系。

(2) src 是指向物件的来源地址。主要指向需下载的资源。
常用标签script,img,ifame等
作用:将其指向的资源下载并应用到当前document中，并且替换当前元素。

2. 浏览器解析方式和权重的不同

(1) 用 href时，加载到对应位置的时，不会暂停其他资源的下载或行为。
href链接的的是当前页面的一部分附属资源。
所以CSS样式可以放在html结构的头部优先加载（因为不影响页面的核心加载，只是HTML标签的对应样式表）

(2) 用src时候，会暂停其他资源的下载，直到当前资源加载，编译，执行完成了，并且把当前资源替换到src引用处。
src加载的是当前页面的一部分。
js脚本一般回放到document底部加载而不是头部。

14、TCP 和UDP 的主要优缺点，https 和http的区别?

1. TCP

TCP是传输控制协议，是面向连接的通讯协议），通过三次握手建立连接，通讯完成时四次挥手，一般应用在对安全性、完整性有严格要求的场景,如FTP、SMTP、HTTP等

优点：TCP 具有高可靠性，确保传输数据的正确性，不出现丢失或乱序
缺点：TCP相对于UDP速度慢一点，效率低，而且要求系统资源较多，每个连接都会占用系统的CPU、内存等硬件资源

2. UDP

UDP是用户数据报协议，是面向无连接的通讯协议

优点：UDP速度快、操作简单、要求系统资源较少
缺点：不可靠，可能会出现丢包、乱序、数据不完整

3、TCP和UDP的区别

1、TCP 是面向连接的传输控制协议，而UDP 提供了无连接的数据报服务。
2、TCP是保证数据的正确性，UDP可能会丢包。
3、UDP 具有较好的实时性，工作效率比 TCP 协议高。
4、每一条TCP连接只能是点到点的，UDP支持一对一，一对多，多对一和多对多的交互通信。
5、TCP对系统资源要求较多，UDP对系统资源要求较少。

4.https 和http的区别?

HTTP协议以明文方式发送内容，不提供任何方式的数据加密。HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。

HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。并且https协议需要到ca申请证书。

15、输入 URl到页面出现完成经历了什么过程?

1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染， 解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、ajax查询

16、常见的HTTP协议的状态消息都有哪些?

image.png

17、测试网页包括哪些方面?

1、网站性能测试

主要测试网站处理事务的反应速度，比如上网连接速度，网站处理用户请求的速度，同时测试在不同并发用户量情况下网站的承载情况。不同网站的性能测试需求和强度不一样，比如政府部门网站，浏览用户数据量大，高峰负荷时间也确定，更需要做好网站性能测试工作。

2、网站功能测试

主要是对网站的各项功能进行验证，比如字符处理，增添删改功能，按钮检查、界面测试等，可以通过罗列功能测试点表格的形式逐项对网站功能进行测试。

3、网站稳定性测试

网站在不同负荷量情况下检测网站的稳定性，可以通过故障模拟测试来提升系统稳定性。

4、兼容性测试

主要是测试网站在不同浏览器版本，不同的网络环境下的兼容情况。

5、安全测试

网站安全测试主要可以从网站的安全防护，数据备份与恢复，用户认证与加密，防病毒系统等方面进行测试。

18、什么叫优雅降级和渐进增强，二者有何区别?

渐进增强可以理解为向上兼容，一开始针对较为低版本的浏览器来构建页面，保证页面的所有基本的功能点都能实现；然后根据更高版本的浏览器设计一些在用户体验上更为良好的交互界面、追加更多的功能。

渐进增强（先考虑兼容）

.transition {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
     transition: all 0.2s;
}

优雅降级可以理解为向下兼容，一开始就对高版本的浏览器构建功能、性能、体验都较为完美页面，然后针对低版本的浏览器进行兼容补充。

优雅降级(先关注最高级的，在考虑兼容)

.transition {
    transition: all 0.2s;
    -o-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

两者的区别在于：渐进增强属于从基础的页面中增加更多的功能（加）
优雅降级是属于从功能丰富的页面上慢慢地减少页面的功能、用户的体验等等。

19、前端优化

1、降低请求量

​ ① 合并资源，减少http请求数量。
​ ② lazyLoad，如图片懒加载。分批加载，每次只加载一部分。
​ ③ 使用字体图标或CSS绘制，来代替部分图片。

2、加快请求速度

​ ① 预解析DNS
​ ② 使用HTTP2.0
​ ③ 并行加载
​ ④ CDN 分发
​ ⑤ webP，对图片进行压缩，减少图片体积。
​ ⑥ minify/gzip 压缩，对css、js等文件进行压缩（去除空格、回车等），减少文件体积

补充知识： ​ webP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且图像质量几乎无差异。同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀。

​ Minify把 CSS 和 JS 压缩和削减(Minify：去掉空格回车符等)，以及把多个CSS，JS文件整合到一个文件里。

3、缓存

​ ① HTTP协议缓存请求
​ ② 离线缓存 manifest
​ ③ 本地缓存 localStorage

补充知识： ​ GET请求可以缓存，POST请求不能缓存。GET请求后退/刷新无害，POST后退/刷新则会致使重新提交数据

4、渲染

​ ① JS优化，如防抖、节流、事件委托、减少重排重绘等。
​ ② CSS优化，如提取公共样式减少代码量、减少选择器嵌套层数、精灵图等。
​ ③ 服务器端渲染
​ ④ 使用Web Workers
​ ⑤ CSS写在文件头部，JS写在文件底部。

补充知识： ​ 客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。

​ 服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML，使首屏渲染快，SEO（搜索引擎优化） 好。

20、如何做好SEO优化?

1.关键词分析(也叫关键词定位)

2.链接布置

3.网站架构分析

avatar
文章
阅读
粉丝