面试官常问的 web前端问题（三）

最新推荐文章于 2024-01-21 09:15:00 发布

一只媛球球

最新推荐文章于 2024-01-21 09:15:00 发布

阅读量1.4k

点赞数 5

分类专栏：经典面试题文章标签： java vue html css web

本文链接：https://blog.csdn.net/qq_44641053/article/details/103811264

版权

经典面试题专栏收录该内容

32 篇文章 12 订阅

订阅专栏

面试官常问的 web前端问题 21-30

21.jQuery 中的选择器和 css 中的选择器有区别吗？
22.web 前端开发，如何提高页面性能优化？
23.什么是 Bootstrap?为什么要使用 Bootstrap？
24.对于各类尺寸的设备，Bootstrap 设置的 class 前缀分别是什么？
25.什么是 Bootstrap 网格系统（Grid System）？
26.Bootstrap 网格系统列与列之间的间隙宽度是多少？
27.介绍一下 easyui 的布局
28.Easyui 如何实现表单验证
29.Easyui 常用的组件有哪些？
30.Vue.js 介绍

21.jQuery 中的选择器和 css 中的选择器有区别吗？

jQuery 选择器支持 CSS 里的选择器，jQuery 选择器可用来添加样式和添加相应的行为；
CSS 中的选择器是只能添加相应的样式

有一定的区别：
1、首先说两者是属于不同的两门语言，jQuery是属于js的一个框架，jQuery选择器是js里面的选择器，css是另一门不同于js的语言，CSS选择器是css选择器，则两者在根本上是不同的。
2、但是两者是有交集的，都是作为网页或者浏览器解析的语言，而js可以通过修改浏览器的dom对象来实现对css修改或者是控制。
3、可以简单的这样区分两者，css选择器用语css当中，js选择器应用于js当中，只不过有时两者使用相同的id标识来选择对象。

jQuery选择器和CSS选择器的写法十分类似，都具有隐式迭代的特点，无需循环遍历符合选择器要求的每个元素，使用起来相对方便，通常，把css选择器用 $("")包起来就成了一个jQuery选择器
在这里插入图片描述

22.web 前端开发，如何提高页面性能优化？

内容方面：
1.减少 HTTP 请求 (MakeFewerHTTPRequests)
2.减少 DOM 元素数量 (ReducetheNumberofDOMElements)
3.使得 Ajax 可缓存 (MakeAjaxCacheable)

针对 CSS：
1.把 CSS 放到代码页上端 (PutStylesheetsattheTop)
2.从页面中剥离 JavaScript 与 CSS(MakeJavaScriptandCSSExternal)
3.精简 JavaScript 与 CSS(MinifyJavaScriptandCSS)
4.避免 CSS 表达式 (AvoidCSSExpressions)

针对 JavaScript ：
1.脚本放到 HTML 代码页底部 (PutScriptsattheBottom)
2. 从页面中剥离 JavaScript 与 CSS(MakeJavaScriptandCSSExternal)
3. 精简 JavaScript 与 CSS(MinifyJavaScriptandCSS)
4. 移除重复脚本 (RemoveDuplicateScripts)

面向图片(Image)：
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSSSprites 技巧对图片优化

前端性能优化
思路：分析一个页面从输入 URL 到页面加载显示完成的所有步骤，采用 分治法 逐步优化。

优化DNS查询
减少域名：尽量把所有的资源放在一个域名下。
一个域名同时可以发4（IE8）或 8个请求（Chrome），请求文件少，用1个域名，文件多用多个域名。与3权衡。
优化TCP协议
TCP连接复用，使用keep-alive：连接回复加上请求头：keep-alive。
第一次请求不断开，第二次请求复用。
使用http 2.0版本：多路复用，连接复用率会更高
优化发送HTTP请求
合并JS或CSS文件
inline image：使用data:url scheme来内连图片
减小cookie体积，每个请求都会附带cookie，所以不要滥用cookie。
合理使用CasheControl代替发送HTTP请求
同时发送多个请求（浏览器自带）IE8可以同时请求下载4个的css文件，Chrome可以同时请求下载8个。
优化接受响应
设置Etags：浏览器重复与请求服务器一样的文件，ETag响应304。
Gzip压缩大文件使用macos gzip，npm server gzip gzip 文件名
其响应头为Content-Encodinging：gzip，先压缩接收到再解压缩。缺点：耗费浏览器CPU，权衡
优化DOCTYPE
不能不写，不能写错
优化CSS、JS请求
使用CDN：用CDN请求静态资源同时可以增大同时下载数量，内容分发网络（CDN）可以使请求总时间降低，也可以减少cookie
CSS放在head里：使其尽早下载，因为chrome需要下载完所有的css后才渲染页面
JS放在body里的最后：尽早显示整个页面，获取节点。

使用懒加载
组件懒加载

 const xxx =()=>import('./components/xxx.vue')

路由懒加载

优化用户体验
用户看到哪些内容就请求哪些内容
加一个loading动画用户会感觉时间变快

减少监听器，使用事件委托

    <body>
        <ul>
            <li>1</li><li>2</li><li>3</li><li>4</li>
        </ul>
        <script>
            let liList = document.querySelectorAll('li')

            // liList[0].onclick = ()=>console.log(1)
            // liList[1].onclick = ()=>console.log(2)
            // liList[2].onclick = ()=>console.log(3)
            // liList[3].onclick = ()=>console.log(4)
            //监听太多

            let ul = document.querySelector('ul')

            ul.onclick = (e) => {
                if (e.target.tagName === 'LI') {
                    console.log(e.target.innerText)

                }
            }//减少监听，采用事件委托
        </script>
    </body>

优化图片大小
图片压缩

减少或合并DOM操作或使用虚拟DOM

// 不好的方式
var elem = $('#elem');
for (var i = 0; i < 100; i++) {
 elem.append('<li>element '+i+'</li>');
}

// 好的方式
var elem = $('#elem' ),
arr = [];
for (var i = 0;  i < 100; i++) {
  arr.push('<li>element ' +i+'</li>' );
}
elem.append(arr. join(''));
12. 对大量数据计算使用缓存
// data.length === 100000
   for(var i = 0;i < data.length;i++){
     // do something...
   }
   //上面的代码没有下面的好
   for(var i = 0,len = data.length;i < len;i++){
     // do something...
   }

使用setTimeout降低调用接口频率

23.什么是 Bootstrap?为什么要使用 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap 具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点，所以 Bootstrap 被广泛应用。

24.对于各类尺寸的设备，Bootstrap 设置的 class 前缀分别是什么？

超小设备手机（<768px）：.col-xs;
小型设备平板电脑（>=768px）：.col-sm;
中型设备台式电脑（>=992px）：.col-md;
大型设备台式电脑（>=1200px）：.col-lg;

25.什么是 Bootstrap 网格系统（Grid System）？

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

26.Bootstrap 网格系统列与列之间的间隙宽度是多少？

间隙宽度为 30px（一个列的每边分别是 15px）。

27.介绍一下 easyui 的布局

easyui：分为上，中，下，左，
右面板一般在工作中使用上（企业 logo,登录,退出）；
左（菜单）；
中（展示数据）；

28.Easyui 如何实现表单验证

提供了一个 validatebox 插件来验证一个表单， input 表单根据 validType 属性来应用验证；
validType="email"邮箱验证； required=“true” 必填项；

<input class="easyui-validatebox" type="text" name="name" validType="email" required="true"></input>

29.Easyui 常用的组件有哪些？

datagrid：数据表格；
window：窗口；
form：表单；
layout：布局；
tabs：选项卡；
according：折叠面板；
combobox：下拉列表；

30.Vue.js 介绍

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，同时拥有非常容易上手的 API； Vue.js 是一个构建数据驱动的 Web 界面的库。 Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

一只媛球球

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
面试官常问的 web前端问题（三）

面试官常问的 web前端问题 21-30 21.jquery 中的选择器和 css 中的选择器有区别吗？22.web 前端开发，如何提高页面性能优化？23.什么是 Bootstrap？以及为什么要使用 Bootstrap？24.对于各类尺寸的设备，Bootstrap 设置的 class 前缀分别是什么？25.什么是 Bootstrap 网格系统（Grid System）？26.Bootstra...
复制链接

扫一扫