前端面试常见题目

1.浏览器层面
因为浏览器对同一个host（域名）最多同时建立6个tcp链接，所以减少css、js资源数量可以提升加载速度，
可以考虑将js/css 文件合并，异步加载。
1.1如果有条件的话，可以启用支持http2的服务器，
    http2相对于http1优势
    采用二进制格式传输数据，相对于文本格式，解析更加快且健壮，
    同时采用了二进制分帧，传输性能更高，延迟更低，吞吐率更高。
    
    对消息头进行了压缩，减少带宽。
    
    多路服用，让数据流使用同一个链接，使得tcp使用更加高效。
   
    可以使用 server push 服务器推送，主动推送所需资源，减少了浏览器一轮主动请求。

对于可预见的高频访问页面的，并且这个界面并非第一个页面，可以考虑在入口处使用 reload标签
提前加载资源，提高该页面的访问速度。

2.配置浏览器缓存策略
   强缓存：通过Expires Cache-control 相应头配置缓存过期时间
   协商缓存: 通过last-modified & if-modified-since 此策略是通过读取资源修改时间判定是否更新
                  通过 Etag 和 if-non-match 此策略是通过资源的hash标识，比如md5 sha1（可以通过内容hash）判断是否更新
                  如果没有更新，返回状态码304，浏览器将从缓存中读取资源，减少请求。

3.资源层面，
对静态资源做cnd缓存，提高访问速度的同时减少对服务器的请求。
使用gzip等压缩方式，减少体积。
图片方面
   如果可能的话，使用字体图标代替图片图标
   采用精灵图
   大图片缩略图处理，懒加载处理

4.js代码层面
尽量少用全局变量，除了容易命名污染，不利于垃圾回收
缓存高频访问且深层级的变量
使用防抖节流减少请求和计算压力
对使用闭包的情况，注意释放作用域链接，减少内存。
尽量减少dom操作，对于批量操作可以考虑 文档碎片 document.createDocumentFragment() 方法
对于cpu密集型操作，由于 js 单线程的特性，可以考虑使用 worker，防止阻塞主线程

5.css层面
谨慎使用 @import引入，
 因为每一次的 @import 都会触发一次http请求
 @import 可能造成阻塞渲染，因为import引入的css会在页面加载完成之后加载，
期间会出现样式问题。
 多个@import 可能会导致样式紊乱的问题，无法预期的先后加载解析。
利用工具除去无用css，比如webpack中的 purify-cssPlugin
性能方面
      尽量避免使用通配符选择器
      合理使用后代选择器
      减少使用 伪类选择器
动画方面
      优先使用 transform 和 opacity属性进行动画
      使用 requset

白屏时间
  使用骨架屏或loading动画提升用户体验