面试学习2

发表于

正则去掉字符串首尾空格

  • str.replace(/(^\s)|(\s$)/g, ‘’)

输入URL发生了什么

  1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询（浏览器缓存->系统缓存->路由器缓存）。这能使浏览器获得请求对应的 IP 地址。
  2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
  3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
  4. 此时，Web 服务器提供资源服务，客户端开始下载资源。
  5. 浏览器解析HTML生成DOM树，在根据CSS生成渲染树；浏览器缓存相应的信息，查看是否需要更新缓存；呈现页面。

缓存4个字段及优先级

  • Expires
  • Cache-control：max-age=6000(毫秒)/no-cache/no-store/private/public
  • last-modified
  • Etag

强缓存>弱缓存
cache-control>expires
ETag > Last-Modified

ctrl f5 所发送的请求头包含no cache，才会跳过缓存；f5发送请求头中会触发协商缓存

性能优化：重排重绘、事件委托、异步无阻塞加载js、懒加载、虚拟列表、缓存、代码分割、雪碧图、减少HTTP请求

  • 编码优化
    • 提高数据读取速度，缓存对象成员值
    • DOM
      • 缓存DOM属性和元素
      • 重排、重绘时，先让元素脱离文档流，操作完毕后再插入文档流，减少重排重绘次数
      • 事件委托
    • 流程控制
      • 避免使用for in
      • 减少迭代
  • 静态资源优化
    • 压缩静态文本？
    • 图片优化
      • 响应式图片
      • 视频替换gif图
  • 交付优化
    • 异步无阻塞加载JS
      • script放底部
      • deferer async
      • 动态创建script标签
      • ajax请求js代码注入页面
    • 懒加载
    • 优先加载关键css
    • 资源提示
      • dns-prefetch
      • preconnect
      • prefetch
      • prerender
      • preload
    • 快速响应的用户界面
      • 骨架屏
      • loading动画
  • 构建优化
    • 预编译
    • 代码分割
    • 服务端渲染
    • import函数导入模块
    • 善用缓存

css3动画和js动画的区别

  • css
    • 浏览器对前者会进行一定的优化
    • 自然降级
  • js
    • 兼容性好
    • 效果丰富

移动端兼容

点击事件有300ms延迟，可以用fastclick解决，或者使用zepto的touch模块

非可点击元素监听click事件，需要设置cursor: pointer

h5底部输入框被键盘遮挡

css动画页面闪白、卡顿，解决：可能地使用合成属性transform和opacity来设计CSS3动画

移动端布局

  • 响应式布局，媒体查询
  • rem，根据font-size来布局
  • 设置viewport中的width
  • vm + rem 对于vm的兼容性，可以使用viewport-units-polyfill解决

1像素问题

  • 物理像素和逻辑像素，之间存在一个比例关系，可以通过window.devicePixelRatio获取，所以设计稿上的1px，在实际上会比较粗
  • 解决方案
    • 媒体查询，根据-webkit-min-device-pixel-ratio的不同，来设置小数像素
    • 用js来获取这个比例，再设置小数像素
    • border-image
    • background-image