【JavaScript精华系列】JavaScript高级程序面试题汇总之Web综合问题
三年前端开发人员这样背面试题 迟早进大厂系列 玩转 JavaScript 。点赞、收藏、评论、关注、三连支持!
Web综合问题
文章目录
- Web综合问题
- 1、前端需要注意那些SEO
- 2、 img标签的`title`和`alt`有什么区别
- 3、 HTTP的几种请求方法用途
- 4、从浏览器地址输入url到显示页面发生了什么
- 5、如何进行网站性能优化
- 6、你有用过哪些前端性能优化的方法
- 7、谈谈性能优化问题
- 8、前端性能优化最佳实践
- 9、HTTP状态码及其含义
- 10、语义化的理解
- 11、浏览器内核的理解
- 12、最常见的浏览器内核
- 13、HTML5新特性、移除了的元素
- 14、请描述下cookies、sessionStorage、localStorage的区别
- 15、iframe有哪些缺点
- 16、WEB标准以及W3C 的标准是什么
- 17、xhtml和html的区别
- 18、Doctype的作用?严格模式与混杂模式如何区分?有何意义?
- 19、HTML全局属性有哪些
- 20、canvas和svg区别
- 21、HTML5为什么只需要写``
- 22、如何在页面上实现一个圆形的可点击区域
- 23、网页验证码是干嘛的,为了解决什么安全问题
- 24、怎么处理移动端1px被渲染成2px问题(viewport)
- 25、渲染优化
- 26、meta viewport 相关
- 27、浏览器的内核分别是什么
- 28、为什么利用多个域名来存储网站资源会更有效
- 29、简述一下src与href的区别
- 30、你知道的网页制作会用到的图片格式
- 31、一次js请求一般情况下有哪些地方会有缓存处理
- 32、一个页面有大量图片,加载慢,怎么优化这些图片的加载
- 33、web开发中会话跟踪的方法有哪些
- 34、HTTP request报文结构是怎么的
- 35、HTTP response报文结构是怎么的
- 36、cookie的弊端
1、前端需要注意那些SEO
- 合理的
title
、description
、keywords
:搜索对着三项的权重逐个减小,title
值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title
要有所不同;description
把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description
有所不同;keywords
列举出重要关键词即可 - 语义化的
HTML
代码,符合W3C规范:语义化代码让搜索引擎容易理解网页 - 重要内容
HTML
代码放在最前:搜索引擎抓取HTML
顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取 - 重要内容不要用
js
输出:爬虫不会执行js获取内容 - 少用
iframe
:搜索引擎不会抓取iframe
中的内容 - 非装饰性图片必须加
alt
- 提高网站速度:网站速度是搜索引擎排序的一个重要指标
- 对于SPA单页面应用我们可以使用SSR(前后端同构)的解决方案,通过Node返回HTML静态页面,进行SEO
- 还可以判断网站的读取者,如果是用户,则用SPA展示,如果是爬虫则用后端渲染的方式返回HTML页面
2、 img标签的title
和alt
有什么区别
- 通常当鼠标滑动到元素上的时候显示.
alt
是img
的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。
3、 HTTP的几种请求方法用途
GET
方法
发送一个请求来取得服务器上的某一资源POST
方法
向URL指定的资源提交数据或附加新的数据PUT
方法
跟POST
方法很像,也是像服务器提交数据。但是,它们之间有不同。PUT指定了资源在服务器上的位置,而POST没有HEAD
方法
只请求页面的首部DELETE
方法
删除服务器上的某资源OPTIONS
方法
它用于获取当前URL 所支持的方法。如果请求成功,会有一 个Allow 的头包含类似“GET,POST" 这样的信息TRACE
方法
TRACE
方法被用于激发一个远程的,应用层的请求消息回路CONNECT
方法
把请求连接转换到透明的TCP/IP 通道只有语义上的区别
4、从浏览器地址输入url到显示页面发生了什么
- 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求
- 服务器交给后台处理完成后返回数据,浏览器接受文件(HTML、CSS、JavaScript、图像等)
- 浏览器对加载到的资源进行语法解析,建立相应的内部数据结构(如HTML的DOM)
- 载入解析到的资源文件,渲染页面,完成
5、如何进行网站性能优化
content
方面- 减少
HTTP
请求:合并文件、CSS
精灵、inline Image
- 减少
DNS
查询:DNS
缓存、将资源分到恰当数量的主机名 - 减少
DOM
元素数量
- 减少
Server
方面- 使用
CDN
- 配置
ETag
- 对组件使用
Gzip
压缩
- 使用
Cookie
方面- 减少cookie大小
css
方面- 将样式表放到页面顶部
- 不使用
css
表达式 - 使用
link
不使用@import
JavaScript
方面- 将脚本放到页面底部
- 将
JavaScript
和css
从外部引入 - 压缩
JavaScript
和css
- 删除不需要的脚本
- 减少
DOM
访问
- 图片方面
- 优化图片:根据实际颜色需要选择色深、压缩
- 优化
css
精灵 - 不要在
HTML
中拉伸图片
6、你有用过哪些前端性能优化的方法
- 减少HTTP请求次数:CSS Sprites,JS、CSS源码压缩、图片大小控制合适;网页Gzip、CDN托管,data缓存、图片服务器
- 前端模块JS+数据,减少由于HTML标签导致的宽带浪费,前端用变量保存ajax请求结果,每次操作本地变量、不用请求、减少请求次数
- 用innerHTML代替DOM操作,减少DOM操作次数,优化JavaScript性能
- 当需要设置样式很多时是指className而不是直接操作style
- 少用全局变量、缓存DOM节点查找结果。减少IO读取操作
- 避免使用CSS Expression(CSS表达式)又称动态属性
- 图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳
- 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示,显示比div+css布局慢
7、谈谈性能优化问题
- 代码层面:避免使用css表达式,避免使用高级选择器、通配选择器
- 缓存利用:缓存ajax、使用cdn、使用外部js和css文件以便于缓存、添加Expires头、服务端配置Etag、减少DNS 查找
- 请求数量:合并样式和脚本、使用css图片精灵、初始首屏之外的图片资源按需加载、静态资源延迟加载
- 请求带宽:压缩文件,开启GZIP
8、前端性能优化最佳实践
- 性能评级工具(PageSpeed\Yslow)
- 合理设置HTTP缓存:Expires与Cache-control
- 静态资源打包,开启Gzip压缩(节省响应流量)
- CSS3模拟图像,图标base64(降低请求数)
- 模块延迟(defer)加载、异步加载
- cookie隔离(节省请求流量)
- localStorage(本地存储)
- 使用CDN加速(访问最近服务器)
- 启用HTTP2(多路复用,并行加载)
- 前端自动化(gulp/webpack)
9、HTTP状态码及其含义
- 1xx:信息状态码
- 100 continue 继续,一般在发送post请求时,已发送了http header之后服务器端将返回此信息,表示确认,之后发送具体参数信息
- 2xx:成功状态码
- 200 ok 正常返回信息
- 201 Created 请求成功并且服务器创建了新的资源
- 202 Accepted 服务器已接受请求,但尚未处理
- 3xx:重定向
- 301 Moved Permanently 请求的网页已永久移动到新位置
- 302 Found 临时性重定向
- 303 See Other 临时性重定向,且总是使用GET请求新的URI
- 304 Not Modified 自从上次请求后,请求的网页未修改过
- 4xx:客户端错误
- 400 Bad Request 服务器无法理解请求的格式,客户端不应当再次使用相同的内容发起请求
- 401 Unauthorized 请求未授权
- 403 Forbidden 禁止访问
- 404 Not Found 找不到如何与URI相匹配的资源
- 5xx:服务器错误
- 500 Internal Server Error 最常见的服务器端错误
- 503 Service Unavailable 服务器端暂时无法处理请求
10、语义化的理解
- 使用正确的标签做正确的事情
- HTML语义化就是让页面的内容结构化,便于浏览器、搜索引擎解析
- 没有样式的CSS的情况下也以一种文档格式显示,并且是易于阅读的
- 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO(搜索引擎优化:Search Engine Optimization)
- 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解
11、浏览器内核的理解
- 主要分为:
渲染引擎
跟JS引擎
- 渲染引擎:负责取得网页的内容、整理讯息、以及计算机网页的显示方式,然后输出到显示器或打印机。
- JS引擎:解析和执行JavaScript来实现网页的动态效果
- 内核倾向于渲染引擎
12、最常见的浏览器内核
- Trident内核:IE、MaxThon、TT、The World、360、搜狗浏览器
- Gecko内核:Netscape6及以上版本,Firefox、MozillaSuite/SeaMonkey等
- Presto内核:Opera7及以上。[Opera现在内核为:Blink]
- WebKit内核:Safari,Chrome等[Chrome 的 Blink,webkit的分支]
13、HTML5新特性、移除了的元素
新增选择器:document.querySelector、document.querySelectorAll
拖拽释放API(Drag and drop)
媒体播放的video和audio
本地存储的localStorage和sessionStorage
语义化标签article、footer、header、nav、section
增强表单控件calendar、date、time、email、url、search
历史管理history
跨域资源共享cors
Access-Control-Allow-Origin
页面可见性改变事件 visibilitychange
离线应用manifest
地理位置Geolocation
多任务webworker
全双工通信协议websocket
垮窗口通信 PostMessage
Form Data 对象
绘画 canvas
移除的元素
- 纯表现的元素:basefont、big、center、font、s、strike、tt、u
- 对可用性产生负面影响的元素:frame、frameset、noframes
14、请描述下cookies、sessionStorage、localStorage的区别
- 网站为了标记用户的身份而储存在用户本地终端上的数据
- cookie数据始终在同源的HTTP请求中携带,在浏览器和服务器间来回传递
- sessionStorage和localStorage不会自动把数据发送到服务器,仅保留本地
- cookie数据大小不能超过4k
- sessionStorage和localStorage数据可以达到5M或更大
- 有期时间
- localStorage存储持久数据,不会随着浏览器窗口的关闭而删除或丢失数据
- sessionStorage数据在浏览器窗口关闭后自动删除
- cookie设置的过期时间之前一直有效,即使窗口或浏览器关闭
15、iframe有哪些缺点
- iframe会阻塞主页面的Onload时间
- 搜索引擎的检索程序无法解读这种页面,不利于SEO
- iframe和主页面共享连接池,而浏览器对相同域的连接有限,所以会影响页面的并行加载
- 如果要使用iframe,最好通过JavaScript动态给iframe添加src属性值,可以绕开以上两个问题
16、WEB标准以及W3C 的标准是什么
- 标签闭合、不乱嵌套、标签小写、使用外链js和css、结构行为表现分离
17、xhtml和html的区别
- 功能上的差别:主要是XHTML可兼容各大浏览器、手机、PDA,并且浏览器可以快速正确的编译网页
- 书写习惯的差别:XHTML元素必须被正确地嵌套、闭合、区分大小写、文档必须具有根元素
18、Doctype的作用?严格模式与混杂模式如何区分?有何意义?
- !DOCTYPE声明位于文档最前面,处于html标签之前,告知浏览器的解析器,用什么文档类型规范来解析
- 严格模式的排版和js运作模式是以该浏览器支持的最高标准运行
- 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老实浏览器的行为以防止站点无法工作。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
19、HTML全局属性有哪些
- class:为元素设置类标识
- data-*:为元素设置自定义属性
- draggable:设置元素是否可拖拽
- id:文档内唯一
- lang:元素内容的语言
- style:行内css样式
- title:元素相关的建议信息
20、canvas和svg区别
- svg是矢量图片,放大不会失真和锯齿,canvas是标量画布,放大会失真
- svg绘制出来的每一个元素都是独立的DOM节点,能够方便的绑定事件或用来修改,canvas输出的是一整幅画布
21、HTML5为什么只需要写<!DOCTYPE HTML>
- HTML5不急于
SGML
,不需要对DTD
进行引用,需要doctype
来规范浏览器的行为 - HTML4.01急于
SGML
,需要对DTD
进行引用,才能告知浏览器文档所使用的文档类型
22、如何在页面上实现一个圆形的可点击区域
- svg
- border-radius
- 纯js实现 (需要求一个点在不在圆上的 简单算法,获取鼠标坐标等等)
23、网页验证码是干嘛的,为了解决什么安全问题
- 区分用户是计算机还是人的公共全自动程序。可防止恶意破解密码、刷票、论坛灌水
- 有效防止黑客对某个特定注册用户用特定暴力破解方式进行不断的登录尝试
24、怎么处理移动端1px被渲染成2px问题(viewport)
- 局部处理
meta
标签中的viewport属性,initial-scale
设置为1rem
按照设计稿标准走,外加利用transform
的scale(0.5)
缩小一倍即可
- 全局处理
meta
标签中的viewport
属性,initial-scale
设置为0.5
rem
按照设计稿标准走
25、渲染优化
- 禁止使用
iframe
(阻塞父文档onload事件
) - 禁止使用
gif
图片失效loading
效果(降低cpu
消耗,提升渲染性能) - 使用
CSS3
代码代替JS
动画 - 对于一些小图标,可以使用
base64
位编码,减少网络请求,大图不建议使用,会耗费cup
- 页面头部的
style,script标签
会阻塞页面,因为Renderer进程中的js线程和渲染线程是互斥的 - 页面中空的
href
和src
会阻塞页面其他资源的加载 - 网页
gzip
,CDN托管
,图片服务器 - 前端模块JS+数据,减少由
HTML
标签导致的宽带浪费,前端变量保存AJAX
请求结果,每次操作本地变量,不用请求,减少请求次数 - 用
innerHTML
代替DOM
操作,减少DOM
操作次数,优化JavaScript
性能 - 设置样式很多时设置
className
,而不是设置style
- 少用全局变量,缓存
DOM
节点查找的结果,减少O
读取操作 - 图片预加载
- 尽量前端优化、减少数据库操作、减少磁盘
IO
26、meta viewport 相关
<!DOCTYPE html> <!--H5标准声明,使用 HTML5 doctype,不区分大小写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′> <!--声明文档使用的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使用 IE 最新版本和 Chrome-->
<meta name=”description” content=”不超过150个字符”/> <!--页面描述-->
<meta name=”keywords” content=””/> <!-- 页面关键词-->
<meta name=”author” content=”name, email@gmail.com”/> <!--网页作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!--为移动设备添加 viewport-->
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标题(iOS 6 新增)
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
<!--添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> <!--设置苹果工具栏颜色-->
<meta name=”renderer” content=”webkit”> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使用兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”> <!--针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓-->
<meta name=”MobileOptimized” content=”320″> <!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”> <!--UC应用模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ应用模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone 点击无高亮
设置页面不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
27、浏览器的内核分别是什么
IE
:trident
内核Firefox
:gecko
内核Safari
:webkit
内核Opera
:以前是presto
内核,现在改用Google-Chrome
的Blink
内核Chrome
:Blink
,基于webkit
,Google与Opera Software共同开发
28、为什么利用多个域名来存储网站资源会更有效
CDN
缓存会更有效- 突破浏览器并发限制
- 节约
cookie
带宽 - 节约主域名的连接数,优化页面的响应速度
- 防止不必要的安全问题
29、简述一下src与href的区别
src
用于替换当前元素,href
用于在当前文档和引用资源之间确立联系src
是source
的缩写,指向外部资源位置,指向的内容会将嵌入到文档中当前标签的所在位置,在请求src
资源会将其指向的资源下载并应用到文档内href
是Hypertext Reference
的缩写,指向网络资源所在位置,建立和当前元素或当前文档之间的链接
30、你知道的网页制作会用到的图片格式
- png-8
- png-24
- jpeg
- gif
- svg
- Webp:谷歌开发的一种在加快图片加载速度的图片格式
- Apng:是png位图动画扩展
31、一次js请求一般情况下有哪些地方会有缓存处理
- dns缓存
- cdn缓存
- 浏览器缓存
- 服务器缓存
32、一个页面有大量图片,加载慢,怎么优化这些图片的加载
- 图片懒加载,给页面上的未可视区域添加一个滚动事件,判断图片位置与浏览器顶端的距离与页面的距离
- 如果为相册、幻灯片,可以使用图片预加载技术
- 如果图片为css图片,可以使用
CSSsprite
,SVGsprite
,Iconfont
,Base64
- 如果图片过大,可以使用特殊编码的图片
33、web开发中会话跟踪的方法有哪些
- cookie
- session
- url重写
- 隐藏input
- ip地址
34、HTTP request报文结构是怎么的
- 首行是Request-Line包括:请求方法、请求URL、协议版本、CRLF
- 首行之后若干行请求头,包括general-header,request-header或者entity-header,每一行以CRLF结束
35、HTTP response报文结构是怎么的
- 首行是状态行包括:HTTP版本,状态码,状态描述,后面跟一个CRLF
- 首行之后是若干行响应头,包括:通用头部、响应头部、实体头部
- 响应头部和响应实体之间用一个CRLF空行分隔
- 最后是一个可能的消息实体
36、cookie的弊端
- 每个特定域名下最多生成20个cookie
- IE6或更低版本最多20个cookie
- IE7以上可以由50个cookie
- FIrefox最多50个cookie
- Chrome和Safari没有做硬性限制
- 如果cookie被人拦截,就可以取得所有的session信息
【JavaScript精华系列】JavaScript高级程序面试题汇总之Web综合问题相关推荐
- php高级程序员/php开发工程师/web技术员
职位描述: 职位标签: PHP 网站开发 互联网开发 网站开发工程师 高级程序员 网站开发技术员 PHP初中高程序员 职位职能: 软件工程师 互联网软件开发工程师 职位描述: 1.计算机或相关专业,3 ...
- JavaScript设计模式系列四之外观模式(附案例源码)
文章初衷 设计模式其实旨在解决语言本身存在的缺陷, 目前javaScript一些新的语法特性已经集成了一些设计模式的实现, 大家在写代码的时候,没必要为了用设计模式而去用设计模式, 那么我这边为什么还 ...
- 计算机高级程序开发,2017计算机javascript高级程序设计简介
2017计算机javascript高级程序设计简介 在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多.下面小编整理的关于计算机javascript高 ...
- JavaScript基础系列---闭包及其应用
闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...
- JavaScript学习笔记--【黑马程序员】
目录 一.编程语言 1.1 编程 1.2 计算机语言 1.3 编程语言 1.4 翻译器 1.5 编程语言和标记语言区别 总结 二.计算机基础 2.1 计算机组成 2.2.数据存储 2.3 数据存储单位 ...
- 深入理解javascript函数系列第二篇——函数参数
前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数.本文是深入理解javascript函数 ...
- JavaScript定时器原理及高级使用
JavaScript里面内置了两个定时器,一个是setTimeout()一个是setInterval().下面将由浅入深来理解一下定时器的工作原理. 使用方式: setTimeout() setTim ...
- JavaScript内核系列 第8章 面向对象的JavaScript(下)
原创作者: abruzzi 接上篇:JavaScript内核系列 第8章 面向对象的JavaScript(上) 8.4实例:事件分发器 这一节,我们通过学习一个面向对象的实例来对JavaScript的 ...
- 深入理解javascript作用域系列第三篇
前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇--声明提升(hois ...
最新文章
- python使用statsmodels包中的robust.mad函数以及pandas的apply函数计算dataframe中所有数据列的中位数绝对偏差(MAD)
- vc 限制软件的使用次数或时间
- Mysql8.0之后没有缓存功能
- python自定义变量名_Python 动态变量名定义与调用
- [css] 描述下你所了解的图片格式及使用场景
- python编的游戏越玩越卡_用Python写游戏,不到十分钟就学会了
- the sdk seems invalid._直播平台中必不可少的美颜SDK
- PostMan入门使用教程
- AD封装库的免费下载与导入
- PTA程序设计综合实践1.10
- matlab2017b 破解
- 用matlab进行单整性检验,应用VAR模型时的15个注意点(笔记)
- 程序猿周末副职业_早上,晚上和周末:我如何改变职业并成为程序员
- 耳机降噪技术-ANC、ENC、DSP、CVC
- excel表格怎么换行?3个方法,你一定不知道第3个
- 小程序直接跳转公众号的必要条件记录
- BAT、360、今日头条的小程序大战 谁会是最后的赢家?
- Mac电脑的一键切换输入法神器,自动切换输入法!
- 【Android实战】保存QQ账号与密码
- android图片资源加密解密,Android Glide实现图片加密解密 自定义格式