1.从浏览器地址栏输入url到显示页面的步骤
浏览器根据请求的url交给DNS域名解析，找到真实的IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图像等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成
2.如何进行网站性能优化
浏览器：
减少HTTP请求
使用HTTP2.0
设置浏览器缓存策略
白屏时间做加载动画
资源：
静态资源cdn
静态资源单独域名
gzip压缩
做服务端渲染（SSR）
将CSS放在文件头部，JavaScript文件放在底部
图片：
字体图标代替图片图标
精灵图
图片懒加载
图片预加载
使用png格式的图片
代码：
慎用全局变量
缓存全局变量
减少重绘回流
节流、防抖
少用闭包、减少内存泄漏
减少数据读取次数
文档碎片优化节点添加
减少判断层级
字面量与构造式
webpack
减小代码体积
按需加载
提取第三库代码
webpack dll优化
项目方案提议（额外）
长列表优化
web worker
避免 ifarme 嵌套网页
3.语义化的理解
html结构标签要有意义
对于编写代码的人来说，有语义化标签的HTM的结构，更加清晰，方便编写代码；对于团队来说，方便团队的开发与维护。
对于爬虫，有利于SEO。
对于浏览器更加方便解析。
最重要的是对于用户，
一是假如因为网速的原因导致没有加载CSS，页面也能呈现出良好的结构。
二是某些标签属性如alt，title能带来良好的用户体验，还有用好label标签更利于用户交互；
三是在特殊终端如视障阅读器中语义化的 HTML 可以呈现良好的结构。
4.HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制。通过这个文件上的解析清单存储离线资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会在页面上展示离线存储中的数据。
如何使用：
页面头部像下面一样加入一个manifest的属性；
在cache.manifest文件的编写离线存储的资源
在离线状态时，操作window.applicationCache进行需求实现
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: /offline.html
5.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问 app，那么浏览器救护根据manifest文件的内容下载相应的资源并且进行离线存储，如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源
6.iframe有那些缺点？
1.创建比一般的DOM元素慢了1-2个数量级
2.阻塞页面加载。及时触发window的onload事件是非常重要的，如果加载延迟，就会给用户网页很慢的感觉，而window的onload事件需要在所有的iframe加载完毕后才会出发。
3.唯一的连接池
4.不利于SEO，搜索引擎的检索程序无法解读iframe。
7.WEB标准以及W3C标准是什么?
web标准：将结构、表现、行为分离，使其更具有模块化。
w3c标准：标签字母要小写，双标签要闭合，标签不允许随意嵌套。
尽量使用外部样式和外链js，使结构、表现、行为分为三块，这样可以提高页面渲染速度。
样式尽量少用行内样式，id和class名要做到见名知意。
不需要变动页面内容，便可提供打印版本，不需要提供复制内容，提高网站易用性。
8.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
!DOCTYPE声明位于文档中的最前面，处于标签之前，告知浏览器的解析，用什么文档类型规范也解析这个文档；
严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行；
在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防站点无法工作 DOCTYPE 不存在或者格式不正确会导致文档以混杂模式呈现
9.HTML全局属性(global attribute)有哪些
class：为元素设置类标识；
data-*：为元素增加自定义属性；
draggable：设置元素是都可拖拽；
id：元素id，文档内唯一；
lang：元素内容的语言；
style：行内css样式；
title：元素相关的建议信息
10.Canvas和SVG有什么区别？
svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改，canvas输出的是一整幅画布；
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿，而canvas输出标量画布，就像一张图片一样，方法会失真或者锯齿# 11.如何在页面上实现一个圆形的可点击区域？
使用svg
border-radius
纯js实现：获取鼠标点击位置坐标，判断其到圆点的距离是否不大于圆的半径，来判断点击位置是否在园内；
两点之间距离计算公式：|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2))
Math.abs()求绝对值，Math.pow（底数，指数），Math.sqrt()求平方根
