第一部分：基础篇（一）

时间 2019-12-04

标签第一部分基础繁體版

原文原文链接

HTML、HTTP、web综合问题

1.前端须要注意哪些SEO

合理的title、description、keywords：搜索对着三项的权重逐个减少，title值强调重点便可，重要关键词出现不要超过2次，并且要靠前，不一样页面title要有所不一样；description把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面description有所不一样；keywords列举出重要关键词便可
语义化的HTML代码，符合W3C规范：语义化代码让搜引擎容易理解网页
重要的内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取
重要内容不要用js输出：爬虫不会执行js获取的内容
少用iframe:搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提升网站速度：网站速度是搜索引擎排序的一个重要指标

2.`<img>`的`title`和`alt`有什么区别

title属性当鼠标滑动到元素上时显示内容
alt是<img>的特有属性，是图片内容的等价描述，用于图片没法加载时显示、读屏器阅读图片。可提升图片可访问i性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析

3.HTTP的几种请求方法用途

GET方法javascript
- 发送一个请求来取得服务器上的某一资源
POST方法css
- 向URL指定的资源提交数据或附加新的数据
PUT方法html
- 跟POST方法很像，也是想服务器提交数据。可是，它们之间有不一样。PUT指定了资源在服务器上的位置，而POST没有
HEAD方法前端
- 只请求页面的首部
DELETE方法html5
- 删除服务器上的某资源
OPTIONS方法java
- 它用于获取当前URL所支持的方法。若是请求成功，会有一个Allow的头包含相似“GET,POST”这样的信息
TRACE方法node
- TRACE方法被用于激发一个远程的，应用层的请求消息回路
CONNECT方法android
- 把请求链接转换到透明的TCP/IP通道

4.从浏览器地址栏输入url到显示页面的步骤

基础版本

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发送请求;
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图像等）;
浏览器对加载到资源（HTML、JS、CSS等）进行语法解析，创建相应的内部数据结构，如（HTML的DOM）;
载入解析到的资源文件，渲染页面，完成。

详细版

DNS解析

将域名解析为ip地址css3
走缓存git
浏览器DNS缓存
本机DNS缓存
路由器DNS缓存
网络运营商服务器DNS缓存（80%的DNS解析在这完成的）
递归查询 www.a.b.com.cn

TCP链接

TCP三次握手
- 第一次握手：浏览器发给服务器，告诉服务器，我将要发送请求
- 第二次握手：服务器发送浏览器，告诉浏览器，我准备好了，你放马过来
- 第三次握手：浏览器发送服务器，告诉浏览器，我来了

发送请求
- 请求报文
返回响应
- 响应报文
解析报文，渲染页面

先预解析（将须要发送请求的标签的请求发出去）
从上到下解析html文件
- 遇到HTML标签，调用html解析器将其解析DOM树
- 遇到css标记，调用css解析器将其解析CSSOM树
  - link 阻塞 - 为了解决闪屏，全部解决闪屏的样式
  - style 非阻塞，与闪屏的样式不相关的
将DOM树和CSSOM树结合在一块儿，造成render树
layout布局 render渲染
遇到script标签，阻塞，调用js解析器解析js代码，可能会修改DOM树，也可能会修改CSSOM树，
将DOM树和CSSOM树结合在一块儿，造成render树
layout布局 render渲染（重排重绘）
script标签的属性
- async 异步谁先回来谁就先解析，不阻塞
- defer 异步按照前后顺序（defer）解析，不阻塞
script标签放在body下，放置屡次重排重绘，可以操做dom

断开连接

TCP四次挥手（浏览器挥手两次，服务器挥手两次。断开请求须要两次挥手, 断开响应须要两次挥手）
第一次挥手：浏览器发送服务器，告诉服务器，我东西（请求报文）发完了，服务器准备关闭
第二次挥手：服务器发送浏览器，告诉浏览器，我东西接受完了，我准备关闭，你也准备关闭
第三次挥手：服务器发送浏览器，告诉浏览器，我东西（响应报文）发完了，浏览器准备关闭
第四次挥手：浏览器发送服务器，告诉服务器，我东西接受完了，我准备关闭，你也准备关闭

5.如何进行网站性能优化

content方面
- 减小HTTP请求：合并文件、CSS精灵、inline Image
- 减小DNS查询：DNS缓存、将资源分布到恰当数量的主机名
- 减小DOM元素数量
Server方面
- 使用CDN
- 配置ETag
- 对组件使用Gzip压缩
Cookie方面
- 减少cookie大小
css方面
- 将样式表放到页面顶部
- 不使用CSS表达式
- 使用<link> 不使用@import
javascript方面
- 将脚本放到页面底部
- 将javascritpt 和css从外部引入
- 压缩javascript 和css
- 删除不须要的脚本
- 减小DOM访问
图片方面
- 优化图片：根据实际颜色须要选择色深、压缩
- 优化css精灵
- 不要在HTML中拉伸图片

6.HTTP状态码及其含义

1xx：信息状态码
- 100 Continue继续，通常在发送post请求时，已发送了http header以后服务端将返回此信息，表示确认，以后发送具体参数信息
2xx:成功状态码
- 200 ok 正常返回信息
- 201 Created 请求成功而且服务器建立了新的资源
- 202 Accepted服务器已接受请求，但还没有处理
3xx：重定向
- 301 Move Permanently 请求的网页已永久移动到新网址，搜索引擎抓新网址内容和新网址
- 302 Found临时重定向，资源临时被转移到新网址，搜索引擎抓新网址内容和旧网址
- 303 See Other 临时性重定向，且老是使用 GET 请求新的 URI。
- 304 Not Modified 资源重定向浏览器缓存中自从上次请求后，请求的网页未被修改过
4xx:客户端错误
- 400 Bad Requset服务为其没法理解请求的格式，客户端不该当尝试再次使用相同的内容发起请求
- 401 Unauthorized请求未受权。
- 403 Forbidden 禁止访问
- 404 Not Found 找不到如何与URI相匹配的资源。输入网址有误
5xx:服务器错误
- 500 Internal Server Error 最多见的服务器端错误。
- 503 Service Unavailable 服务器端暂时没法处理请求（多是过载或维护）。

7. 语义化的理解

用正确的标签作正确的事情！
HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。
在没有css样式状况下也以一种文档格式显示，而且使容易阅读的。
搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

8.介绍一下你对浏览器内核的理解

主要分红两部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS），以及计算网页的显式方式，而后会输出至显式器或打印机。浏览器的内核的不一样对于网页的语法解释会有不用，因此渲染效果也不相同。全部网页浏览器、电子邮件客户端以及其余须要编辑、显式网络内容的应用程序都须要内核
JS引擎：解析和执行JavaScript来实现网页的动态效果
最开始渲染引擎和JS引擎并无区分的很明确，后来JS引擎愈来愈独立，内核就倾向于只指渲染引擎.有一个网页标准计划小组制做了一个 ACID 来测试引擎的兼容性和性能。内核的种类不少，如加上没什么人使用的非商业的免费内核，可能会有10多种，可是常见的浏览器内核能够分这四种：Trident、Gecko、Blink、Webkit。
- Trident(IE内核)：国内不少的双核浏览器的其中一核即是 Trident，美其名曰 "兼容模式"。表明： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特色就是新内核 EdgeHTML。
- Gecko(firefox)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特色是代码彻底公开，所以，其可开发程度很高，全世界的程序员均可觉得其编写代码，增长功能。惋惜这几年已经没落了，好比打开速度慢、升级频繁、猪同样的队友flash、神同样的对手chrome。
- webkit(Safari)：Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。如今不少人错误地把 webkit 叫作 chrome内核（即便 chrome内核已是 blink 了），苹果感受像被别人抢了媳妇，都哭晕再厕所里面了。表明浏览器：傲游浏览器三、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器
- Chromium/Bink(chrome)在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 实际上是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。
- Presto(Opera)：Presto 是挪威产浏览器 opera 的 "前任" 内核，为什么说是 "前任"，由于最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。
移动端的浏览器内核主要说的是系统内置浏览器的内核：目前移动设备浏览器上经常使用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 以前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

9.html5有哪些新特性、移除了哪些元素？

html5如今已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增长
- 绘画canvas
- 用于媒体播放的video和audio
- 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
- 语义化更好的内容元素，好比article、footer、header、nav、section
- 表单控件，calendar、date、time、email、url、search
- 新的技术 webworker、webscket、Geolocation
移除的元素：
- 纯表现的元素：basefont、big、center、font、s、strike、tt、u
- 对可用性产生负面影响的元素：frame、frameset、noframes
支持HTML5新标签
- IE8/IE7/IE6支持经过document.createElement方法产生的标签
- 能够利用这一特性让这些浏览器支持html5新标签
- 浏览器支持新标签后，还须要添加标签默认的样式
固然也能够直接使用成熟的框架，好比html5shim

10.`HTML5`的离线存储怎么使用，工做原理能不能解释一下？

在用户没有与因特网链接时，能够正常访问站点或应用，在用户与因特网链接时，更新用户机器上的缓存文件
原理：html5的离线存储是一个基于新建的.appcache文件的缓存机制（不是存储技术），经过这个文件上的解析清单离线存储资源，这些资源就会想cookie同样被存储从了下来。以后当网络在处于离线状态下时，浏览器会经过被离线存储技的数据进行页面展现
如何使用：
- 页面头部加入一个mainfest的属性。
- 在cache.mainfest 文件中编写离线存储的资源。
- 在离线状态时，操做window.applicationCache进行需求实现

11.浏览器是怎么对`html5`的离线存储资源进行管理和加载的呢？

在线的状况下，浏览器发现html头部有mainfest属性，它会请求mainfest文件，若是是第一次访问app，那么浏览器就会根据mainfest文件的内容下载相应的资源而且进行离线存储。若是已经访问过app或网页而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会对比新的mainfest文件与旧的mainfest文件，若是文件没有发生改变，就不作任何操做，若是文件改变了，那么就会从新下载文件中的资源并进行离线存储。
离线的状况下，浏览器就直接使用离线存储的资源。

12.请描述一下`cookie`，`sessionStorage`，和`localStorage`的区别？

cookie 是网站为了标示用户身份而存储在用户本地终端（Client Side）上的数据（一般通过加密）
cookie数据始终在同源的http请求中携带（即便不须要），就会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅保存在本地
存储大小;
- cookie 数据大小不能超过4k
- sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多能够达到5M或者更大
有期时间：
- localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage 数据在当前浏览器窗口关闭后自动删除
- cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭

13.`iframe`有哪些缺点

iframe会阻塞主页面的Onload事件
搜索引擎的检索程序没法解读这种页面，不利于SEO
iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载
解决：
- 使用iframe以前须要考虑这两个缺点。若是须要使用iframe，最好是经过JavaScript动态给iframe添加src属性值，这样能够绕开以上两个问题

14.WEB标准以及W3C标准是什么？

标签闭合、标签小写、不乱嵌套、使用外链CSS和JS、结构行为表现的分离

15.xhml和html有什么区别？

一个是功能上的差异
- 主要是XHTML可其兼容各大浏览器、手机以及PDA，而且浏览器也能快速正确地编译网页
另外是书写习惯的差异
- XHTML元素必须被正确的嵌套，闭合，区分大小写，文档必须拥有根元素

16.Doctype做用？严格模式与混杂模式如何区分？它们有何意义

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签以前。告知浏览器的解析器，用什么文档类型规范来解析这个文档
严格模式的排版和 JS 运做模式是以该浏览器支持的最高标准运行
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。Doctype不存在或格式不正确会致使文档以混杂模式呈现

17.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？行内元素和块级元素有什么区别？

行内元素有: a b span img input select strong
块级元素有：div ul ol li dl dd h1~h6 p
空元素：<br> <hr> <img> <input> <link> <meta>
行内元素不能够设置宽高，不独占一行
块级元素能够设置宽高，独占一行
块级元素能够包含块级元素和内联元素，而行内元素只能包含文本
块级元素能够设置margin和padding属性，行内元素只有margin-left、margin-right、padding-left、padding-right起做用

18.Html全局属性（global attribute）有哪些

class:为元素设置类标识
data-: 为元素增长自定义属性
draggable: 设置元素是否可拖拽
id: 元素id，文档内惟一
lang: 元素内容的的语言
style: 行内css样式
title: 元素相关的建议信息

19.Canvas和SVG有什么区别？

svg绘制出来的每个图形的元素都是独立的DOM节点，可以方便的绑定事件或用来修改。canvas输出的是一整幅画布
svg输出的图形是矢量图形，后期能够修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片同样，放大会失真或者锯齿

20.HTML为何只须要写

HTML5 不基于 SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为
而HTML4.01基于SGML,因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型

21.如何在页面上实现一个圆形的可点击区域？

svg
border-radius
纯js实现须要一个点在不在圆上的简单算法、获取鼠标坐标等等

22.网页验证是干吗的，是为了解决什么安全问题？

区分用户是计算机爱是人的公共全自动程序。能够防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试

23.viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // width    设置viewport宽度，为一个正整数，或字符串‘device-width’
    // device-width  设备宽度
    // height   设置viewport高度，通常设置了宽度，会自动解析出高度，能够不用设置
    // initial-scale    默认缩放比例（初始缩放比例），为一个数字，能够带小数
    // minimum-scale    容许用户最小缩放比例，为一个数字，能够带小数
    // maximum-scale    容许用户最大缩放比例，为一个数字，能够带小数
    // user-scalable    是否容许手动缩放
   
复制代码

延伸提问
- 怎么处理移动端1px被渲染成2px的问题 局部处理
mate标签中的viewport属性，initial-scale设置为1
rem按照设计稿标准走，外加利用transform的scale（0.5）缩小一倍便可；

全局处理

mate标签中的viewport属性，initial-scale设置为0.5
rem按照设计稿标准走

24.渲染优化

禁止使用iframe（阻塞父文档onload事件）
- iframe会阻塞主页面的onload事件
- 搜索引擎的检索程序没法解读这种页面，不利于SEO
- iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载
- 若是须要使用iframe，最好是经过javascript动态给iframe添加src属性值，这样能够绕开以上两个问题
禁止使用GIF图片实现loading效果（下降cpu消耗，提高渲染性能）
使用css3代码替代JS动画（尽量避免重绘重排）
对于一些小图标，可使用base64位编码，以减小网络请求。但不太建议大图使用，比较耗费cpu
- 小图标优点在于
  - 减小HTTP请求
  - 避免文件跨域
  - 修改及时生效
页面头部的<style></style> <script></script>会阻塞页面，（由于renderer进程中JS线程和渲染线程是互斥的）
页面中空的href和src会阻塞页面其余资源的加载（阻塞下载进程）
网页gzip，CDN托管，data缓存，图片服务器
前端模板JS+数据，减小因为HTML标签致使的带宽浪费，前端用变量保存ajax请求结果，每次操做本地变量，不用请求，减小请求次数
用innerHTML代替DOM操做，减小DOM操做次数，优化JavaScript性能
当须要设置的样式不少时设置className而不是直接操做style
少用全局变量。缓存DOM节点查找的结果，减小IO读取操做
图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳
对普通的网站有一个统一的思路，就是尽可能向前端优化、减小数据库操做、减小磁盘IO

25.meta viewport相关

<!DOCTYPE html>  <!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′>    <!--声明文档使用的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   <!--优先使用 IE 最新版本和 Chrome-->
<meta name=”description” content=”不超过150个字符”/>       <!--页面描述-->
<meta name=”keywords” content=””/>     <!-- 页面关键词-->
<meta name=”author” content=”name, email@gmail.com”/>    <!--网页做者-->
<meta name=”robots” content=”index,follow”/>      <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!--为移动设备添加 viewport-->
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  <!--添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
<!--添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  <!--设置苹果工具栏颜色-->
<meta name=”renderer” content=”webkit”> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     <!--避免IE使用兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”>     <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓-->
<meta name=”MobileOptimized” content=”320″>   <!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”>   <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”>    <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”>              <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”>       <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”>   <!--UC应用模式-->
<meta name=”x5-page-mode” content=”app”>   <!-- QQ应用模式-->
<meta name=”msapplication-tap-highlight” content=”no”>    <!--windows phone 点击无高亮
设置页面不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
复制代码

26.你作的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？

IE：trident 内核
Firefox：gecko内核
Safari：webkit内核
Opera:之前是presto内核，Opera现已改用Google - Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

27.div+css布局较table布局有什么优势？

改版的时候更方便只要更改css文件
页面加载速度更快、结构化更清晰、页面显示简洁
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前

28.a：img的alt与title有何异同？b：strong与em的异同？

alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成tool tip`显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

29.你能描述一下渐进加强和优雅降级之间的不一样吗？

渐进加强：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减小用户体验的供给，而渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要。降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带

30.为何利用多个域名来存储网站资源会更有效？

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的链接数，优化页面响应速度
防止没必要要的安全问题

31.简述一下src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所咋位置，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素

<script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，相似于将所指向资源嵌入当前标签内。这也是为何将js脚本放在底部而不是头部
复制代码

href是Hypertext Reference的缩写，指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，若是咱们在文档中添加
那么浏览器会识别该文档为`css`文件，就会并行下载资源而且不会中止对当前文档的处理。这也是为何建议使用`link`方式来加载`css`，而不是使用`@import`方式

32.知道的网页制做会用到的图片格式有哪些？

png-8、png-24、jpeg、gif、svg
可是上面的那些都不是面试官想要的最后答案。面试官但愿听到是Webp,Apng。（是否有关注新技术，新鲜事物）
Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的状况下，WebP格式图像的体积要比JPEG格式图像小40%。
Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，能够实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前获得 iOS safari 8的支持，有望代替GIF成为下一代动态图标准

33.在css/js代码上线以后开发人员常常会优化性能，从用户刷新网页开始，一次js请求通常状况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存

34.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域能够添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，若是前者小于后者，优先加载。
若是为幻灯片、相册等，可使用图片预加载技术，将当前展现图片的前一张和后一张优先下载。
若是图片为css图片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
若是图片过大，可使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提升用户体验。
若是图片展现区域小于图片的真实大小，则因在服务器端根据业务须要先行进行图片压缩，图片压缩后大小与展现一致。

35.web开发中会话跟踪的方法有哪些

cookie
session
url重写
隐藏input
ip地址

37.Web存储技术总结

1、`Cookie`

是什么？

本质上是一个存储浏览器端的文本

做用：

能够用来给浏览器存储数据的
解决http协议无状态问题

工做原理

首次：浏览器发送请求给服务器，服务器返回响应给浏览器，此时返回了cookie，浏览器自动保存下来
下次：浏览器发送请求时就会自动携带上cookie，服务器经过解析cookie，从而判断浏览器以前的行为（是否登陆过），返回给浏览器相应响应

服务器端使用

设置/修改cookie res.cookie(key, value, options)
获取cookie app.use(cookieParser()); req.cookies
删除cookie res.clearCookie(key)

浏览器使用

document.cookie 读写二合一
document.cookie = 'hello=123;expires=' + new Date(Date.now() + 1000 * 3600 * 24);

cookie的有效期

会话cookie （浏览器打开到浏览器关闭是一次会话）
- 会话开始时产生，会话结束自动销毁
持久化cookie
- res.cookie('userId', 'sunwukong', {maxAge: 1000 * 3600 * 24 * 7}); 7天内生效
- res.cookie('userId', 'sunwukong', {maxAge: 1000 * 3600 * 24 * 365 * 10}); 10年内生效，永久

缺点：

存储容量有限大约4kb左右，数量为20个左右
传输流量比较大若是cookie数量比较多，每次请求时都会自动携带cookie

2、`ession`

是什么？是一个存储服务器端会话对象
做用？存储数据、解决http协议无状态问题
工做原理

浏览器首次发送给服务器请求，此时开启会话，服务器会为本次会话建立session对象
服务器会将session的id做为cookie返回给浏览器，浏览器接受后就存起来
下一次浏览器发送请求就会自动携带上cookie，服务器就要解析cookie获得session_id，
经过session_id找到对应session对象，而后根据session对象中的内容返回给浏览器相应的响应

使用：

想将会话存储的session进行持久化储存，就得使用上数据库
设置一个中间件
从此经过 req.session 读写二合一

cookie 和 session 区别

储存位置： cookie在浏览器端 session在服务器端
存储容量大小： cookie较小 session无限大
传输流量： cookie较多 session只产生一个cookie，较小
安全性： cookie安全更低（保存不是敏感数据） session安全更高（登录、注册）

3、`Webstorage`

SessionStorage和LocalStorage都是本地存储，不会被发送到服务器上。同时空间比Cookie大不少，通常支持5-10M
浏览器端经过 Window.sessionStorage和Window.localStorage 属性来实现本地存储机制。
- Storage.getItem('key');
  - 该方法接受一个键名做为参数，返回键名对应的值。
- Storage.setItem('key', 'value');
  - 该方法接受一个键名和值做为参数，将会把键值对添加到存储中，若是键名存在，则更新其对应的值。
- Storage.removeItem('key');
  - 该方法接受一个键名做为参数，并把该键名从存储中删除。
- Storage.clear()
  - 调用该方法会清空存储中的全部键名
  - ·：
    - Storage 对象发生变化时（即建立/更新/删除数据项时，重复设置相同的键值不会触发该事件，Storage.clear() 方法至多触发一次该事件）会触发
  - 在同一个页面内发生的改变不会起做用
  - 在相同域名下的其余页面发生的改变才会起做用。(修改的页面不会触发事件，与它共享的页面会触发事件)
区别
- LocalStorage是浏览器本地持久化存储技术，也叫永久存储
- SessionStorage是浏览器本地临时存储技术，也叫会话存储
使用store库完美兼容全部浏览器

4、`IndexDB`和`WebSQL`

IndexedDB 和 WebSQL 都是用于客户端存储大量结构化数据。
该API使用索引来实现对该数据的高性能搜索。
不一样的是IndexedDB是非关系型，而WebSQL是关系型。
WebSQL官方不在维护，但兼容性较好，基本不使用。
IndexedDB在维护，兼容性较差
结合localForage库使用IndexDB和WebStorage
juejin.im/post/5bdd67…
github.com/localForage…

5、`PWA`

渐进式网络应用程序(Progressive Web Application - PWA)，是一种能够提供相似于原生应用程序(native app)体验的网络应用程序(web app)。PWA能够用来作不少事。其中最重要的是，在离线(offline)时应用程序可以继续运行功能。这是经过使用名为 Service Workers的网络技术来实现的。
简单来说：
- 可以离线访问资源
- 可以使用原生系统功能
zoumiaojiang.com/article/ama…

6、`Manifest`

html5 离线缓存文件
juejin.im/post/59cdb4…

38.GET请求报文结构是怎样的

首行是Request-Line包括：请求方法，请求URI，协议版本，CRLF
首行以后是若干行请求头，包括general-header，request-header或者entity-header，每一个一行以CRLF结束
请求头和消息实体之间有一个CRLF分隔
根据实际请求须要可能包含一个消息实体一个请求报文例子以下：

报文首行
  GET http://localhost:3000/test?username=123&password=456 HTTP/1.1
    请求方式  请求地址  协议名/版本号 1.0 1.1 2.0
    请求方式、请求地址、get请求查询字符串参数
  报文头
  Host: localhost:3000
    主机地址
  Connection: keep-alive
    保持长链接
  Cache-Control: max-age=0
    不使用缓存    
    强缓存 Cache-Control（1.1） expires（1.0）
    协商缓存 last-modified  etag    if-modified-since if-none-match
  Upgrade-Insecure-Requests: 1
    容许使用https协议
  User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
    用户代理：浏览器内核版本信息
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
    容许接受数据
    text/html html文件
    application/xhtml+xml xhtml文件
    application/xml;q=0.9 xml数据，优先级更低
    image/webp,image/apng 图片的格式  webp chrome推出的压缩程度更好的图片，只能在android和chrome使用
    */*;q=0.8  容许接受任意文件/数据，优先级最低
  Accept-Encoding: gzip, deflate, br
    容许接受的文件压缩格式
  Accept-Language: zh-CN,zh;q=0.9
    语言
  Cookie: Webstorm-129da853=8726c2d8-3b88-48b8-8db0-dd82e62fb79a; _ga=GA1.1.1365509058.1552220281
    cookie解决http协议问题。
    
 空行
 报文体
复制代码

39.POST请求报文的结构是怎样的

报文首行
    POST http://localhost:3000/test HTTP/1.1
    报文头
    Host: localhost:3000
    Connection: keep-alive
    Content-Length: 29
                        请求体的长度，单位byte
    Cache-Control: max-age=0
    Upgrade-Insecure-Requests: 1
    User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
    Origin: http://localhost:3000
                        访问服务器的地址
    Content-Type: application/x-www-form-urlencoded
                        application/x-www-form-urlencoded form表单默认值，传输数据是采用urlencoded编码 key=value&key=value
                        application/json 传输数据是json
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
    Referer: http://localhost:63342/class1128/01.nodejs/day03/index.html?_ijt=vdq7mfcge1jbednt6is99tah4c
                        请求来源的地址：  广告计费、防盗链
    Accept-Encoding: gzip, deflate, br
    Accept-Language: zh-CN,zh;q=0.9
    Cookie: Webstorm-129da853=8726c2d8-3b88-48b8-8db0-dd82e62fb79a; _ga=GA1.1.1365509058.1552220281
    报文空行
    报文体
    username=admin&password=admin
    post请求请求参数


复制代码

40.HTTP response响应报文结构是怎样的

首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF
首行以后是若干行响应头，包括：通用头部，响应头部，实体头部
响应头部和响应实体之间用一个CRLF空行分隔
最后是一个可能的消息实体响应报文例子以下：

响应首行
    HTTP/1.1 200 OK
          响应状态码
    * 响应头
    X-Powered-By: Express
    Content-Type: text/html; charset=utf-8
                        响应体类型
    Content-Length: 46
    ETag: W/"2e-E6oVGh8rOKZ0GZBtPMn6O0HzO+s"
    Date: Tue, 12 Mar 2019 07:27:03 GMT
    Connection: keep-alive
    * 空行
    * 响应体
    <h1>这是express服务器返回的响应</h1>
    汉字占3字节 普通占1字节
复制代码

第一部分：基础篇（一）

HTML、HTTP、web综合问题

1.前端须要注意哪些SEO

2.<img>的title和alt有什么区别

3.HTTP的几种请求方法用途

4.从浏览器地址栏输入url到显示页面的步骤

基础版本

详细版

5.如何进行网站性能优化

6.HTTP状态码及其含义

7. 语义化的理解

8.介绍一下你对浏览器内核的理解

9.html5有哪些新特性、移除了哪些元素？

10.HTML5的离线存储怎么使用，工做原理能不能解释一下？

11.浏览器是怎么对html5的离线存储资源进行管理和加载的呢？

12.请描述一下cookie，sessionStorage，和localStorage的区别？

13.iframe有哪些缺点

14.WEB标准以及W3C标准是什么？

15.xhml和html有什么区别？

16.Doctype做用？严格模式与混杂模式如何区分？它们有何意义

17.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？行内元素和块级元素有什么区别？

18.Html全局属性（global attribute）有哪些

19.Canvas和SVG有什么区别？

20.HTML为何只须要写

21.如何在页面上实现一个圆形的可点击区域？

22.网页验证是干吗的，是为了解决什么安全问题？

23.viewport

24.渲染优化

25.meta viewport相关

26.你作的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？

27.div+css布局较table布局有什么优势？

28.a：img的alt与title有何异同？b：strong与em的异同？

29.你能描述一下渐进加强和优雅降级之间的不一样吗？

30.为何利用多个域名来存储网站资源会更有效？

31.简述一下src与href的区别

32.知道的网页制做会用到的图片格式有哪些？

33.在css/js代码上线以后开发人员常常会优化性能，从用户刷新网页开始，一次js请求通常状况下有哪些地方会有缓存处理？

34.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

35.web开发中会话跟踪的方法有哪些

37.Web存储技术总结

1、Cookie

2、ession

3、Webstorage

4、IndexDB和WebSQL

5、PWA

6、Manifest

38.GET请求报文结构是怎样的

39.POST请求报文的结构是怎样的

40.HTTP response响应报文结构是怎样的

2.`<img>`的`title`和`alt`有什么区别

10.`HTML5`的离线存储怎么使用，工做原理能不能解释一下？

11.浏览器是怎么对`html5`的离线存储资源进行管理和加载的呢？

12.请描述一下`cookie`，`sessionStorage`，和`localStorage`的区别？

13.`iframe`有哪些缺点

1、`Cookie`

2、`ession`

3、`Webstorage`

4、`IndexDB`和`WebSQL`

5、`PWA`

6、`Manifest`