前端高频面试题总结（三）

一：js的作用域？

• JS作用域也就是JS识别变量的范围，
• 作用域链也就是JS查找变量的顺序
  先说作用域，JS作用域主要包括全局作用域、局部作用域和ES6的块级作用域
  全局作用域：也就是定义在window下的变量范围，在任何地方都可以访问，
  局部作用域：是只在函数内部定义的变量范围
  块级作用域：简单来说用let和const在任意的代码块中定义的变量都认为是块级作用域中的变量，例如在for循环中用let定义的变量，在if语句中用let定义的变量等等
  注：尽量不要使用全局变量，因为容易导致全局的污染，命名冲突，对bug查找不利。
  2️而所谓的作用域链就是由最内部的作用域往最外部,查找变量的过程.形成的链条就是作用域链

二：h5表单的新属性？

<form>
        邮箱：<input type="email"><br/>
        数量：<input type="number" value="20" max="25" min="18"><br/>
        电话：<input type="tel"><br/>
        网址：<input type="url"><br/>
        范围：<input type="range" max="100" min="0"><br/>
        颜色：<input type="color"><br/>
        时间:<input type="time"><br/>
        日期：<input type="date"><br/>
        日期时间：<input type="datetime-local"><br/>
        月份：<input type="month"><br/>
        星期：<input type="week"><br/>
        提交：<input type="submit">
    </form>

• 其中的属性及意义为：

1. email帮我们自动校验了格式。

2. tel：由于全球号码格式不一样，格式不太好校验不过帮我们在移动端点击该输入框会切换到数字键盘。

3. url：帮我们校验了格式不过需要注意的是网址前面需要加上：http://。

4. number： 类型用于应该包含数值的输入域。还能设置输入数字的范围

5. range ：类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。还能够设定数字的限定：

6. placeholder:占位符，提示文本

7. autofocus:自动获取焦点

8. autocomplete:自动完成，on打开,off关闭 1.必须成功提交过 2.必须有name属性

9. required:必须输入，如果没有输入会阻止提交

10. pattern:正则表达式的验证

11. multiple:允许选择多个文件,在邮箱中允许输入多个邮箱地址，用,分割

12. required必须输入，如果没有输入会阻止提交

三：sass和less的区别？

less和sass最主要的区别是：
less是通过Javascript编译，而sass是通过ruby编译的，如果没有引入前端工程化，less会消耗客户端性能，sass会消耗服务端性能，但是引入前端工程化的话，less和sass在打包阶段都会转化成css，所以不会有区别，只是sass是基于ruby，所以每次npm的时候相对慢一点点。

四：如何实现优化问题

技术方面：
　1、尽量减少HTTP请求个数
　2、避免空的src和href
　3、使用gzip压缩内容
4、把CSS放到顶部
　5、把JS放到底部
　6、将CSS和JS放到外部文件中
　7、延迟加载
8、预加载
　9、尽量减少iframe的个数
　10、避免404
　11、减少Cookie的大小
　12、优化图像
　
（1）代码层面：
• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• 长列表性能优化
• 事件的销毁
• 图片资源懒加载
• 路由懒加载
• 第三方插件的按需引入
• 优化无限列表性能
• 服务端渲染 SSR or 预渲染
（2）Webpack 层面的优化
• Webpack 对图片进行压缩
• 减少 ES6 转为 ES5 的冗余代码
• 提取公共代码
• 模板预编译
• 提取组件的 CSS
• 优化 SourceMap
• 构建结果输出分析
• Vue 项目的编译优化
（3）基础的 Web 技术的优化
• 开启 gzip 压缩
• 浏览器缓存
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶颈

五：服务端渲染？

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
即：SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。
服务端渲染 SSR 的优缺点如下：
（1）服务端渲染的优点：
• 更好的 SEO： 因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面；
• 更快的内容到达时间（首屏加载更快）： SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间；
（2) 服务端渲染的缺点：
• 更多的开发条件限制： 例如服务端渲染只支持 beforCreate 和 created 两个钩子函数，这会导致一些外部扩展库需要特殊处理，才能在服务端渲染应用程序中运行；并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序 SPA 不同，服务端渲染应用程序，需要处于 Node.js server 运行环境；
• 更多的服务器负载：在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 ( high traffic ) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。
如果没有 SSR 开发经验的同学，可以参考这篇文章《Vue SSR 踩坑之旅》，里面 SSR 项目搭建以及附有项目源码。