1、从用户输入url到页面展示发生了什么？
1. DNS域名解析；
2. 建立TCP连接；
3. 发送HTTP请求；
4. 返回响应结果；
5. 关闭TCP连接；
6. 浏览器解析HTML；
7. 浏览器布局渲染；
2、浏览器解析机制 && 描述浏览器重绘（repaint）和回流（reflow），哪些方法能够改善由于dom操作产生的回流
你真的了解回流和重绘吗，这篇文章从浏览器渲染、重排重绘、如何优化一一做了分析讲解。
浏览器渲染过程：
- 解析HTML，生成DOM树，解析CSS，生成CSSOM树
- 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
- Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
- Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
- Display:将像素发送给GPU，展示在页面上。
1. 重排一定会导致重绘，重绘（比如修改颜色）不一定会重排。
2. display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。
3. display:none 会触发 reflow（回流/重排），而 visibility:hidden 只会触发 repaint（重绘），因为没有发现位置变化。
4、前端性能优化
多层面优化思维导图：
- 网络层面：
压缩打包代码文件，减少http请求
使用本地存储，减少请求
使用http缓存策略，（比如服务端的响应中添加 `Cache-Control / Expires` ）
使用CDN缓存，提高网络响应速度
- 代码层面：
css优化
页面常用icon合成雪碧图使用，或用base64处理
css不用表达式
使用外链样式表并放在页面头部加载、不用!important
js优化
防抖和节流（应用场景：resize，scroll，input）。
减少 DOM 操作（用变量存储DOM节点，避免每次都要读取DOM；修改DOM样式时能用className不直接修改style）
事件委托。
js 脚本放html最底部加载。
按需加载，比如 React 中使用 `React.lazy` 和 `React.Suspense` ，通常需要与 webpack 中的 `splitChunks` 配合。
dom优化
懒加载
首屏渲染（TODO：预渲染、SSR服务端渲染）
服务端渲染
图片压缩
- 使用性能监测工具
LigthHouse
Performace
- 其他
前端尽量不用cookie存储数据，后端使用注意控制cookie的大小
- TODO：常用的第三方库使用 CDN 服务，在 webpack 中我们要配置 externals，将比如 React， Vue 这种包不打倒最终生成的文件中。而是采用 CDN 服务。
5、简述从前端角度出发做好SEO需要考虑什么？
① seo权重依次为：title > description > keywords
<title>页面标题</title>
<meta name="description"/>
<meta name="keyword" content='SEO,搜索引擎优化,网页排名优化'/>
标题、关键词精简，准确定位，避免堆砌文字
② 合理的html结构，扁平化页面结构：
目录结构一般不多于 3 级，否则影响用户体验且不利于seo
爬虫抓取的页面长度有限，重要的内容放前面
使用面包屑，增加页面之间的关联性
img标签加alt属性
合理利用rel='nofollow'忽略跟踪
对不必要跟踪的跳转加上rel='nofollow'属性，比如外链到其他网站的，一旦爬走了就不会回来了
③ 提高页面加载速度：一旦加载超时，“爬虫”就会放弃爬取。
④ 引入百度sdk，主动上报让百度收录+提供网站的sitemap
6、延伸：为什么spa不利于seo,怎么解决？
解决方案：
- 服务端渲染
- 预渲染
SPA优缺点、解决单页面应用的SEO困难问题以及三种网页渲染方式
7、Web存储(cookie、localStorage、sessionSrorage)
8、浏览器缓存机制/http缓存(如果想让某个文件不cache，如何处理？)
Web 缓存大致可以分为：
- 数据库缓存
- 服务器端缓存（代理服务器缓存、CDN 缓存）
- 浏览器缓存
浏览器缓存包含： HTTP 缓存、indexDB、web存储（cookie、localStorage、sessionStorage） 等等。一般浏览器缓存考察的是HTTP缓存。
浏览器的缓存机制是将已访问过的资源进行缓存，这样当客户端下次访问时，就能直接访问已经缓存的资源，从而减少服务器请求次数，让页面能够更快地加载。
浏览器缓存的目的和意义： 节约网络资源，提高网络效率，减少服务器压力
相关文章：HTTP 缓存机制、HTTP Header 详解
9、http与https
| 标题 | Http | Https |
|---|---|---|
| 概念 | 超文本传输协议 | 超文本传输 安全协议（HTTPS 经由 HTTP 进行通信，但利用 SSL/TLS 来加密数据包。） |
| TCP 协议端口 | 80 | 443 |
| 数据传输 | 明文传输，数据都未加密，安全性较差（HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。） | （SSL+HTTP） 数据传输过程是 加密 的，安全性较好。公钥加密，私钥解密。 |
| 证书 | - | HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构） 申请证书 |
| 响应速度 | 快： http请求建立tcp连接，客户端与服务端需要交换3个包 | 慢： 除了TCP 的3个包，还要加上 ssl 握手需要的 9 个包，一共12 个包。（HTTPS 比 HTTP 要更耗费服务器资源） |
相关文章：HTTP与HTTPS的区别
10、什么是同源策略
10.1、延伸：如何解决跨域问题
- JSONP: 就是动态创建
<script>标签，利用<script>的src 不受同源策略约束来跨域获取数据 - 跨域资源共享（CORS）: 后端配置cors
- 使用代理
- nginx代理跨域
- nodejs中间件代理跨域
- 浏览器插件： 开发时可以结合谷歌浏览器插件 Allow CORS: Access-Control-Allow-Origin
相关文章：跨域问题常用的三种解决方式、解决跨域问题9个方法（里面讲到的iframe、webscoket等方法实际不是跨域问题而是同源跨页面通信的解决方案）
11、HTML状态码301、302、401、404，分别代表什么意义？
常见的 HTTP 状态码：
- 200 - 请求成功
- 301 - 永久移动，资源（网页等）被永久转移到其它URL
- 302 - 临时重定向
- 304 - 所请求的资源未修改，此时走的是协商缓存，服务器不会返回任何资源。
- 401 - 请求要求用户的身份认证
- 404 - 请求的资源（网页等）不存在
- 500 - 内部服务器错误
- 502 - 网关错误（作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应）
- 503 - 由于超载或系统维护，服务器暂时的无法处理客户端的请求。
- 504 - 未获取到请求（充当网关或代理的服务器，未及时从远端服务器获取请求）
14、PC端和移动端哪个做的多，PC端和移动端有什么区别？你觉得PC端和移动端哪个比较好一些？
8、你做的页面通常在哪些浏览器测试过？这些浏览器的内核分别是什么？经常遇到的兼容性问题有哪些？怎么会出现？解决方法是什么？移动端主要考虑什么？
