最新大厂前端面试题-笔试题2.doc

前端面试相关知识点 从上述文件中，我们可以提取出以下几个重要的知识点： 一、浏览器的缓存机制 浏览器的缓存机制可以分为强制缓存和协商缓存两类。强制缓存的字段分别是 Expires 和 Cache-Control，并且 Cache-Control 的优先级高于 Expires。协商缓存的字段有 Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中 Etag / If-None-Match 的优先级比 Last-Modified / If-Modified-Since 高。 Last-Modified 字段，它的值是该资源文件在服务器最后被修改的时间。If-Modified-Since 则是客户端再次发起该请求时，携带上次请求返回的 Last-Modified 值。 Etag 是服务器响应请求时，返回当前资源文件的一个由服务器生成的唯一标识。If-None-Match 则是客户端再次发起该请求时，携带上次请求返回的唯一标识 Etag 值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。 二、从输入 URL 到页面加载的过程 从输入 URL 到页面加载的过程可以分为以下几个步骤： 1. 浏览器的地址栏输入 URL 并按下回车。 2. 浏览器查找当前 URL 是否存在缓存，并比较缓存是否过期。 3. DNS 解析 URL 对应的 IP。 4. 根据 IP 建立 TCP 连接（三次握手）。 5. HTTP 发起请求。 6. 服务器处理请求，浏览器接收 HTTP 响应。 7. 渲染页面，构建 DOM 树。 8. 关闭 TCP 连接（四次挥手）。 三、事件委托 事件委托是指当事件触发时，把要做的事委托给父元素来处理。这种机制可以减少事件监听器的数量，提高页面的性能。 四、中文文本标签的单行和多行省略处理 中文文本标签的单行省略可以使用 text-overflow:ellipsis 属性来实现，需要加宽度 width 属性来兼容部分浏览。多行文本省略可以使用 display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden; 属性来实现。 五、性能优化方法 性能优化方法可以分为以下几个方面： 1. 内容优化：减少 HTTP 请求、合并文件、精灵图、DNS 缓存、图片懒加载、组件懒加载等。 2. 服务端优化：使用 CDN、expires/cache-control 强缓存、Etag/Last-modified 协商缓存、GZIP 压缩等。 3. CSS 优化：将样式表放到页面顶部、不要使用 CSS 表达式等。 4. JS 优化：将脚本放到页面底部、压缩 JS 和 CSS、tree-shaking、减少对 DOM 的直接操作等。 5. 图片优化：小图使用 base64、小小图使用精灵图等。 这些知识点都是前端开发中非常重要的基础知识，了解这些知识点可以帮助开发者更好地理解浏览器的工作机制、提高页面的性能和用户体验。