2018年前端笔试高频题精选(二)
今天继续来发几道2018年前端笔试高频题,这些题都是小编下载了今年BATJ、美团、小米等一线互联网公司前端笔试真题精选出来的,大家一定要好好学学,以备进军名企之用。
1、规避javascript多人开发函数重名问题
命名空间
封闭空间
js模块化mvc(数据层、表现层、控制层)
seajs
变量转换成对象的属性
对象化
2、请说出三种减低页面加载时间的方法
压缩css、js文件
合并js、css文件,减少http请求
外部js、css文件放在最底下
减少dom操作,尽可能用变量替代不必要的dom操作
3、你所了解到的Web攻击技术
(1)XSS(Cross-Site Scripting,跨站脚本攻击):指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
(2)SQL注入攻击
(3)CSRF(Cross-Site Request Forgeries,跨站点请求伪造):指攻击者通过设置好的陷阱,强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
4、web前端开发,如何提高页面性能优化?
内容方面:
1.减少 HTTP 请求 (Make Fewer HTTP Requests)
2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可缓存 (Make Ajax Cacheable)
针对CSS:
1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)
2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4.避免 CSS 表达式 (Avoid CSS Expressions)
针对JavaScript :
1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4. 移除重复脚本 (Remove Duplicate Scripts)
面向图片(Image):
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSS Sprites 技巧对图片优化
5、前端开发中,如何优化图像?图像格式的区别?
优化图像:
1、不用图片,尽量用css3代替。 比如说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用CSS达成。
2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!
3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
基本上,内容图片多为照片之类的,适用于JPEG。
而修饰图片通常更适合用无损压缩的PNG。
GIF基本上除了GIF动画外不要使用。且动画的话,也更建议用video元素和视频格式,或用SVG动画取代。
4、按照HTTP协议设置合理的缓存。
5、使用字体图标webfont、CSS Sprites等。
6、用CSS或JavaScript实现预加载。
7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩,动态、静态图片,压缩比率优于GIF、JPEG、JPEG2000、PG等格式,非常适合用于网络等图片传输。
图像格式的区别:
矢量图:图标字体,如 font-awesome;svg
位图:gif,jpg(jpeg),png
区别:
1、gif:是是一种无损,8位图片格式。具有支持动画,索引透明,压缩等特性。适用于做色彩简单(色调少)的图片,如logo,各种小图标icons等。
2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片,不适合做色彩简单(色调少)的图片,如logo,各种小图标icons等。
3、png:PNG可以细分为三种格式:PNG8,PNG24,PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
关于透明:PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位(256阶)的alpha通道透明;
优缺点:
1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。
6、浏览器是如何渲染页面的?
渲染的流程如下:
1.解析HTML文件,创建DOM树。
自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
3.将CSS与DOM合并,构建渲染树(Render Tree)
4.布局和绘制,重绘(repaint)和重排(reflow)
7、Ajax的优缺点及工作原理?
定义和用法:
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
优点:
1.减轻服务器的负担,按需取数据,最大程度的减少冗余请求
2.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
3.基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离
缺点:
1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
2.AJAX只是局部刷新,所以页面的后退按钮是没有用的.
3.对流媒体还有移动设备的支持不是太好等
AJAX的工作原理:
1.创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))
2.判断数据传输方式(GET/POST)
3.打开链接 open()
4.发送 send()
5.当ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status)200-300之间或者304(缓存)执行回调函数
8、Web Storage与Cookie相比存在的优势:
(1)、存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。
(2)、存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。
(3)、更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。
(4)、独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。
9、sessionStorage 、localStorage 和 cookie 之间的区别
共同点:用于浏览器端存储的缓存数据
不同点:
(1)、存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;
web storage,会将数据保存到本地,不会造成宽带浪费;
(2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;
(3)、数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;
sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;
(4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
转载于:https://www.cnblogs.com/shaozhu520/p/10106480.html
2018年前端笔试高频题精选(二)相关推荐
- 美图2018校招前端笔试编程题数组去重
题目只能记个大概了,里面比较重要的就是数组去重 重点:用空间换取时间,一层循环实现了数组的去重,时间复杂度o(n). 1. 先对arr_copy排序(注意啊arr_copy是有序数组了) 2. arr ...
- 哔哩哔哩2018校招前端笔试
前言 前几日,哔哩哔哩在电子科大清水河校区举行了校招宣讲会.B站不用多说,中国最大的同性交友网站,不去工作也能去看看. 当晚便进行了部分笔试,下面是我参加的前端笔试试题和我自己的解答,分享给大家. 博 ...
- 腾讯2018秋招笔试真题(2)
腾讯2018秋招笔试真题 3.画家小Q [题目描述]画家小 Q 又开始他的艺术创作.小 Q 拿出了一块有 NxM 像素格的画板, 画板初始状态是空白 的,用'X'表示. 小 Q 有他独特的绘画技巧,每 ...
- 腾讯2018秋招笔试真题(1)
腾讯2018秋招笔试真题 小Q的歌单 [题目描述]小 Q 有 X 首长度为 A 的不同的歌和 Y 首长度为 B 的不同的歌,现在小 Q 想用这些歌组成一个 总长度正好为 K 的歌单,每首歌最多只能在歌 ...
- 腾讯2018秋招笔试真题——安排机器
本文参考自腾讯2018秋招笔试真题--安排机器 查看原文: 原文地址 题目描述:小Q的公司最近接到m个任务,第i个任务需要Xi的时间去完成,难度等级为yi. 小Q拥有n ...
- 名企笔试真题精选(三)
哎,自己没什么时间也没什么耐性更没什么毅力天天学习天天向上,于是很多搜罗来不及看的东东先分享给童鞋们吧 3. 软件业巨无霸--微软笔试面试题目(1) 智力题 1.烧一根不均匀的绳子,从头烧到尾总共需 ...
- 前端实习生笔试_一道来自美图的实习生前端笔试算法题
这道题目来源于我正在寻找实习机会的弟弟,他笔试的时候发挥不是很好,这道题目一直超时,就把题目拿过来问我有没有比较高效的做法.废话不多说,直接看题目吧. 题目描述 有一款叫做空间回廊的游戏,游戏中有着n ...
- 京东校招java笔试题_京东2018校招技术笔试编程题汇总
1.回文 分析 暴力枚举一下check回文,可以确定出最后答案的一半,就可以得到答案了. 参考代码 #include using namespace std; bool isPalindrome(st ...
- CVTE前端笔试编程题
这些题目是做完笔试之后,在别的地方找到的,现在附上. 1.(1)这题考察的怎么把参数转换为数组,然后再截取你想要的位数. function C(){var a_args=Array.prototype ...
最新文章
- JAVA实现ftp服务端_用 java 实现FTP SERVER(附源码)
- 操作系统:哲学家进餐问题
- ubuntu 电源按钮操作_桌面应用|在 Ubuntu 中使用 Slimbook Battery Optimizer 切换电源模式...
- Eclipse多行注释方法
- c语言基本字符集ppt,C语言的字符集和保留字知识讲稿.ppt
- 电视机原理图_电工电气,如何看电气原理图和接线图,如何设计图纸?
- 常用的匹配正则表达式
- php 5.3新增的闭包语法介绍function() use() {}
- Linux 网页交互、curl
- Binaural Microphone
- 老弟教你用CSS和JS实现曾经风靡一时的微信打飞机游戏
- 黑马全套Java教程(七)
- 机器学习系列5---偏差和方差分解
- 挂代理后git依然无法XXX
- Python Web开发技巧III
- Unity 打开文件夹
- 02335网络操作系统
- 2021 Google 开发者大会进行时: 汇聚开发者合力,共建全球技术生态
- 如何学习计算机实现攻防
- 【图像分类】实现猫狗图片的训练集和测试集的分类:python + Asirra
热门文章
- XSSFWorkbook 设置单元格样式_这个 Excel 技巧太实用了,如何快速套用自定义的单元格样式?...
- Stimulsoft.Report的代码实现功能自学整理(一)
- js 中编码(encode)和解码(decode)的三种方法(传递是特殊符号丢失问题,如‘+’)
- 关于Ajax的英雄联盟查询英雄案例
- 《中国人史纲》读书笔记:第八章、第九章 公元前第六、五世纪
- MATLAB使用GPU加速计算
- 记一次服务器被攻击后的经历
- 第六届团队程序设计天梯赛 全题目解析讲解
- 高效率科研神器——小软件、大能量
- CVPR 2021 Oral | Transformer再发力!华南理工和微信提出UP-DETR:无监督预训练检测器...