前端面试题汇总

前端面试题汇总

CSS

• CSS的优先级
  !important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
• 重绘、回流=布局、绘制：
  在发生变化时，浏览器会尽可能做出最小的响应。因此，元素的颜色改变后，只会对该元素进行重绘（repaint）。元素的位置改变后，只会对该元素及其子元素（可能还有同级元素）进行布局（layout）和重绘（repaint）。添加 DOM 节点后，会对该节点进行布局（layout）和重绘（repaint）。一些重大变化（例如增大“html”元素的字体）会导致缓存无效，使得整个呈现树都会进行重新布局（relayout）和绘制（repaint）。

作者：姜小抖
链接：https://juejin.im/post/5c137e7c6fb9a049f7461639
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

网络篇

• 一个页面从输入URL到加载完成发生了什么？越详细越好。

1. 在接收到用户输入的网址后，浏览器会开启一个线程来处理这个请求，对用户输入的URL地址进行分析判断，如果是HTTP协议就按照HTTP方式来处理。
2. 调用浏览器引擎中的对应方法，比如WebView中的loadUrl方法，分析并加载这个URL地址。通过DNS解析获取该网站地址对应的IP地址，查询完成后连同浏览器的Cookie、userAgent等信息向网站目的IP发出请求。
   
3. 进行HTTP协议会话（三次握手），浏览器客户端向Web服务器发送报文。进入网站后台上的Web服务器处理请求，如Apache、Tomcat、Nginx、Node.js 等服务器。
4. 进入部署好的后端应用，如PHP、Java、 JavaScript、 Python 等后端程序，找到对应的请求处理逻辑，这期间可能会读取服务器缓存或查询数据库等。
5. 服务器处理请求并返回响应报文，此时如果浏览器访问过该页面，缓存上有对应资源，会与服务器最后修改记录对比，一致则返回304，否则返回200和对应的内容。
6. 浏览器开始下载HTML文档（响应报头状态码为200时）或者从本地缓存读取文件内容（浏览器缓存有效或响应报头状态码为304时）。
7. 浏览器根据下载接收到的HTML文件解析结构建立DOM文档树，并根据HTML中的标记请求下载指定的MIME类型文件（如CSS、JavaScript 脚本等），同时设置缓存等内容。
8. 页面开始解析渲染DOM、CSS根据规则解析并结合DOM文档树进行网页内容布局和绘制渲染，JavaScript 根据DOM API操作DOM，并读取浏览器缓存、执行事件绑定等，页面整个展示过程完成。
   
   
9. 关闭TCP连接（四次挥手）。关闭TCP连接（四次挥手）。