前端框架前端

前端面试常见问题——Web篇

2020-10-06  本文已影响0人  Marvel_Dreamer

1. web安全及防护

2. 网站性能优化

3. 首屏优化

4. 优化大量图片加载

5. 过万条数据渲染（requestAnimationFrame）

<script>
  // 插入十万条数据
  const total = 100000;
  // 一次插入20条
  const once = 20;
  // 渲染数据总共需要几次
  const loopcount= total / once;
  let countOfRender = 0;
  let ul = document.queryselector("ul");
  function add() {
    // 优化性能，把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < once; i++) {
      const li = document.createElement("li");
      li.innerText = Math.floor(Math.random(）* total);
      fragment.appendChild(li);
    }
    ul.appendchild(fragment);
    countOfRender ++;
    loop();
  }
  function loop() {
    if (countOfRender < loopcount) {
      window.requestAnimationFrame(add);
    }
  }
  loop();
</script>

6. 移动端Web页面适配

7. 前端监控

8. 会话跟踪

9. 从浏览器地址栏输入url到显示页面的步骤

10. 浏览器缓存

11. 浏览器存储

特性 cookie localStorage sessionStorage indexDB
数据生命周期 一般由服务器生成，可设置过期时间 除非被清理否则一直存在 页面关闭即被清理 除非被清理否则一直存在
数据存储大小 4K 5M 5M 无限
与服务端通信 每次携带在header中 不参与 不参与 不参与

12. SEO(搜索引擎优化)

13. 渲染优化

14. 预解析、预加载和预渲染

<meta  http-equiv="x-dns-prefetch-control" content="on">
<link  rel="dns-prefetch" href="//www.zhix.net">
<link  rel="dns-prefetch" href="//api.share.zhix.net">
<link  rel="dns-prefetch" href="//bdimg.share.zhix.net">

<meta  http-equiv="x-dns-prefetch-control" content="off">

<link rel="preload" as="script" href="super-important.js">
<link rel="preload" as="style" href="critical.css">

<link rel="prerender" href="http://example.com">

15. 浏览器架构与内核

1、IE浏览器内核:Trident内核，也是俗称的IE内核;
2、Chrome浏览器内核:统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核;
3、Firefox浏览器内核:Gecko内核，俗称Firefox内核;
4、Safari浏览器内核:Webkit内核;
5、Opera浏览器内核:最初是自己的Presto内核，后来是Webkit，现在是Blink内核;
6、360浏览器、猎豹浏览器内核:IE+Chrome双内核;
7、搜狗、遨游、QQ浏览器内核: Trident(兼容模式)+Webkit(高速模式)﹔
8、百度浏览器、世界之窗内核:IE内核;
9、2345浏览器内核:以前是IE内核，现在也是IE+Chrome双内核;

16. Service Worker

//index.js
if (navigator.serviceWorker) {
  navigator.serviceworker
    .register('sw.js')
    .then(function(registration） {
      console.log('service worker 注册成功'）
    })
    .catch(function(err) {
      console.log('servcie worker 注册失败'）
    })
}
// sw.js 监听install事件，回调中缓存所需文件
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll(['./index.html', './index.js'])
    })
  )
})
//拦替所有请求事件, 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
self.addEventListener('fetch', e =>{
  e.respondWith(
    caches.match(e.request).then(function(response){
      if (response）{
        return response
      }
      console.log('fetch source')
    })
  )
})

17. Token

18. webpack

19. gulp是什么

20. 渐进增强和优雅降级

21. 为什么利用多个域名来存储网站资源

22. 网页制作会用到的图片格式

23. 负载均衡

24. CDN

25. 前后端路由的区别

把不同路由对应的不同内容掌握在前端，如vue中的vue-router、react的ReactRouter等。出现在单页面应用中，页面中公共部分不变，只改变部分内容的使用。路由切换时根据不同的路由动态加载不同的组件，不刷新页面。
优点：实现前后端的分离，缓解服务器压力，不需要每次从服务器获取，快速展现给用户，用户体验更好。

见于多页面应用中。每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示, 返回不同的页面,浏览器会刷新页面。

26. WEB标准以及W3C标准

27. web标准的可用性、可访问性、可维护性

28. 谈谈你对重构的理解

上一篇 下一篇

猜你喜欢

热点阅读